English | 中文

介绍

此工程为唯杰地图 VJMAP3D 示例的所有源代码。

在线示例查看地址: https://vjmap.com/map3d/demo/

运行

入口文件为index.html, 示例文件目录为 src，每个示例都是独立的例子，都能单独运行。

由于File协议无法实现跨域，如果直接双击index.html会导致一些资源无法加载。所以需要以http服务器的方式运行。方法为

• 方法一(需要有node环境)：

npm install -g live-server

然后在命令行里进入当前目录，输入live-server即可。

• 方法二(vscode环境)

在vscode里面安装插件Live Server，安装成功后，打开此目录，选择一个html页面，右键选择Open With Live Server即可。

唯杰地图介绍

唯杰地图VJMAP为CAD图或自定义地图格式WebGIS可视化显示开发提供的一站式解决方案，支持的格式如常用的AutoCAD的DWG格式文件、GeoJSON等常用GIS文件格式，它使用WebGL矢量图块和自定义样式呈现交互式地图, 提供了全新的大数据可视化、实时流数据可视化功能，通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析，可帮助您在网站中构建功能丰富、交互性强、可定制的地图应用。

唯杰地图官网地址：https://vjmap.com/

唯杰地图特点

• 完全兼容AutoCAD格式的DWG文件，无需转换

• 地图提供图形的放大、缩小、自由缩放、平移、显示全图等功能，支持鼠标/单指拖拽、上下左右按键进行地图平移，支持鼠标滚轮、双击、双指进行地图缩放，支持Shift+拉框放大；支持飞行、平移等运动特效，支持地图比较功能，能导出PNG、PDF、SVG等格式功能；

• 多视角模式：地图支持2D、3D视角，支持垂直视角、360度旋转视角；

• CAD与GIS完美结合；地图支持CAD图渲染成栅格瓦片和矢量瓦片这两种格式，能自定义地图样式; 能支持WMS格式；支持与互联网地图叠加显示;

• 能对地图进行交互操作,包括点击图形查看属性信息、图层开关显示等；能对GIS数据进行空间查询操作；

• 支持图形版本控制功能；同时提供协同更新图形功能，可通过不同部门上传的图形或图层创建协同图形，同时当依赖的图形更新时，协同图形能自动更新至最新版本；

• 支持在Web上进行绘制图形功能；可绘制点、线、面、圆等类型，同时能将绘制的图形保存成dwg文件；需支持对CAD图上的坐标进行捕捉绘制; 需提供测距、测角度、测面积等测量工具;

• 支持覆盖物绘制、聚合显示、信息窗口、热力图叠加等常见的地图功能，提供丰富的js接口;

• 绘图技术先进：采用WebGL技术；在CAD图叠加万个点以上的用户数据时，渲染不卡顿，支持大数据可视化。

• 服务部署跨平台支持(支持windows,linux); 支持docker部署，地图查看完全兼容移动端。

唯杰地图3D

唯杰地图3D VJMAP3D是一款基于threejs开发的三维可视化引擎框架。通过VJMAP3D提供的丰富的功能，可以在浏览器中创建出绚丽的3D可视化应用。

该框架既可做为一个单独的3D引擎用于数据可视化、产品展示、数字孪生、三维GIS等多个领域的可视化开发, 也可以结合唯杰地图VJMAP做为一个3D图层，能够在保留二维图形信息的直观性同时，融入三维空间的深度感知和交互性，为用户带来更丰富、立体和沉浸式的视觉体验及数据分析能力。

唯杰地图3D特点

• 完全兼容AutoCAD格式的DWG文件展示，无需转换
• 兼容唯杰地图，同一套框架，同一套代码，既兼容VJMAP的3D图层，又可单独做为三维引擎使用
• 基于threejs开发，兼容threejs写法。threejs拥有庞大的开发者社区和丰富的教程资源，能利用threejs生态资源
• 易用性高：学习门槛低，提供丰富的API接口，便于快速上手开发3D应用。
• 丰富的内置功能：提供了预设对象和材质，以及粒子系统、后期处理等高级特性，便于快速实现复杂视觉效果。
• 交互设计：提供丰富的交互组件和事件处理机制，增强用户体验和应用互动性。支持场景中的对象拾取与交互，简化了交互逻辑的实现。
• 扩展性强：基于模块化开发，支持自定义扩展，满足多样化开发需求。

