maptalks点聚合切换坐标系后点聚合消失

原因:因为坐标系投影问题

解决方法:切换坐标系后,重新把请求到的点位数据插入到的图层删除掉,重新插入图层就可以解决了

      // 先移除已存在的同名图层 
      this.map.removeLayer('cluster');
      // 然后添加新的图层
      this.map.addLayer(this.clusterLayer);
    // 绘制风险点
    async addMarker() {
      try {
        let markerMap = []
        // let layer2 = this.map.getLayer("layer2"); //风险点图层
        const { data } = await allRiskPoint();
        // this.datas = data
        // console.log("绘制风险点", this.datas);
        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        let arr4 = [];
        if (data && data.length > 0) {
          data.forEach((item) => {
            let { name, id, riskPointNumber, riskLevelText, riskTypeText, locationVo, riskLevel } = item;
            let file = require(`@/assets/compartment/images/FX${riskLevel}.png`);
            let marker = new maptalks.Marker([locationVo.lngWgs, locationVo.latWgs], {
              visible: true,
              editable: false,
              cursor: "pointer",
              setZIndex: 9,
              properties: {
                id: item.id,
              },
              symbol: [
                {
                  markerType: "path",
                  markerFile: file,
                  markerWidth: {
                    stops: [
                      [3, 5],
                      [7, 10],
                      [15, 22],
                      [18, 32],
                    ],
                  },
                  markerHeight: {
                    stops: [
                      [3, 5],
                      [7, 10],
                      [15, 22],
                      [18, 32],
                    ],
                  },
                  markerDx: 0,
                  markerDy: 0,
                  markerOpacity: 1,
                },
              ],
            });
            markerMap.push(marker);
            // layer2.addGeometry(marker);
            if (riskLevel === 0) {
              arr1.push(marker);
            } else if (riskLevel === 1) {
              arr2.push(marker);
            } else if (riskLevel === 2) {
              arr3.push(marker);
            } else if (riskLevel === 3) {
              arr4.push(marker);
            }
            let that = this
            // 添加点击事件
            marker.on('click', function (e) {
              // console.log("点击的点位id", e.target.properties.id);
              that.form = {}
              const id = e.target.properties.id
              getCourseDetail(id).then((res) => {
                // console.log("弹框数据", res.data)
                that.form = res.data;
                that.open = true;
              });
            });
            // marker.on("click", async () => {
            //   this.markerActive = marker;
            //   this.markerName = name;
            //   try {
            //     const { data } = await riskPointDetail({ riskPointId: id });
            //     console.log("风险点", data);
            //     this.$eventBus.$emit("markerDetail", {
            //       data,
            //       riskTypeText,
            //       riskLevelText,
            //       riskPointNumber,
            //       riskLevel,
            //     });
            //   } catch (error) {
            //     console.log(error);
            //   }
            //   //    this.$parent.showRightdialog = false
            //   marker.setInfoWindow({
            //     content: this.$refs["infowindow_content"],
            //     custom: true,
            //     autoPan: false,
            //   });
            //   marker.openInfoWindow();

            // });
          })
        };
        this.riskPointMap.set(0, arr1);
        this.riskPointMap.set(1, arr2);
        this.riskPointMap.set(2, arr3);
        this.riskPointMap.set(3, arr4);

        // 点聚合
        this.clusterLayer = new ClusterLayer('cluster', markerMap, {
          noClusterWithOneMarker: true,
          noClusterWithHowMany: 8, // 聚合的最小个数
          maxClusterZoom: 17,
          symbol: {
            markerType: 'ellipse',
            markerFill: { property: 'count', type: 'interval', stops: [[0, 'rgb(40, 187, 201)'], [6, 'rgb(40, 187, 201)'], [12, 'rgb(40, 187, 201)']] },
            markerFillOpacity: 0.7,
            markerLineOpacity: 1,
            markerLineWidth: 5,
            markerLineColor: 'rgb(40, 187, 201)',
            markerWidth: { property: 'count', type: 'interval', stops: [[0, 40], [9, 50], [99, 60]] },
            markerHeight: { property: 'count', type: 'interval', stops: [[0, 40], [9, 50], [99, 60]] }
          },
          textSymbol: {
            textFill: '#fff', // 设置数字的颜色为红色
            textSize: 24, // 设置字体大小为 14
            textFaceName: "sans-serif",
            // 其他选项...
          },
          drawClusterText: true,
          geometryEvents: true,
          single: true,
        })
        this.clusterLayer.setZIndex(999)
        // this.map.addLayer(this.clusterLayer)
        // // 先移除已存在的同名图层 
        // this.map.removeLayer('cluster');
        // 然后添加新的图层
        this.map.addLayer(this.clusterLayer);
        // let projection = "EPSG:4326";
        // this.map.config("spatialReference", { projection })

        this.map.refresh()

      } catch (error) {
        console.log(error);
      }
    },

 

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@web网页精选

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值