高德点聚合支持撒不同类型的点

image.png

1.在data中定义一个iconMap

image.png

   // 一进来渲染所有撒点
    handlePointAll() {
      if (this.loadNum == 0) {
        this.loadingAll = Loading.service({
          lock: true,
          text: "加载中……",
          background: "rgba(0, 0, 0, 0.7)",
        });
      }
      this.loadNum++;
      if (this.cluster) {
        this.cluster.setMap(null);
      }
      this.map.remove(this.markers);
      this.markers = [];
      this.auditArray = [];
      getJcPointApi().then((res) => {
        this.loadingAll.close();
        this.auditArray = res.result
          .filter((item) => {
            return item.address_lat != 0;
          })
          .map((item) => {
            return {
              list: item,
              points: [item.address_lng, item.address_lat],
            };
          });
        console.log("撒点不同图标", this.auditArray);
        this.auditArray.map((item) => {
          // 为了撒上不同的icon图标
          if (item.list && item.list.from_code == "sxjc") {
            item.list.icon = this.iconMap.get("sxjc");
          }
          if (item.list && item.list.from_code == "xwjc") {
            item.list.icon = this.iconMap.get("xwjc");
          }
          if (item.list && item.list.from_code == "ajjc") {
            item.list.icon = this.iconMap.get("ajjc");
          }
          if (item.list && item.list.from_code == "tsjb") {
            item.list.icon = this.iconMap.get("tsjb");
          }
          if (item.list && item.list.from_code == "xcrwjc") {
            item.list.icon = this.iconMap.get("xcrwjc");
          }
          if (item.list && item.list.from_code == "zdqy") {
            item.list.icon = this.iconMap.get("zdqy");
          }
          if (item.list && item.list.from_code == "zdyq") {
            item.list.icon = this.iconMap.get("zdyq");
          }
          let myIcon = new AMap.Icon({
            size: new AMap.Size(40, 40),
            // image: require("@/components/cqMap/img/all.png"),
            image: item.list.icon,
            imageSize: new AMap.Size(45, 45), // 根据所设置的大小拉伸或压缩图片
          });
          // 取位置
          let marker = new AMap.Marker({
            position: item.points, //位置
            icon: myIcon,
            offset: new AMap.Pixel(-20, -40),
            zIndex: 111,
          });
          this.markers.push(marker);
          marker.on("click", (e) => {
            this.markerClickAll(e, item.list);
          });
        });
        let sts = [
          {
            url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
            size: new AMap.Size(34, 38),
            offset: new AMap.Pixel(-16, -16),
            textColor: "#fff",
          },
        ];
        this.map.plugin(["AMap.MarkerClusterer"], () => {
          this.cluster = new AMap.MarkerClusterer(this.map, this.markers, {
            styles: sts,
            gridSize: 80, //聚合计算时网格的像素大小
            minClusterSize: 10, //聚合的最小数量
            maxZoom: 20,
          });
        });
      });
    },