百度地图点聚合优化重写

• vue 引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=123123123"></script>

<script type="text/javascript" src="<%BASE_URL%>utils/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="<%BASE_URL%>utils/MarkerClusterer.js"></script>

• 使用

createMap(res) {
   
  // 百度地图API功能
  let map = new BMap.Map("allmap");
  let [mapData, that] = [this.$store.state.map, this];
  map.centerAndZoom(
    new BMap.Point(mapData.position.jd, mapData.position.wd),
    mapData.scale
  );
  map.enableScrollWheelZoom();

  let markers = [];
  res.data.map(item => {
   
    let pt = new BMap.Point(item.Jd, item.Wd);

    // 监听点事件
    const [success, error] = [
      new BMap.Icon(require('@/assets/home/success.png'), new BMap.Size(36, 36)),
      new BMap.Icon(require('@/assets/home/error.png'), new BMap.Size(36, 36)),
    ]

    let marker = null
    if (item.CurrentEventState == '正常') {
   
      marker = new BMap.Marker(pt, {
    icon: success }); // 创建点
    } else {
   
      marker = new BMap.Marker(pt, {
    icon: error }); // 创建点
    }

    const attribute = () => {
   
      this.next(item);
    };
    marker.addEventListener("click", attribute);

    markers.push(marker);
  });

  // 获取地图缩放级别
  map.addEventListener("zoomend", function () {
   
    that.$store.commit("map", {
    scale: this.getZoom() });
  });

  // 获取拖拽后地图经纬度信息
  map.addEventListener("dragend", function () {
   
    let center = map.getCenter();
    that.$store.commit("map", {
   
      position: {
    jd: center.lng, wd: center.lat }
    });
  });

  // 生成一个marker数组，然后调用markerClusterer类即可
  let markerClusterer = new BMapLib.MarkerClusterer(map, {
   
    markers,
    gridSize: 30 // 聚合面积
  });
}

• MarkerClusterer.js

/**
 * @fileoverview MarkerClusterer标记聚合器用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。
 * 主入口类是<a href="symbols/BMapLib.MarkerClusterer.html">MarkerClusterer</a>，
 * 基于Baidu Map API 1.2。
 *
 * @author Baidu Map Api Group 
 * @version 1.2
 */

/** 
 * @namespace BMap的所有library类均放在BMapLib命名空间下
 */
var BMapLib = window.BMapLib = BMapLib || {
   };
(function () {
   

    /**
     * 获取一个扩展的视图范围，把上下左右都扩大一样的像素值。
     * @param {Map} map BMap.Map的实例化对象
     * @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
     * @param {Number} gridSize 要扩大的像素值
     *
     * @return {BMap.Bounds} 返回扩大后的视图范围。
     */
    var getExtendedBounds = function (map, bounds, gridSize) {
   
        bounds = cutBoundsInRange(bounds);
        var pixelNE = map.pointToPixel(bounds.getNorthEast());
        var pixelSW = map.pointToPixel(bounds.getSouthWest());
        pixelNE.x += gridSize;
        pixelNE.y -= gridSize;
        pixelSW.x -= gridSize;
        pixelSW.y += gridSize;
        var newNE = map.pixelToPoint(pixelNE);
        var newSW = map.pixelToPoint(pixelSW);
        return new BMap.Bounds(newSW, newNE);
    };

    /**
     * 按照百度地图支持的世界范围对bounds进行边界处理
     * @param {BMap.Bounds} bounds BMap.Bounds的实例化对象
     *
     * @return {BMap.Bounds} 返回不越界的视图范围
     */
    var cutBoundsInRange = function (bounds) {
   
        var maxX = getRange(bounds.getNorthEast().lng, -180, 180);
        var minX = getRange(bounds.getSouthWest().lng, -180, 180);
        var maxY = getRange(bounds.getNorthEast().lat, -74, 74);
        var minY = getRange(bounds.getSouthWest().lat, -74, 74);
        return new BMap.Bounds(new BMap.Point(minX, minY), new BMap.Point