简述
回顾了一下之前写的四节内容，发现并没有给出一个完整的Demo示例，为了方便后面的讲解，这里提供一个简单的模板，同时补充一些在前端框架中，写地图组件的注意事项，也希望你能把自己的经验分享在评论区，共同进步。
示例
html
<div id="map" ></div>
js
mapboxgl.accessToken = "ACCESS_TOKEN";
const map = new mapboxgl.Map({
container: "map", // div的id
style: style, // 'mapbox://styles/mapbox/streets-v11' 可直接用这个地址
center: [116.39104843139647, 39.912287369097186], // 地图加载后默认中心点
zoom: 15, // 地图缩放比例
});
// load 也可以写成style.load
map.on("load", () => {
// 加载图层，注册事件等都需要写在这里面
});
css
#map {
/* 宽高 */
height: 100%;
width: 100%;
}
地图组件注意事项（vue)
在日常的开发工作中，项目一般会使用前端框架作为基础，在其上做业务的实现，封装一个地图组件是GIS开发的日常，下面会提供几个注意事项，希望对你有帮助。
绑定数据
不要将map在data中定义，这会导致vue一直监听map的变化，整个地图会变卡，可以选择直接this.map去赋值，也可以在vue对象外定义一个变量存储。
规范代码逻辑
不同于其他前端组件或页面，代码逻辑并不会太多，地图组件稍不注意就有几百行的代码量，如果是vue3,那么直接写在js/ts文件里，vue2也能这么做。
GIS代码用一个一个函数分割开，保证代码的可读性，在methods里，例如:
methods: {
// init
// 初始化地图
initMap(){}
// 初始化图层，在map.on中调用
initLayers(){}
// 初始化地图/图层事件 在map.on中调用
initMapEvents(){}
// function
// 控制图层显隐
hiddenAndShow(){}
// 缩放至某某地方
flyToSomeWhere(){}
// 修改图层数据
editLayer(){}
// web-gis
// 对另外的组件/页面进行操作
operateOhter(){}
// 其他组件想调用地图数据或进行操作
otherOperateMap(){}
// ....
}
这么做的目的是可读，方便自己改bug，也方便他人改你的代码，我简单的将methods分为：初始化、功能、对外（其他组件/页面）接口
与其他组件的交互（有争议，欢迎讨论）
从我个人开发经历来讲，这个问题并不好解决，每种交互方式都会带来不同的问题。
这里所说的交互，是与其他组件的通信方式，举例来讲，有一块大屏，中间是地图，周围是图表和其他内容，图表需要调用地图的数据，该如何去传递呢？
实现传输是简单的，问题在于规范的交互传输，目前，我曾使用过以下几种方式：
- store 存储变量，通过监听变量进行传递
- bus 通信
- 其他组件直接调用相对应的方法，地图组件相当于后台接口，反之亦然。
数据处理
在很多场景中，数据并不符合业务的需求，需要进行处理，这时候一定注意代码的逻辑与执行效率。
性能
对于刚入门的同学来说，在开发过程中要注意，每当一个功能或业务逻辑堆叠在项目时，首先注意的是 是否互相影响，其次注意页面运行是否变卡顿了，是前者，那么是出现了bug；是后者，你可以先初步鉴定一下，没有办法解决的话，也要及时做记录，后面如果有提升性能的需求，你也会有好的入手点。
