leaflet + vue 海量点位批量显示，根据不同缩放级别显示不同数量的点位

     最近在项目中遇到一个需求，以前点位是根据区县进行分组聚合式显示的，但是交互不够友好直接，需要不断地点开才行，因此产品要求把所有点位平铺显示，不要分组，根据不同的缩放级别显示不同数量的点位。咨询了同事，给出这样一个方案：

     定义一个新数组，循环所有点位，先把点位的经纬度转换成屏幕的坐标（用到 leaflet 的 latLngToContainerPoint 方法），然后计算该点位和新数组里所有点的距离（勾股定理），大于某个距离（比如50px）就push进新数组，然后在地图上显示新数组的点位，这样点位就不会全部密密麻麻的显示在地图上了，而是每个点之间都有一定的距离。

    因为循环次数比较多，为了提高渲染速度，做了以下处理：

    1. 首先增加一个判断条件，只渲染地图可视范围内的点位，不在可视范围内的点直接退出循环

    2. 尽量不要在循环体中去访问 this，很耗费时间，把所有可以保存成变量的都放在外面定义好，直接拿去循环里用

    效果如下：

 

 

 核心代码如下：

createPointsByZoom(key) {
      // 放大到 14 级别以上，展示所有的点位
      if (this.map.getZoom() > 14) {
        this.staData.push(...this.points[key])
        return
      }

      const TARGET_DISTANCE = 50 // 两点之间的距离：50px
      const zoom = this.map.getZoom()
      const newList = [this.points[0]] // this.points 是指所有点位，默认放入一个点位
      const bounds = this.map.getBounds() // 地图边界
      const lat1 = bounds._southWest.lat
      const lat2 = bounds._northEast.lat
      const lon1 = bounds._southWest.lng
      const lon2 = bounds._northEast.lng

      this.points.map(item => {
        const { latitude, longitude } = item

        // 只画可视范围内的
        if (!this.isInView(lat1, lat2, lon1, lon2, latitude, longitude)) {
          return
        }

        const latLng1 = L.latLng([latitude, longitude])
        const location1 = this.map.latLngToContainerPoint(latLng1, zoom) // { x: 123, y: 123 }
        const { x, y } = location1

        /**
         * 比较每一个点和容器中的点的距离
         * latLngToContainerPoint: 将经纬度转换为相对地图容器的屏幕坐标
         */
        const moreThanStandardDistance = newList.every(data => {
          const latLng2 = L.latLng([data.latitude, data.longitude])
          const location2 = this.map.latLngToContainerPoint(latLng2, zoom)
          // 计算两点之间的屏幕距离, 勾股定理
          const distanceX = Math.abs(x - location2.x)
          const distanceY = Math.abs(y - location2.y)
          const distance = Math.pow(distanceX, 2) + Math.pow(distanceY, 2)
          return distance > Math.pow(TARGET_DISTANCE, 2)
        })

        if (moreThanStandardDistance) {
          newList.push(item)
        }
      })

      this.staData.push(...newList)
    }