官方教程
    官方api文档

    • 当需要在地图展示数量为十万以内的点并且需要较好的性能表现时,可以使用 AMap.MassMarks 类。AMap.MassMarks 并不是普通的覆盖物,它实际上是由海量点组成的一个 地图图层 , 目前仅适用于html5浏览器。创建方式如下:
    • marker点数量超过200多个以上就会有卡顿 所以点多的时候建议用AMap.MassMarks来处理
    • 海量点只是单纯的点展示。没法添加文字等描述

      1. obuMassMarksList:[],//海量点数据
      2. obuCarMassMarksDataContainer:null,//海量点数据图层 用来替换数据
      3. obuCarMassMark:null, //海量点地图展示图层
      1. createObuCarMassMarks().then(res=>{
      2. this.obuMassMarksList = [];
      3. /* 海量点数据 */
      4. this.obuMassMarksList = res;
      5. /* 创建海量点marker */
      6. this.createObuMassMarks(this.obuMassMarksList)
      7. })
      8. // 在地图上创建Obu海量点,
      9. createObuMassMarks(massMarksList) {
      10. /* 数据图层如果存在 每次请求的时候先置空 每次都是最新的数据 */
      11. if(this.obuCarMassMarksDataContainer != null){
      12. this.obuCarMassMarksDataContainer.setMap(null)
      13. }
      14. // 创建样式对象
      15. let styleObject = {
      16. url: '/platform/static/img/obuCarMassmarker.png', // 图标地址
      17. size: new AMap.Size(20, 20), // 图标大小
      18. anchor: new AMap.Pixel(10, 10) // 图标显示位置偏移量,基准点为图标左上角
      19. };
      20. /* 数据图层 然后赋值给要放到地图实例上的参数上 防止地图上清空造成闪的效果 */
      21. this.obuCarMassMarksDataContainer = new AMap.MassMarks(massMarksList, {
      22. zIndex: 100, // 海量点图层叠加的顺序
      23. zooms: [3, 15], // 在指定地图缩放级别范围内展示海量点图层
      24. style: styleObject // 设置样式对象
      25. });
      26. this.obuCarMassMark = this.obuCarMassMarksDataContainer;
      27. let tmpMap = this.map;
      28. //将每次最新的obu海量点数据添加到地图上
      29. this.obuCarMassMark.setMap(tmpMap);
      30. },
    • 地图图层方法 this.obuCarMassMark.setMap(null)、hide()、show()