fix: 排查聚合图层查看不准的问题

public/img/map/layer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><g><g><path d="M9.999699296875,9.385516708984376L17.591379296874997,6.222386708984375C18.104379296875,6.008626708984375,18.104379296875,5.250506708984375,17.591379296874997,5.036746708984375L9.999699296875,1.873626708984375L2.408007296875,5.036746708984375C1.894969796875,5.250506708984375,1.894970896875,6.008626708984375,2.408007296875,6.222386708984375L9.999699296875,9.385516708984376ZM9.999689296875,8.011006708984375L4.284089296875,5.629566708984375L9.999699296875,3.2481267089843753L15.715279296875,5.629566708984375L9.999689296875,8.011006708984375ZM1.873779296875,8.783306708984375L1.873779296875,10.317236708984375L10.000019296875,13.889926708984374L18.123779296875,10.318326708984374L18.123779296875,8.784396708984374L10.000019296875,12.356026708984375L1.873779296875,8.783306708984375ZM1.873779296875,13.024326708984376L1.873779296875,14.558226708984375L10.000139296875,18.130926708984376L18.123779296875,14.559426708984375L18.123779296875,13.025526708984374L10.000139296875,16.597026708984373L1.873779296875,13.024326708984376Z" fill-rule="evenodd" fill="#36B29E" fill-opacity="1"/></g></g></svg>

src/hooks/web/useProject.tsx

@@ -1,7 +1,9 @@
 import { reactive } from 'vue';
 import * as SyCim from 'sy-cesium-sdk';
 import { LayerTypeEnum } from '@/enums/projectEnum';
+import { queryLayersByPos } from "@/utils/mapUtils";
 import axios from 'axios';
