feat: 对接聚合图层

src/api/map/index.ts

@@ -25,3 +25,15 @@ export const getSceneListData = async (data: any) => {
 export const getLayerLegend = async (url: string) => {
   return axios.get(url);
 };
+
+// 获取图形的
+export const getLayerData = async (url: string, params: any) => {
+  return request({
+    url,
+    method: 'post',
+    data: params,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
+};

src/hooks/web/useProject.tsx

@@ -1,5 +1,12 @@
+import { reactive } from 'vue';
 import * as SyCim from 'sy-cesium-sdk';
 import { LayerTypeEnum } from '@/enums/projectEnum';
+import axios from 'axios';
+const clustering = reactive({
+  enabled: true,
+  pixelRange: 200,
+  minimumClusterSize: 5,
+});
 // import { getLayerStyle } from '@/api/project';
 const createXyzLayer = (data: any) =>
   new SyCim.XyzLayer(data.id, {
@@ -95,6 +102,43 @@ const layerActions: Record<string, any> = {
     // }
     new SyCim.SuperMapRestLayer(data.id, { url: data.url, k: data.serviceToken })
 };
+
+export const getFeatures: any = (data: any, filter: '1=1') => {
+  return new Promise(async (resolve, reject) => {
+    const { url } = data;
+    let newUrl = decodeURI(url).split("maps/")[0].replace("map-", "data-");
+    const reg2 = /([^/]+)$/;
+    const decodeUrl: any = decodeURI(url);
+    const newLayerName: any = decodeUrl?.match?.(reg2)?.[1];
+    const l = newLayerName?.split("%40");
+    const datasourceName = `${l?.[1]}:${l?.[0]}`;
+    let queryUrl = `${newUrl}data/featureResults.geojson?returnContent=true`;
+    const result = await axios.post(
+      queryUrl,
+      JSON.stringify({
+        getFeatureMode: 'SQL',
+        datasetNames: [datasourceName],
+        maxFeatures: 100000000,
+        queryParameter: {
+          attributeFilter: filter
+        }
+      }),
+      {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+        }
+      }
+    );
+    if (result?.data?.features?.length > 0) {
+      resolve(result.data);
+    } else {
+      resolve({
+        type: "FeatureCollection",
+        features: []
+      });
+    }
+  });
+};
 const defaultZoomToLayer = (data: any) => {
   const { mapParam } = data;
   if (!mapParam?.tileCenter) return;
@@ -215,7 +259,7 @@ const baseLayerActions: Record<string, any> = {
 
 export function useLayer() {
   const addLayer = async (layerData: any) => {
-    const { layerType, url, id } = layerData;
+    const { layerType, url, id, isNeedCluster } = layerData;
     let action = null;
     // 超图 S3M图层
     if (layerType === '080100') {
@@ -237,7 +281,49 @@ export function useLayer() {
       return;
     }
     if (!layerType || !(action = layerActions[layerType as string])) return;
-    const layer: any = await action(layerData);
+    let layer: any = await action(layerData);
+    if (isNeedCluster === '1' && layerData.nameCn === "水库点") {
+      const data = await getFeatures(layerData);
+      if (data?.features?.[0]?.geometry?.type === 'Point') {
+        let layerConfig = {};
+        switch (layerData.nameCn) {
+          case "水库点":
+            layerConfig = {
+              isUniqueRender: true,
+              field: "ENG_SCAL",
+              fieldOptions: [
+                { name: "1.0", attr: "image", value: "reservoir_big.png" },
+                { name: "2.0", attr: "image", value: "reservoir_big.png" },
+                { name: "3.0", attr: "image", value: "reservoir_normal.png" },
+                { name: "4.0", attr: "image", value: "reservoir_small.png" },
+                { name: "5.0", attr: "image", value: "reservoir_small.png" },
+              ],
+              image: "reservoir_small.png",
+            };
+            break;
+        }
+        layer = new SyCim.ClusterWfsLayer(layerData.id, {
+          data,
+          symbol: {
+            type: "billboardP",
+            imageProxy: "/src/assets/map/", // 图片代理
+            style: {
+              clampToGround: false,
+              image: "reservoir_small.png",
+              ...layerConfig,
+            },
+          },
+          clustering: {
+            enabled: clustering.enabled,
+            pixelRange: clustering.pixelRange,
+            minimumClusterSize: clustering.minimumClusterSize,
+            clusterEvent: undefined,
+            clusterColors: undefined, // 聚合点颜色
+            getImage: undefined, // 获取聚合图片的函数
+          },
+        });
+      }
+    }
     layer && window.viewer.addLayer(layer);
     if (['013000'].includes(layerType)) {
       // 3d tiles