leaflet实现点位聚合代码

使用 markerClusterGroup 代替原生group

        // 创建群组
        let markers = L.markerClusterGroup({
          maxClusterRadius: 120,
          animate: true,
          iconCreateFunction: function (cluster) {
            let curMarkers = cluster.getAllChildMarkers()
            let n = 0
            for (let i = 0; i < curMarkers.length; i++) {
              n += 1
            }
            let className = 'mycluster'
            if (n > 60) {
              className += ' error'
            }
            return L.divIcon({html: n, className: className, iconSize: L.point(40, 40)});
          }
        })
        // 将点位数据转化为地图点位
        for (let i = 0; i < points.length; i++) {
          let thisPoint = points[i]
          // 创建marker
          let proLatlng = this.map.dataToProvider(thisPoint.lng, thisPoint.lat)
          let marker = L.marker({lng: proLatlng[0], lat: proLatlng[1]}, {
            title: thisPoint.crossName,
            riseOnHover: true,
            icon: this.markerIcon(thisPoint),
            $data: thisPoint // 挂载数据
          })
          // 配置popup
          let popupTpl = `
            <div class="mypopup">
                <h5>${thisPoint.crossName}</h5>
                <p>经纬度：${thisPoint.lng}, ${thisPoint.lat}</p>
                <ul class="lists clearfix">
                  <li>
                    <div class="name">流量(pcu/h)</div>
                    <div class="tips">${thisPoint.flow || 0}</div>
                  </li>
                  <li>
                    <div class="name">饱和度</div>
                    <div class="tips">${thisPoint.saturationIdx || 0}</div>
                  </li>
                  <li>
                    <div class="name">溢流指数</div>
                    <div class="tips">${thisPoint.overflowIdx || 0}</div>
                  </li>
                  <li>
                    <div class="name">失衡指数</div>
                    <div class="tips">${thisPoint.unbalanceIdx || 0}</div>
                  </li>
                </ul>
                <div class="btns">
                  <div class="item" id="popup_btn_analysis"><i class="itsIcons">&#xea17;</i>实时诊断</div>
                  <div class="item" id="popup_btn_optimize"><i class="itsIcons">&#xe905;</i>信号优化</div>
                  <div class="item" id="popup_btn_history"><i class="material-icons">&#xe8e5;</i>历史数据</div>
                </div>
            </div>
          `
          let popup = L.popup().setContent(popupTpl)
          marker.bindPopup(popup)
          // 配置tooltip
          marker.bindTooltip(L.tooltip({direction: 'top', offset: L.point(0, -10)})).setTooltipContent(`
            <strong>${thisPoint.crossName}</strong>
          `)
          // 添加到群组中
          markers.addLayer(marker)
        }
        // 群组添加到地图中
        this.map.$map.addLayer(markers)

有想换工作的同学可以找我内推哦不低于15k（前端，java，测试）