地图聚合点展示

javascript 复制代码
let that= this
 var points = [
        { lnglat: ["120.556168", "36.205298"] },
        { lnglat: ["120.556268", "36.205287"] },
        { lnglat: ["120.553368", "36.205276"] },
        { lnglat: ["120.626468", "36.205265"] },
        { lnglat: ["120.656568", "36.205254"] },
        { lnglat: ["120.556668", "36.205243"] },
      ];
      var count = points.length;
      // 自定义聚合点样式
      var _renderClusterMarker = function (context) {
        // 聚合中点个数
        var clusterCount = context.count;
        var div = document.createElement("div");
        let bgColor = "232, 64, 51";
        div.style.backgroundColor = "rgba(" + bgColor + ",.5)";
        var size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 40);
        div.style.width = div.style.height = size + "px";
        div.style.border = "solid 1px rgba(" + bgColor + ",1)";
        div.style.borderRadius = size / 2 + "px";
        div.innerHTML = context.count;
        div.style.lineHeight = size + "px";
        div.style.color = "#ffffff";
        div.style.fontSize = "12px";
        div.style.textAlign = "center";
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div);
      };
      // 自定义非聚合点样式
      var _renderMarker = function (context) {
        let arr = [];
        arr.push({
          longitude: context.data[0].lnglat.lng,
          latitude: context.data[0].lnglat.lat,
        });
        var content =
          '<div class="wrap-icon" style="">' +
          '<div class="icon"><i class="iconfont icon-feidaoluyidongyuan"></i></div>' +
          '<div class="sanjiao"></div>' +
          "</div>";
        var offset = new AMap.Pixel(-9, -9);
        context.marker.setContent(content);
        context.marker.setOffset(offset);
      };
      that.addCluster(_renderClusterMarker, _renderMarker, points);
javascript 复制代码
 // 聚合
    addCluster(_renderClusterMarker, _renderMarker, points) {
      if (this.cluster) {
        this.cluster.setMap(null);
      }
      //自定义图标
      var sts = [
        {
          // url: "//a.amap.com/jsapi_demos/static/images/blue.png",
          size: new AMap.Size(32, 32),
          offset: new AMap.Pixel(-16, -16),
        },
      ];
      this.cluster = new AMap.MarkerCluster(this.myMap, points, {
        styles: sts,
        gridSize: 60,
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
    },
相关推荐
Setsuna_F_Seiei4 小时前
前端的 AI 学习之路 01 之 Agent API 调用 - 和 Agent 的基础对话
前端·人工智能·ai编程
threerocks5 小时前
AI 原生软件开发生命周期手册 - 如何借助 AI,逐阶段改造软件开发生命周期
前端·javascript·后端
徐小夕5 小时前
3分钟从想法到Agent上线:我们开源了一款AI可视化工作流“IDE”
前端·算法·github
ly76896 小时前
JavaScript 从入门到进阶:核心语法、异步编程与工程化实践
开发语言·javascript·ecmascript
why技术7 小时前
eli5,我觉得这个全网在吹的技能,使用体验真的很一般啊。
前端·人工智能·后端
excel7 小时前
记录升级 nuxt3 到 nuxt4 记录
前端
剑胆琴心静水深流7 小时前
全栈之路6---web集成与呈现
前端·vue.js·spring boot·分布式·spring·前端框架·npm
前端snow8 小时前
ai agent -- Memory汇总
前端
ITresearchGuest8 小时前
AI 焦虑下,前端该何去何从
前端·人工智能
沙盘客8 小时前
AFSIM 示例解读(03)· 六自由度飞行仿真 six_dof(下):机场运作与弹道导弹投送
java·javascript·经验分享