地图标注管理-多层文件夹

Web/src/components/GMap.vue

@@ -995,8 +995,6 @@ export default defineComponent({
     function setLayers(resource: PostElementsBody) {
       const layers = store.state.Layers
       const layer: any = layers.find((item: any) => item.id.includes(shareId.value))
-      // layer.id = 'private_layer' + uuidv4()
-      // layer?.elements.push(resource)
       if (layer?.elements) {
         (layer?.elements as any[]).push(resource)
       }
@@ -1009,7 +1007,6 @@ export default defineComponent({
       store.commit('SET_LIVESTREAM_AGORA_VISIBLE', false)
     }
     function updateCoordinates(transformType: string, element: any) {
-      const geoType = element.resource?.content.geometry.type
       const type = element.resource?.type as number
       if (element.resource) {
         if (MapElementEnum.PIN === type) {

Web/src/components/LayersTree.vue

@@ -3,7 +3,7 @@
     <a-empty :image="noData" :image-style="{ height: '60px' }" />
   </div>
   <div v-else>
-    <a-tree class="device-map-layers" @drop="onDrop" v-bind="$attrs" v-if="getTreeData.length">
+    <a-tree class="device-map-layers" v-bind="$attrs" v-if="getTreeData.length">
       <a-tree-node :id="layer.id" v-for="layer in getTreeData" :key="layer.id" :disabled="true">
         <template #title>
           <div style="display: flex;align-items: center;">
@@ -14,10 +14,11 @@
           </div>
         </template>
         <template v-if="layer.elements">
-          <a-tree-node v-for="resource in layer.elements" :id="getLayerTreeKey('resource', resource.id)"
-            :parent="{ id: layer.id, type: layer.type }" :key="getLayerTreeKey('resource', resource.id)">
+          <a-tree-node v-for="resource in layer.elements" :type="resource.resource ? 'DEFAULT' : 'PHOTO'"
+            :id="getLayerTreeKey('resource', resource.id)" :key="getLayerTreeKey('resource', resource.id)"
+            :disabled="!resource.resource">
             <template #title>
-              <div style="display: flex;align-items: center;">
+              <div style="display: flex;align-items: center;" v-if="resource.resource">
                 <Icon v-if="resource.resource.type === 0">
                   <template #component>
                     <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
@@ -33,6 +34,20 @@
                   {{ resource.name }}
                 </div>
               </div>
+              <div style="display: flex;align-items: center;" v-else>
+                <FolderOutlined />
+                <div style="margin-left: 10px;">
+                  {{ resource.name }}
+                </div>
+              </div>
+            </template>
+            <template v-if="layer.elements">
+              <a-tree-node v-for="item in resource.elements" :type="'PHOTO'" :id="getLayerTreeKey('resource', item.id)"
+                :key="getLayerTreeKey('resource', item.id)">
+                <template #title>
+                  {{ item.name }}
+                </template>
+              </a-tree-node>
             </template>
           </a-tree-node>
         </template>
@@ -46,12 +61,9 @@ import { computed, defineProps, PropType } from 'vue'
 import Icon from '@ant-design/icons-vue';
 import { FolderOutlined, LineOutlined, GatewayOutlined } from '@ant-design/icons-vue';
 import noData from '/@/assets/icons/no-data.png'
-import { useMyStore } from '/@/store'
-import { DropEvent, mapLayer } from '/@/types/mapLayer'
+import { mapLayer } from '/@/types/mapLayer'
 import { getLayerTreeKey } from '/@/utils/layer-tree'
 
-const store = useMyStore()
-
 const props = defineProps({
   layerData: Array as PropType<mapLayer[]>
 })
@@ -59,53 +71,6 @@ const props = defineProps({
 const getTreeData = computed(() => {
   return JSON.parse(JSON.stringify(props.layerData))
 })
-
-const shareId = computed(() => {
-  return store.state.layerBaseInfo.share
-})
-
-const defaultId = computed(() => {
-  return store.state.layerBaseInfo.default
-})
-
-async function onDrop({ node, dragNode, dropPosition, dropToGap }: DropEvent) {
-  let _treeData = props.layerData || []
-  let dragKey = dragNode.eventKey
-  dragKey = dragKey.replaceAll('resource__', '')
-  const dropPos = node.pos.split('-')
-  let dropKey =
-    node.eventKey.includes(shareId.value) ||
-      node.eventKey.includes(defaultId.value)
-      ? node.eventKey
-      : node.$parent.eventKey
-  if (!dragKey || !dropKey) return
-  dropKey = dropKey.replaceAll('resource__', '')
-  const loop = (data: mapLayer[], key: string, callback: Function) => {
-    data.forEach((item, index, arr) => {
-      if (item.id === key) {
-        return callback(item, index, arr)
-      }
-      if (item.elements) {
-        return loop(item.elements, key, callback)
-      }
-    })
-  }
-  const data = [..._treeData] as mapLayer[]
-  let dragObj = {} as mapLayer
-  loop(data, dragKey, (item: mapLayer, index: number, arr: mapLayer[]) => {
-    arr.splice(index, 1)
-    dragObj = item
-  })
-  if (!dropToGap) {
-    // Drop on the content
-    loop(data, dropKey, (item: mapLayer) => {
-      item.elements = item.elements || []
-      // where to insert 示例添加到尾部，可以是随意位置
-      item.elements.push(dragObj)
-    })
-  }
-  _treeData = data
-}
 </script>
 
 <style lang="scss">

Web/src/pages/page-web/projects/layer/index.vue

@@ -10,9 +10,8 @@
       <div class="drawer-element-content">
         <div class="name element-item">
           <span class="mr30">名称:</span>
-          {{ layerState.layerName }}
-          <!-- <a-input v-model:value="layerState.layerName" style="width:110px" placeholder="element name"
-            @change="changeLayer" /> -->
+          <a-input v-model:value="layerState.layerName" style="width:110px" placeholder="element name"
+            @change="changeLayer" />
         </div>
         <div class="longitude element-item" v-if="layerState.currentType === geoType.Point">
           <span class="mr30">经度:</span>
@@ -108,17 +107,26 @@ watch(() => props.mapClickElement, (newValue, oldValue) => {
       visible.value = true;
       state.photoDrawerVisible = false
     } else if (newValue.type === 'PHOTO') {
+      const expandedKeyList: string[] = [];
       // 图片标注列表
       const photoList: any = mapLayers.value.filter((item: any) => item.type === 3);
       if (photoList.length === 0) {
         return;
       }
-      const pid = photoList[0].id;
-      expandedKeys.value = [pid];
-      selectedKeys.value = [`resource__${newValue.id}`];
-      selectedLayer.value = getCurrentLayer(`resource__${newValue.id}`)
-      state.photoDrawerVisible = true
-      visible.value = false;
+      const list = photoList[0];
+      expandedKeyList.push(list.id);
+      list.elements.forEach((item: any) => {
+        item.elements.forEach((element: any) => {
+          if (element.id === newValue.id) {
+            expandedKeyList.push(element.pid)
+            expandedKeys.value = expandedKeyList;
+            selectedKeys.value = [`resource__${newValue.id}`];
+            selectedLayer.value = getCurrentLayer(`resource__${newValue.id}`)
+            state.photoDrawerVisible = true
+            visible.value = false;
+          }
+        });
+      })
     }
   }
 }, { deep: true });
@@ -178,18 +186,19 @@ watch(() => store.state.Layers, newData => {
 }, { deep: true })
 
 function setMapCoverByElement(elements: LayerResource[]) {
-  elements.forEach(element => {
-    const name = element.name
-    const content: any = element.resource?.content;
-    const color = content.properties.color;
-    const pictureInfo = content.picture;
-    if (pictureInfo) {
-      const list: any = element.resource?.content.geometry.coordinates;
-      const coordinates = list.slice(0, 2);
-      // 绘制图片标注文件夹
-      useGMapCoverHook.updatePhotoElement(pictureInfo.file_id, name, pictureInfo.thumbnail_url, coordinates);
-    } else {
-      // 绘制默认文件夹
+  elements.forEach((element: any) => {
+    if (element.elements && element.elements.length) {// 图片标注
+      element.elements.forEach((item: any) => {
+        const name = item.name;
+        const content: any = item.resource?.content;
+        const pictureInfo = content.picture;
+        const coordinates: any = content.geometry.coordinates;
+        useGMapCoverHook.updatePhotoElement(pictureInfo.file_id, name, pictureInfo.thumbnail_url, coordinates);
+      })
+    } else {// 默认文件夹
+      const name = element.name;
+      const content: any = element.resource?.content;
+      const color = content.properties.color;
       updateMapElement(element, name, color);
     }
   })
@@ -225,12 +234,12 @@ function selectLayer(keys: string[], e) {
     selectedKey.value = e.node.eventKey
     selectedLayer.value = getCurrentLayer(selectedKey.value)
     const info = e.selectedNodes[0];
-    const { type } = info.props.parent;
-    if (type === 2) {// 默认文件夹
+    const type = info.props.type;
+    if (type === 'DEFAULT') {// 默认文件夹
       setBaseInfo()
-      visible.value = true
-    } else if (type === 3) {// 图片标注
-      state.photoDrawerVisible = true
+      visible.value = true;
+    } else if (type === 'PHOTO') {// 图片标注
+      state.photoDrawerVisible = true;
     }
   }
 }
@@ -250,7 +259,6 @@ function getCurrentLayer(id: string) {
     })
   }
   findCan(Layers)
-  // const layer = Layers.find(item => item.elements.find(el => el.id === key))
   return layer
 }
 function setBaseInfo() {
@@ -327,16 +335,36 @@ async function getElementGroups(type?: string) {
     isDistributed: true
   })
   mapLayers.value = result.data.map((item: any) => {
-    return {
-      ...item,
-      elements: item.elements.map((o: any) => {
+    const data = { ...item };
+    if (item.elements) {// 默认文件夹
+      data.elements = item.elements.map((o: any) => {
         return {
           ...o,
-          id: item.type === 3 ? o.resource.content.picture.file_id : o.id,// 图片标注类型时，id更改为fileId
+          id: o.id,
           height: o.resource.content.geometry.coordinates[2]
         }
       })
+    } else {// 图片标注
+      data.elements = item.child_groups.map((o: any) => {
+        return {
+          ...o,
+          elements: o.elements.map((val: any) => {
+            const values = { ...val };
+            const coordinates = values.resource?.content.geometry.coordinates as GeojsonCoordinate;
+            const transResult = wgs84togcj02(
+              coordinates[0],
+              coordinates[1]
+            ) as GeojsonCoordinate
+            values.id = val.resource.content.picture.file_id;
+            values.pid = 'resource__' + o.id;
+            values.resource.content.geometry.coordinates = transResult;
+            return values;
+          })
+        }
+      });
+      delete data.child_groups;
     }
+    return data;
   })
   mapLayers.value = updateWgs84togcj02()
   if (type && type === 'init') {