CAD 图 WebGIS 开发平台 v1.0.161

唯杰地图 VJMAP
让 DWG 成为可查询、
可叠加的 Web 地图

以 WebGIS 的方式处理 CAD 图纸：服务端解析 DWG 生成矢量与栅格瓦片，前端 WebGL 渲染，图层、块、文字与标注完整保留。可查询、可标注、可绘制，叠加天地图与高德，二三维同一套 API。

$npm install vjmap或 CDN 引入

快速上手 391 个在线示例云端管理平台 ↗

综合工业场景 · vjmap + vjmapext

原生 DWG
图层 / 块 / 文字完整保留

WebGL 特效
流动管线 · 光圈 · 面板

391在线示例

93 篇开发指南

313 篇API 参考

7 种GIS / 可视化引擎集成

OGCWMS / WMTS 标准服务

How It Works

从一张 DWG 到你的 Web 应用

不做格式转换、不丢信息：服务端负责解析与切片，前端只做渲染和交互

CAD 图纸

DWG / DXF 原图
上传或服务器目录
多版本、工作区

唯杰地图服务

C++ 内核解析 DWG
矢量 / 栅格瓦片、WMS / WMTS
空间索引与条件查询
全文检索与 AI 接口

vjmap.js

WebGL 矢量渲染
覆盖物、绘制、测量
动画与可视化图层
坐标转换与投影

你的应用

原生 JS / Vue / React
管理平台、大屏、移动端
二维 ⇄ 三维（VJMAP3D）

互联网地图叠加

天地图、高德、百度、OSM 与 CAD 图同屏叠加或切换，CAD 平面坐标与 WGS84 / GCJ-02 / CGCS2000 自动换算。

AI 原生

文档 MCP、Agent Skills 与 llms.txt，让 Cursor、Claude Code 直接写出可运行的 vjmap 代码。

Quick Start

十几行代码，打开一张 CAD 图

与 Mapbox GL 风格一致的 API，熟悉 WebGIS 的开发者上手即用。

1
连接服务用服务地址与 Token 创建 vjmap.Service
2
打开图纸svc.openMap 按 mapid 打开，可选几何渲染或栅格
3
创建地图建立投影、创建 vjmap.Map 并 attach

阅读开发指南在线运行

let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
let res = await svc.openMap({
  mapid: "sys_cad2000",
  mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
  style: { backcolor: 0 }
})
if (res.error) message.error(res.error)

let mapExtent = vjmap.GeoBounds.fromString(res.bounds)
let prj = new vjmap.GeoProjection(mapExtent)
let map = new vjmap.Map({
  container: "map",
  style: svc.rasterStyle(),
  center: prj.toLngLat(mapExtent.center()),
  zoom: 2,
  renderWorldCopies: false
})
map.attach(svc, prj)
await map.onLoad()
map.addControl(new vjmap.NavigationControl())

// 生成按 CAD 坐标重投影的天地图瓦片地址
const tileUrl = svc.webMapUrl({
  tileCrs: "wgs84",
  tileUrl: ["https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={t}"],
  tileSize: 256, tileMaxZoom: 18,
  tileToken: ["你的天地图 tk"],
  mapbounds: res.bounds,
  srs: "EPSG:4527"
})
map.addSource("web-tdt-source", { type: "raster", tiles: [tileUrl], tileSize: 256 })
map.addLayer({ id: "web-tdt-layer", type: "raster", source: "web-tdt-source" })
// 放到所有图层最下面
map.moveLayer("web-tdt-layer", map.getStyle().layers[0].id)