高德地图基于vue实现海量点位聚合

背景:大量点位(1w+)的加载

实现:高德地图海量点聚合实现

问题:如果遇到有多图层嵌套,直接使用massmarks海量点实现是有问题的

参考地址:https://lbs.amap.com/api/javascript-api/guide/overlays/massmarker#markercluster

代码:

this.points.map(item => {
    let myIcon = new CMap.Icon({
      size: item.size ? new// 图标尺寸 CMap.Size(...size) : new CMap.Size(34, 34),
      image: item.icon ? item.icon : require("@/assets/imgs/picture.png"),// 图标的取图地址
      imageSize: item.size ? new CMap.Size(...size) : new CMap.Size(34, 34)// 图标所用图片大小
    });
    var marker = new CMap.Marker({
      position: item.points, //位置
      icon: myIcon,
      // content: `<div>${index}</div>`,
      offset: new CMap.Pixel(-15, -15),
      extData: {
        detail: item //点击海量点的详情
      }
    });
    this.markers.push(marker);
    marker.on("click", e => {//点位的点击事件
      let details = e.target.getExtData().detail;
      // console.log(details)
      this.$emit("update", "pointClick", [details, marker]);
    });
    // }
});
var sts = [{//聚合点的样式
    url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
    size: new AMap.Size(34, 34),
    offset: new AMap.Pixel(-16, -16)
}]
 this.cluster = new AMap.MarkerClusterer(this.map, this.markers, {
    styles: sts,
    gridSize: 20,
    minClusterSize:2,
    maxZoom:18
});
(0)

相关推荐

  • tf.data.Dataset.shuffle(buffer

    tensorflow中的数据集类Dataset有一个shuffle方法,用来打乱数据集中数据顺序,训练时非常常用.其中shuffle方法有一个参数buffer_size,非常令人费解,文档的解释如下: ...

  • 最全vue的vue-amap使用高德地图插件画多边形范围

    一.在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' ...

  • 加油2017-2:地图标注

    为静态地图API编写的URL地址中,包含了很多参数,其中最为复杂的参数就是markers,它定义了地图上标注点的位置.标注的内容及样式.此外,在众多的参数中,有些参数是必选项,有些则是可选项. 如果地 ...

  • 高德地图

    对于自动挡了解的朋友都知道,在自动挡的挡位上有一个S挡.最近就有朋友问小编,汽车的S挡什么时候用?下面小编就和大家一块看一下,希望对大家能够有所帮助. 什么是S挡? 一般来讲,像普通自动挡或CVT车型 ...

  • 高德地图怎么修改公司地址

    高德地图添加的公司地址怎么修改?在高德地图中,我们在使用时,可以在地图上添加家的位置.公司的位置等等,那我们在添加之后,该如何修改这些常去位置呢,公司地址怎么修改,下面就和小编一起来看看吧. 1.在高 ...

  • 高德地图怎么添加自己的位置

    高德地图怎么添加个人位置,当我们在使用高德地图时,如果在地图上没有找到自己的位置.自己店铺的位置,该怎么添加位置到地图上呢,高德地图怎么添加自己的位置,下面就和小编一起来看看吧! 1.打开高德地图ap ...

  • 高德地图强大的4个功能,好多人竟不知道,导航更方便,建议收藏

    高德地图强大的4个功能,好多人竟不知道,导航更方便,建议收藏

  • AR导航来了,高德地图上线AR导航功能,快来体验吧!

    大家还记得在十多年前,我们去外地是什么样子吗?由于对地方不熟,去任何地方都要找地图,或者是找当地人问路.甚至去坐出租车,也经常被出租车司机绕路. 从什么时候这种情况变了?就是从各种地图软件兴起之后,这 ...

  • 高德地图这个功能太牛了!秒做行车轨迹动画,旅游达人必备技能

    高德地图这个功能太牛了!秒做行车轨迹动画,旅游达人必备技能

  • 高德地图如何设置不走高速?

    开车出行默认的都是走高速,如果自己不愿意走高速,那么应该如何设置呢?小编给大家介绍高德地图不走高速的设置方法! 打开高德地图APP以后,在应用最上方输入目的地,这样就能在页面最底部弹出"导航 ...

  • 你以为高德地图只是个地图,并不是?其实它还是个PPT制作神器

    大家五一有没有出去玩啊?是不是高德地图的使用频率很高? 今天我就跟大家分享一个,关于高德地图的冷知识!让你大开眼界! 高德地图确实在导航方面很厉害,但他真的只单纯的是一个导航软件吗?不见得!它其实还是 ...