CAD与GIS集成说明 （ 2022-08-19 ）

mapbox地图与cad图纸的集成示例代码说明

点击演示示例查看效果

点击下载示例源码

mapbox-gl.js是通过webgl渲染交互式地图的js库 利用mapbox提供的自定义图层实现渲染mxdraw中的CAD图纸(three.js 场景)。

如果不了解mapbox-gl.js可以参考中文官方文档/ 国际站

什么是mxdraw?mxdraw.js - 适用于前端在线CAD绘制图纸的解决方案 | mxdraw中文文档

mxdraw是基于three.js进行二次开发实现在线CAD图纸的预览，所以本质上我们还是是以mapbox-gl为主，将three.js中的物体对象显示在mapbox-gl的一个自定义图层中。

下面代码是mapbox和mxdraw结合使用的示例代码,先安装对应的依赖包:

npm install mapbox-gl mxdraw [email protected]

<div id="map"></div>

import mapboxgl from "mapbox-gl";
import Mx from "mxdraw"
import * as THREE from "three"
 
// token需要自己在mapbox官网申请
mapboxgl.accessToken = "pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA"
 
// 北京位置的经纬度
const center = [116.391305, 39.90553]
 
const map = new mapboxgl.Map({
     // Mapbox GL JS 进行地图渲染的 HTML 元素，或该元素的字符串 id 。该指定元素不能有子元素。
    container: 'map',
    // 地图位置
    center,
    // 地图样式
    style: 'mapbox://styles/mapbox/streets-v11',
    zoom: 16
})
 
// 图纸或者模型的高度
const modelAltitude = 100;
 
// 将 LngLat 投影转换为 墨卡托投影坐标
const point = mapboxgl.MercatorCoordinate.fromLngLat(
    center,
    modelAltitude
);
// 返回在此纬度上以墨卡托坐标单位表示的1米距离。
// 对于现实世界中使用米单位的坐标，这自然提供了转换为墨卡托投影坐标的比例尺
const lDistForM = point.meterInMercatorCoordinateUnits();
 
// 当前决定该cad图纸在现实中的范围是1公里
const lCADArea = 1000 * lDistForM * 1;
 
// 提供一些必要的mapbox信息，并且赋予了一些mxdraw提供的核心方法
let mxMap =