vue 高德地图JSAPI（第四篇：海量点样式分组引擎）

vue-amap配置方法：https://blog.csdn.net/qq_40716778/article/details/105505163 

详解在代码注释中（其实是不想写那么多字）官方文档

<template>
  <div>
    <div id="test-map" />
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'
export default {
  data() {
    return {
      map: '' // 地图
    }
  },
  mounted() {
    lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new AMap.Map('test-map', {
        zooms: [3, 18], // 地图缩放范围
        center: new AMap.LngLat(116.397428, 39.90923)
      })
      // 加载海量点组件
      AMapUI.loadUI(['misc/PointSimplifier'], PointSimplifier => {
        if (!PointSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！')
          return
        }
        // 创建组件实例
        var pointSimplifier = new PointSimplifier({
          map: this.map,
          // data是海量点的坐标，下面是随机产生点坐标的方法
          data: (() => {
            var data = []
            for (var i = 0, len = 500; i < len; i++) {
              data.push({
                position: [
                  this.map.getCenter().getLng() + (Math.random() > 0.5 ? 2 : -2) * Math.random(),
                  this.map.getCenter().getLat() + (Math.random() > 0.5 ? 2 : -2) * Math.random()
                ]
              })
            }
            return data
          })(),
          // 返回要显示的点坐标
          getPosition: (dataItem) => {
            return dataItem.position
          },
          renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
          renderOptions: {
            pointStyle: {
              fillStyle: 'red'
            },
            //将经纬度进行分组
            getGroupId: function(item, idx) {
              // 分组规则
              // 这里会遍历每个数据
              // 根据每个数据的参数进行分组
              // 下面的判断是根据参数的下标进行分组
              if (idx < 250) {
                return 'g0'
              } else {
                return 'g1'
              }
            },
            // 为每组添加样式（两种方法）
            // 方法一
            groupStyleOptions: {
              g0: {
                pointStyle: {
                  fillStyle: 'red'
                }
              },
              g1: {
                pointStyle: {
                  fillStyle: 'blue'
                }
              }
            }
            // 方法二
            groupStyleOptions: function(gid) {
              if (gid === 'g0') {
                return {
                  pointStyle: {
                    fillStyle: 'red'
                  }
                }
              } else {
                return {
                  pointStyle: {
                    fillStyle: 'blue'
                  }
                }
              }
            }
          }
        })
        // 为海量点添加点击事件
        pointSimplifier.on('pointClick', () => {
          console.log(999)
        })
      })
    })
  }
}
</script>

<style scoped>
  #test-map{
    height:670px;
  }
</style>

 效果图如下