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

Leaflet 地图库学习笔记

相关

标签