地图聚合点展示

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, // 自定义非聚合点样式
      });
    },
相关推荐
IT_陈寒3 小时前
Redis大key删除为什么会导致服务卡顿?我的线上事故复盘
前端·人工智能·后端
系统集成-鹰翔3 小时前
ERP图片改名后仍命中识别缓存:缓存键、十分钟到期与调用计数
javascript·经验分享·后端
用户2705077725243 小时前
MCP 最小 Server 实测:3 个 JSON-RPC 报错与修法
前端
用户499335025073 小时前
一人VIP账号多人共用:Web 代理里的会话共享怎么实现
前端
用户老李3 小时前
无线电自学教程 05:第一台收音机——从矿石机到 SDR
前端
IPIPD3 小时前
Node.js请求遇到503怎么重试?先解析Retry-After,再做有上限退避
前端
葡萄城技术团队4 小时前
dsh-spreadjs-editor 的集成链路:把 SpreadJS Designer 嵌进 Agent 工作台
前端
FlyWIHTSKY4 小时前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
码云之上4 小时前
10 颗一模一样的「Edit」:中后台 Web Agent 怎么找到对的那一行
前端·人工智能·浏览器
量化分析码农5 小时前
【Python量化多因子实战 04】因子暴露不是 alpha:市值与行业中性化实战
前端·后端