---

中文 | English

Introduction

This repository contains all source code for VJMAP VJMAP3D examples.

Online Demo: https://vjmap.com/map3d/demo/#/gallery/map?lang=en

Getting Started

The entry file is index.html, and the example files are located in the src directory. Each example is an independent, self-contained demo that can run on its own.

Since the File protocol does not support cross-origin requests, directly opening index.html by double-clicking may cause some resources to fail to load. You need to run it via an HTTP server using one of the following methods:

• Method 1 (requires Node.js):

npm install -g live-server

Then navigate to the project directory in your terminal and run live-server.

• Method 2 (VS Code):

Install the Live Server extension in VS Code. Once installed, open this directory, right-click on an HTML file, and select Open With Live Server.

About VJMAP

VJMAP is a one-stop solution for CAD drawings and custom map format WebGIS visualization. It supports common formats such as AutoCAD DWG files, GeoJSON, and other popular GIS file formats. It renders interactive maps using WebGL vector tiles and custom styles, and provides innovative big data visualization and real-time streaming data visualization capabilities. With VJMAP, you can quickly build beautiful, smooth map presentations and spatial analysis on both browsers and mobile devices, helping you create feature-rich, interactive, and customizable map applications.

Official Website: VJMAP https://vjmap.com/en/

Key Features

• Fully compatible with AutoCAD DWG files — no conversion needed

• Comprehensive map controls: zoom in/out, free zoom, pan, fit to view. Supports mouse/touch drag, keyboard navigation, scroll wheel zoom, double-click zoom, pinch-to-zoom, and Shift+drag to zoom. Includes fly-to and pan animations, map comparison feature, and export to PNG, PDF, SVG formats.

• Multiple view modes: supports 2D and 3D perspectives, vertical and 360-degree rotation views.

• Seamless CAD and GIS integration: supports rendering CAD drawings as raster tiles and vector tiles with custom map styles; supports WMS format; supports overlaying with web maps.

• Interactive map operations: click on elements to view properties, toggle layer visibility, and perform spatial queries on GIS data.

• Version control for drawings; collaborative drawing updates allow creating composite drawings from different departments' uploads, with automatic updates when dependent drawings change.

• Web-based drawing capabilities: draw points, lines, polygons, circles, etc., and save drawings as DWG files. Supports coordinate snapping on CAD drawings and provides measurement tools for distance, angle, and area.

• Supports overlay rendering, clustering, info windows, heatmap overlays, and other common map features with rich JavaScript APIs.

• Advanced rendering with WebGL technology; no lag when overlaying tens of thousands of data points on CAD drawings, supporting big data visualization.

• Cross-platform deployment (supports Windows and Linux); supports Docker deployment, and fully compatible with mobile viewing.

VJMAP3D

VJMAP3D is a 3D visualization engine framework built on Three.js. With VJMAP3D's rich feature set, you can create stunning 3D visualization applications in the browser.

The framework can serve as a standalone 3D engine for data visualization, product showcases, digital twins, 3D GIS, and more. It can also be combined with VJMAP as a 3D layer, preserving the intuitiveness of 2D graphic information while adding 3D spatial depth perception and interactivity, delivering a richer, more immersive visual experience and data analysis capability.

VJMAP3D Features

• Fully compatible with AutoCAD DWG file display — no conversion needed
• Compatible with VJMAP: one framework, one codebase — works both as a VJMAP 3D layer and as a standalone 3D engine
• Built on Three.js, compatible with Three.js syntax. Leverage the vast Three.js developer community and ecosystem resources
• Easy to use: low learning curve with rich API interfaces for quick 3D application development
• Rich built-in features: preset objects, materials, particle systems, post-processing effects, and more for quickly achieving complex visual effects
• Interactive design: comprehensive interaction components and event handling mechanisms to enhance user experience. Supports object picking and interaction within scenes, simplifying interaction logic
• Highly extensible: modular architecture supporting custom extensions to meet diverse development needs