Question

概述

首先，示例源码是基于Vue3和mapbox-gl实现的一个交互式地图示例展现页面，比如上述与各其他由webgl封装的各种可以和mapbox-gl集成的前端库的使用示例，以及CAD图纸展现在mapbox-gl地图中的示例，我们可以理解为mxdraw是专注处理CAD图纸的渲染，而mapbox-gl 是地图的渲染，其他展示的库也都是围绕mapbox-gl展开的。

初始化

整个初始化流程是: Vue-> mapbox-gl -> mxdraw -> 示例入口函数

所有的初始化函数都叫 init

1. 首先可以我们应该找到src/components 文件夹中的HelloWorld.vue 在其中就可以找到 init 方法， 就是执行mapbox的初始化工作。

2. mapbox-gl 的初始化就包含了mxdraw 的初始化工作，我们可以在 src/mapbox/init.ts 中找到init 方法 在地图样式加载完成的事件中可以找到如下代码，其中mxDrawInit就是 mxdraw 的初始化 (该函数可以在src/mxdraw/init 方法中找到）

 // ...
 map.on("style.load", async () => {
    // ...
    let kilometers = param.kilometers ? param.kilometers: 1;

    // 初始化图纸显示
    mxMap = await mxDrawInit(map, ptCADOrigin,kilometers, cadFile);
    // ...
});

3. 在mxdraw的初始化中， cmdInit通过命令模式注册，各种示例的入口函数. 在src/mxdraw/cmdInit.ts 可以看见所有的示例入口函数，可以根据文件引入位置查看对应的示例代码文件，如下代码所示：

import { addMinMpaContorl } from "@/mapbox/control/addMinMpaContorl"
// ...
MxFun.addCommand('addMinMpaContorl', addMinMpaContorl)
// ...

示例切换

示例切换就是执行对应的在初始化时注册的命令， 在src/components/MyMenu.vue 中可以看到每个菜单按钮数据都有个cmd属性，就表示其对应的命令。

每次执行一个命令前都会删掉当前mapbox-gl 的Map对象 重新初始化mapbox, 在整个删除过程中会涉及到mxdraw绘制three的资源没有得到释放的问题， 可以在 src/mxdraw/init.ts 中找到如下代码：

map.on('remove',()=> {
    // 地图删除触发对图纸的销毁函数
    beforeDestroy()
})

可以在 src/mxdraw/ResourceTracker.ts 中就专门为three的资源释放和追踪提供的方法类， 这样在删除地图，资源得到释放后，就不会造成页面卡顿现象了。

其他目录(mapbox为主)文件简要说明：

* src/mapbox/Map 是对mapbox-gl中的Map类的一次封装， 重构或者新增了一些方法， 在如给标记点设置高度、线段3D拉伸等地方可能会用到这些方法。

* src/animate.ts 利用了"d3-ease"提供的线性插值的能力封装了对应的方法， 提供了创建线性动画的方法以及添加动画等。

* src/mapbox/graphics 是对mapbox 使用图层展示 geojson数据的一个封装，可以创建一个自由操作的不同类型的不同形状的图形，以及基于这个去图形类去实现更多图形的示例。

* src/mapbox/draw 主要是对mapbox-gl-draw 提供的绘制能力进行了封装，其中主要是绘制工具条和绘制能力的封装， 展示了如何扩展mapbox-gl-draw的绘制功能， 对杂乱且不兼容的各种扩展的绘制能力进行了一定程度的整合兼容。

* src/mapbox/animate 是一些动画效果的示例。

* src/mapbox/calculate 是结合 turf 这个库 使用geojson数据参与计算的示例。

* src/mapbox/control 是mapbox 的各种控件使用示例，如上说的mapbox-gl-draw就是一个控件。

* src/mapbox/demo 是mapbox的一些demo示例，如mapbox加载three.js的3D城市、地图中加载对应位置的CAD图纸等等。

* src/mapbox/layer 是mapbox的一些常见使用图层的示例。

* src/mapbox/plugins 是一些常见的插件， 如city 就是加载3d城市，InternetMap就是加载各种第三方地图...

* src/mapbox/pointTag 就是实现各种点标记的效果的示例。

* src/mapbox/style 提供了各种mapbox的地图样式的配置信息。

* patches文件夹中是修改node_modules 中一些依赖包的记录， 都是一些小改动，主要是解决一些整合功能出现的兼容性问题。