vue项目记录-高德地图2.0-使用海量点MassMarks

1. 背景

项目中需要展示各种标记点然后展示文字，当标记点数量过多，页面就会十分卡顿。因为每个标记点和文字都是单独渲染的，当页面中的元素太多，自然就卡了。

2. 解决方案

最简单的解决方案就是使用高德地图官方提供的海量点MassMarks，将所有点放入一个对象中渲染，当然如果你一开始就用这个更好，实际上这个配置比单独配置标注点要更加方便。

其他优化方案：

（1）数据随屏幕所在位置加载，网络上也有教程，目前我还没使用过，但是项目还有其他覆盖物，如果数据继续增加迟早要考虑使用这种方案（需要后端提供接口）

（2）通过canvas自己绘制点，难度较高。

（3）避免一次性全部加载，可根据行政区划酌情加载。

3. 使用

    let style = {
        url: WellPng,
        anchor: new AMap.Pixel(15, 15),
        size: new AMap.Size(30, 30)
      }
      this.wellMass = new AMap.MassMarks(data, {
        opacity: 1,
        cursor: 'pointer',
        zooms: [8, 20],
        style: style
      })
      this.nowWellMarker = new AMap.Marker({
        content: ' ',
        zooms: [8, 20],
        map: this.map,
        offset: new AMap.Pixel(20, 20)
      })
      this.wellMass.on('mouseover', e => {
        this.nowWellMarker.show()
        this.nowWellMarker.setPosition(e.data.lnglat)
        this.nowWellMarker.setLabel({
          content: `<div>${e.data.chname}</div><div>经度:${e.data.lnglat[0]}</div><div>纬度:${e.data.lnglat[1]}</div>`
        })
      })
      this.wellMass.on('mouseout', e => {
        this.nowWellMarker.hide()
      })
      this.wellMass.setMap(this.map)

其中data为你要放入的数组，数组中的对象必须要的属性为lnglat(Array)，其他不做要求，可选属性值style(Number)，可以将上面的style对象设置为对象数组，然后通过style控制点的图标等。

（官方文档有更详细说明，本文只作为一个引子，详情请看官方文档）

需要注意的是：如果你通过你的数据没有lnglat，或者lnglat格式不对，很可能导致事件绑定失效，请注意核对数据，控制台不一定会有报错