+import { throttle } from "lodash-es";
 const clustering = reactive({
   enabled: true,
   pixelRange: 200,
@@ -105,7 +107,7 @@ const layerActions: Record<string, any> = {
 
 export const getFeatures: any = (data: any, filter: '1=1') => {
   return new Promise(async (resolve, reject) => {
-    const { url } = data;
+    const { url, serviceToken } = data;
     let newUrl = decodeURI(url).split("maps/")[0].replace("map-", "data-");
     const reg2 = /([^/]+)$/;
     const decodeUrl: any = decodeURI(url);
@@ -113,16 +115,20 @@ export const getFeatures: any = (data: any, filter: '1=1') => {
     const l = newLayerName?.split("%40");
     const datasourceName = `${l?.[1]}:${l?.[0]}`;
     let queryUrl = `${newUrl}data/featureResults.geojson?returnContent=true`;
+    let params: any = {
+      getFeatureMode: 'SQL',
+      datasetNames: [datasourceName],
+      maxFeatures: 100000000,
+      queryParameter: {
+        attributeFilter: filter
+      }
+    };
+    if (serviceToken) {
+      params.k = serviceToken;
+    }
     const result = await axios.post(
       queryUrl,
-      JSON.stringify({
+      JSON.stringify(params),
-        getFeatureMode: 'SQL',
-        datasetNames: [datasourceName],
-        maxFeatures: 100000000,
-        queryParameter: {
-          attributeFilter: filter
-        }
-      }),
       {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
@@ -283,6 +289,7 @@ export function useLayer() {
     if (!layerType || !(action = layerActions[layerType as string])) return;
     let layer: any = await action(layerData);
     if (isNeedCluster === '1' && layerData.nameCn === "水库点") {
+      let baseUrl = import.meta.env.VITE_BASE_URL;
       const data = await getFeatures(layerData);
       if (data?.features?.[0]?.geometry?.type === 'Point') {
         let layerConfig = {};
@@ -298,7 +305,7 @@ export function useLayer() {
                 { name: "4.0", attr: "image", value: "reservoir_small.png" },
                 { name: "5.0", attr: "image", value: "reservoir_small.png" },
               ],
-              image: "reservoir_small.png",
+              image: "map-title-o.png",
             };
             break;
         }
@@ -306,7 +313,7 @@ export function useLayer() {
           data,
           symbol: {
             type: "billboardP",
-            imageProxy: "/src/assets/map/", // 图片代理
+            imageProxy: `${baseUrl}/img/map/`, // 图片代理
             style: {
               clampToGround: false,
               image: "reservoir_small.png",
@@ -359,10 +366,21 @@ export function useLayer() {
     const { layerType } = data;
     zoomToLayerActions[layerType as string]?.(data);
   };
+  const viewerClick = throttle((e) => {
+    console.log(e);
+  }, 500);
+  const addViewerMouseClick = () => {
+    window.viewer?.on(SyCim.MouseEventType.MOUSE_MOVE, viewerClick);
+  };
+  const removeViewerMouseClick = () => {
+    window.viewer?.off(SyCim.MouseEventType.MOUSE_MOVE, viewerClick);
+  };
   return {
     addLayer,
     removeLayer,
-    zoomToLayer
+    zoomToLayer,
+    addViewerMouseClick,
+    removeViewerMouseClick
   };
 }
 

src/store/modules/project.ts

@@ -71,6 +71,21 @@ function filterTreeData(data: any[]) {
       .filter(Boolean)
   );
 }
+function getLayerByName(data: any[], name: string) {
+  let layer = null;
+  const fn = (data: any[], name: string) => {
+    for (const item of data) {
+      if (item.nameCn === name) {
+        layer = item;
+        return;
+      } else if (item.children && item.children.length >= 0) {
+        fn(item.children, name);
+      }
+    }
+  };
+  fn(data, name);
+  return layer;
+}
 const { addLayer, removeLayer } = useLayer();
 
 export const useProjectStore = defineStore("project", {
@@ -185,6 +200,9 @@ export const useProjectStore = defineStore("project", {
         this.selectedLayers = _nodeTemp.filter((key) => !nodes.includes(key));
       }
     },
+    getLayerByName(name: string) {
+      return getLayerByName(this.layerData, name);
+    },
     async fetchFirstScene() {
       const rData = await getFirstScene();
       if (rData.code === 200) {

src/views/BottomPanel/index.vue

@@ -1,15 +1,48 @@
 <template>
   <div class="bottom-panel">
-    <div class="tool-item active">水库</div>
+    <!-- <div class="tool-item active">水库</div>
     <div class="tool-item">水闸</div>
-    <div class="tool-item">堤防</div>
+    <div class="tool-item">堤防</div> -->
+    <div
+      v-for="(item, index) in layerData"
+      :class="['tool-item', { active: selectedKeys.includes(item.id) }]"
+      @click="handleChangeLayer(item)"
+    >
+      {{ item.nameCn }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from "vue";
+import { useProjectStore } from "@/store/modules/project";
+const projectStore = useProjectStore();
+
 defineOptions({
   name: "bottom-panel",
 });
+const activeLayers = ref([]);
+const listName = ref(["水库点", "堤防", "水闸"]);
+const layerData: any = computed(() => {
+  const list = [];
+  listName.value.forEach((item, index) => {
+    const layer = projectStore.getLayerByName(item);
+    if (layer) {
+      list.push(layer);
+    }
+  });
+  return list;
+});
+const selectedKeys = computed(() => projectStore.selectedLayerKeys);
+function handleChangeLayer(item: any) {
+  if (activeLayers.value.includes(item.id)) {
+    activeLayers.value = activeLayers.value.filter((id: any) => id !== item.id);
+    projectStore.setLayerVisibility(item.id, false);
+  } else {
+    activeLayers.value.push(item.id);
+    projectStore.setLayerVisibility(item.id, true);
+  }
+}
 </script>
 
 <style scoped lang="less">

src/views/Main/Map/components/LayerTree.vue

@@ -37,13 +37,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, nextTick } from "vue";
+import { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from "vue";
 import SyDialog from "@/components/Dialog/index.vue";
 import { useProjectStore } from "@/store/modules/project";
 import { useLayer } from "@/hooks/web/useProject";
 import { flattenTree } from "@/utils/index";
 import Tree from "@/components/Tree/index.vue";
-const { zoomToLayer } = useLayer();
+const { zoomToLayer, addViewerMouseClick, removeViewerMouseClick } = useLayer();
 
 const projectStore = useProjectStore();
 defineOptions({
@@ -116,4 +116,12 @@ watch(
     }
   },
 );
+
+onMounted(() => {
+  addViewerMouseClick();
+});
+
+onBeforeUnmount(() => {
+  removeViewerMouseClick();
+});
 </script>