使用 ArcGIS 实现聚合

特别说明：

• 本案例为项目实际应用场景，部分代码没法全部展示
• 案例代码部分内容需要替换成自己项目中实际的内容

先看效果图

const aa = () => {
 // 说明： id为LayerId，url为服务地址，需要注意的是聚合此处应该使用Feature服务
 let opt = {
    id: 'GermplasmResourceService',
    url: `${process.env.VUE_APP_MAP_URL}/server/rest/services/germplasm-v2/GermplasmResourceService/FeatureServer/0`
  }
  const clusterConfig = {
    type: "cluster",
    clusterRadius: 100,
    popupTemplate: {},
    clusterMinSize: 20,
    clusterMaxSize: 40,
    labelingInfo: [{
      deconflictionStrategy: "none",// 是否重叠
      labelExpressionInfo: {
        expression: `
          var value = $feature.cluster_count;
          var num = Count(Text(Round(value)));
          Decode(num,
            4, Text(value / Pow(10, 3), "#千"),
            5, Text(value / Pow(10, 4), "#.#万"),
            7, Text(value / Pow(10, 6), "##.0m"),
            Text(value, "#,###")
          );
        `
      },
      // 文字样式
      symbol: {
        type: "text",
        color: "#FFF",
        font: {
          weight: "bold",
          family: "microsoft-yahei",
          size: "12px"
        }
      },
      labelPlacement: "center-center"
    }],
  };
  let featureOption = {
    id: opt.id,
    url: opt.url,
    featureReduction: clusterConfig,
    labelsVisible: true,
    spatialReference: new SpatialReference({
      wkid: 4490
    }),
    objectIdField: "ObjectID",
    // 聚合样式
    renderer: {
      type: "simple",
      field: "mag",
      symbol: {
        type: "simple-marker",
        size: 4,
        color: "#69dcff",
        outline: {
          color: "rgba(0, 139, 174, 0.5)",
          width: 5
        }
      }
    }
  }

  // 从服务获取分类颜色
  // let res = await request({
  //   url: item.url,
  //   method: "get",
  //   params: { f: "pjson" },
  // });

  // let infos = res?.drawingInfo?.renderer?.uniqueValueInfos
  // if (infos.length) { }

  data.resourceLayer = new FeatureLayer(featureOption);
  data.view.map.add(data.resourceLayer);
}

当然，也可以是以下样式

不过这种情况的话，在发布服务的时候进行设置，同时注释掉 renderer 相关配置即可。