Leaflet 地图库学习笔记
最近在项目中涉及到绘制地图相关的业务，项目中使用的是 Leaflet 库，记录一下在开发过程中使用到的API：
1. 绘制多边形或一个区域：
1 const markers = this.TLOPLayer || L.layerGroup(); // 创建一个图层组
2 this.TLOPLayer = markers;
3 markers.clearLayers(); // 移除组中的所有图层
4
5 let latlngs = [ [118.562195,36.951334], [118.566438,36.950696], ... ] // 二维数组的经纬度坐标
6 latlngs = latlngs.map(val => val.reverse()); // leaflet需要的坐标是 [纬度, 经度]，因此需要反转数组
7
8 // 创建一个多边形
9 const polygon = L.polygon(latlngs, {color: "#b2be2e", fillOpacity: 1, weight: 1}).addTo(this.map);
10 polygon.on('click', () => { // 区域实例的点击事件
11 console.log(type, subTitle, value)
12 })
13 this.map.fitBounds(polygon.getBounds()); // 地图放大到绘制区域的地方
14 this.TLOPLayer.addLayer(polygon); // 给新建的图层添加绘制的区域数据
fillOpacity 是区域的填充透明度，默认是0.2 透明度
polygon 就是绘制完的区域实例，可以增加click事件
this.map.addLayer()：给地图添加图层
let layer = new L.LayerGroup(); 创建一个新的图层
if (!this.map.hasLayer(this.TLOPLayer)) { // 地图上是否有当前图层
this.map.addLayer(this.TLOPLayer); // 给地图添加这个图层，如果不写这个就不显示绘制的结果
}
绘制出来是这个样子的：
2. 图层的层级顺序
在开发过程中遇到了一个问题：
我先在地图中添加一个点位图标，然后绘制一个多边形区域。
我先点击其中一个点位，弹出详情页面，然后关闭弹窗，此时业务代码中调用了一个方法：绘制当前地区边界的轮廓，并且缩放至当前地区的大小，其实就是给地图新添加了一个图层，覆盖住了刚才绘制的多边形区域，导致多边形区域的点击事件无法生效。
这是刚绘制了点位和区域，黄色区域可以点击：
此时已经点击了一个点位，查看详情后关闭弹窗：业务代码中已经绘制了当前地区的轮廓，新添加了一个图层。
发现了吗？黄色多边形区域周围多了一圈蓝色轮廓，就是被新添加的图层覆盖了。此时黄色区域的点击事件已经不生效了：
我是这样处理的：在添加这个蓝色轮廓图层的时候，this.areaLayer.bringToBack();
把这个图层的优先级放到最低，因此就不会覆盖黄色多边形的图层了，也不会影响它的点击事件了。下图是我修改之后的效果，黄色区域周围的蓝色轮廓已经不见了，此时点击事件是生效的：
3 点位marker的层级顺序
在搜索名称时，想要把搜索到的点位显示在地图最上层，不要被其他点位覆盖，可以使用：
this.searchMarker = L.marker([data.latitude, data.longitude], { // 在地图中增加点位图像
icon: L.icon({
iconUrl: imgs[data.typeName],
iconSize: [36, 36]
})
})
this.searchMarker.setZIndexOffset(1000)
4 把视图放大到点位周边
this.map.setView([latitude, longitude], zoom) // zoom为缩放级别，例如13
