vue項目記錄-高德地圖2.0-點聚合

1. 定義點聚合對象

cluster: null, // 點聚合

2. 初始化

在map初始化后執行：

this.cluster = new AMap.MarkerClusterer(this.map, [], {
        gridSize: 40,
        maxZoom: 15,
        renderClusterMarker: _renderClusterMarker,
        renderMarker: this._renderMarker
})

靈活setData(坐標系轉換會在之后講):

this.cluster.setData(
    //數據數組，你需要提供lnglat
          tempData.map(point => {
            return {
              lnglat: point.lng, point.lat,
              extData: point//將數據額外放入點中
            }
          })
        )

設置聚合點樣式，在script里面定義即可：

// 聚合點樣式設置
function _renderClusterMarker ({ count, marker }) {
  let size = 24 + (count + '').length * 8
  let div = document.createElement('div')
  let divbg = document.createElement('div')
  div.className = 'cluster-item'
  divbg.className = 'cluster-bg'
  div.style.width = div.style.height = div.style.lineHeight = size / 100 + 'rem'
  divbg.style.width = divbg.style.height = divbg.style.lineHeight = size / 100 + 'rem'
  div.innerHTML = count
  div.appendChild(divbg)
  marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
  marker.setContent(div)
}

設置點的一寫屬性，可以放入div，getMarkerContent方法返回一個模板字符串，在methods里面定義，用來設置不同點的圖標等屬性：

_renderMarker ({ data, marker }) {
      const extData = data[0].extData
      marker.setContent(
        getMarkerContent(...)
      )
      marker.setOffset(new AMap.Pixel(-25, -46))
},

3. 點擊事件（重點）

由於高德2.0升級后取消了之前的默認點擊散開事件，所以需要自己寫點擊事件，當然還是根據百度改的，百度上很多人根據clusterData來判斷是否為聚合點，但是實際情況可能不盡如意，我們可以換成上面顯示的數

// 點標記綁定點擊事件
      this.cluster.on('click', (e) => {
        let { clusterData, marker } = e
        // 此處通過判斷聚合點的innerText是否有內容來判斷是否為單個點
        if (!marker.dom.innerText) {
          return
        }
        // 這里是計算所有聚合點的中心點
        let [alllng, alllat] = [0, 0]
        for (const mo of clusterData) {
          alllng += mo.lnglat.lng
          alllat += mo.lnglat.lat
        }
        const lat = alllat / clusterData.length
        const lng = alllng / clusterData.length
        // console.log(lng, lat)
        // 這里是放大地圖，此處寫死了每次點擊放大的級別，可以根據點的數量和當前大小適應放大
        this.map.setZoomAndCenter(
          this.map.getZoom() + 3,
          [lng, lat],
          false,
          500
        )
      })