xx

src/hooks/mapTool/useLayerModify.ts

@@ -0,0 +1,36 @@
+// 引入图层维护所需增删改查的接口api
+// 此hook主要用于矢量图层的增删改查
+interface PositionType {
+    lng: string,
+    lat: string,
+    z: string
+}
+/**
+ * @description: 矢量数据维护
+ * @param map 地图对象
+ * @param dataSet 数据集名称
+ */
+export const useLayerModify = (map: any = window.map, dataSet: String) => {
+
+    const addPoint = (position: PositionType) => {
+        console.log('addPoint')
+        console.log(position)
+        console.log(dataSet)
+    }
+
+    const deleteLayer = () => {
+        console.log('deleteLayer')
+        console.log(dataSet)
+    }
+
+    const queryLayer = () => {
+        console.log('queryLayer')
+        console.log(dataSet)
+    }
+
+    return {
+        addPoint,
+        deleteLayer,
+        queryLayer,
+    }
+}

src/store/modules/mapTools.ts

@@ -9,11 +9,20 @@
 import { defineStore } from 'pinia';
 import { store } from '/@/store';
 
+/**
+ * @description: 图层维护功能类型
+ */
+type layerFunctionType = '' | 'select' | 'edit' | 'del' | 'addPoint' | 'addLine' | 'addPolygon';
+
 interface MapToolsType {
     leftPannel: String,
     rightPannel: String,
     topPannel: String,
-    bottomPannel: String
+    bottomPannel: String,
+    //图层维护工具
+    layerToolsShow: Boolean,
+    currentLayerDataSet: String,
+    layerFunction: layerFunctionType
 }
 export const useMapToolsStore = defineStore({
     id: 'map-tools',
@@ -22,19 +31,31 @@ export const useMapToolsStore = defineStore({
         rightPannel: '0px',
         topPannel: '0px',
         bottomPannel: '0px',
+        layerToolsShow: false,
+        currentLayerDataSet: '',
+        layerFunction: ''
     }),
     getters: {
-        getLeftPannel():String {
+        getLeftPannel(): String {
             return this.leftPannel;
         },
-        getRightPannel():String {
+        getRightPannel(): String {
             return this.rightPannel;
         },
-        getTopPannel():String {
+        getTopPannel(): String {
             return this.topPannel;
         },
-        getBottomPannel():String {
+        getBottomPannel(): String {
             return this.bottomPannel;
+        },
+        getLayerToolsShow(): Boolean {
+            return this.layerToolsShow;
+        },
+        getCurrentLayerDataSet(): String {
+            return this.currentLayerDataSet;
+        },
+        getLayerFunction(): layerFunctionType {
+            return this.layerFunction;
         }
     },
     actions: {
@@ -55,6 +76,15 @@ export const useMapToolsStore = defineStore({
         },
         setBottomPannel(bottomPannel: String) {
             this.bottomPannel = bottomPannel;
+        },
+        setLayerToolsShow(layerToolsShow: Boolean) {
+            this.layerToolsShow = layerToolsShow;
+        },
+        setCurrentLayerDataSet(currentLayerDataSet: String) {
+            this.currentLayerDataSet = currentLayerDataSet;
+        },
+        setLayerFunction(layerFunction: layerFunctionType) {
+            this.layerFunction = layerFunction;
         }
     },
 });

src/views/components/LayersTools/components/LayerModify.vue

@@ -0,0 +1,148 @@
+<!-- 此组件只对矢量数据维护工具的状态进行逻辑判断与维护 -->
+<!-- 具体监听事件仍在主页面/views/index.vue中进行 -->
+<template>
+    <div class="layer-modify-tool">
+        <div class="label">工具栏：</div>
+        <div class="tools-box">
+            <div v-for="tool in tools" :key="tool.id" class="tool-item" :title="tool.title">
+                <img :src="tool.active ? tool.activeIcon : tool.icon" :style="tool.style" alt=""
+                    @click="handleToolClick(tool)">
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
+
+import selectIcon from '/@/assets/images/mapTools/select.png';
+import delIcon from '/@/assets/images/mapTools/del.png';
+import addPointIcon from '/@/assets/images/mapTools/add-point.png';
+import selectActiveIcon from '/@/assets/images/mapTools/select-a.png';
+import delActiveIcon from '/@/assets/images/mapTools/del-a.png';
+import addPointActiveIcon from '/@/assets/images/mapTools/add-point-a.png';
+
+import { useMapToolsStore } from '/@/store/modules/mapTools';
+const mapToolsStore = useMapToolsStore();
+// 数据集名称
+const dataSet = ref(mapToolsStore.getCurrentLayerDataSet);
+
+// 监听数据集变化
+watch(
+    () => mapToolsStore.getCurrentLayerDataSet,
+    (newVal, oldVal) => {
+        dataSet.value = newVal;
+    }
+)
+
+onBeforeUnmount(() => {
+    // 重置工具状态
+    resetToolStatus()
+})
+
+// 工具列表
+const tools = ref([
+    {
+        title: "选择",
+        id: "select",
+        icon: selectIcon,
+        activeIcon: selectActiveIcon,
+        active: false,
+        disabled: false,
+        style: {
+            width: '15px',
+            height: '16px',
+        }
+    },
+    {
+        title: "删除",
+        id: "del",
+        icon: delIcon,
+        activeIcon: delActiveIcon,
+        active: false,
+        disabled: false,
+        style: {
+            width: '16px',
+            height: '16px',
+        }
+    },
+    {
+        title: "新增点",
+        id: "addPoint",
+        icon: addPointIcon,
+        activeIcon: addPointActiveIcon,
+        active: false,
+        disabled: false,
+        style: {
+            width: '16.5px',
+            height: '14px',
+        }
+    }
+])
+// 配置默认选中状态
+tools.value.forEach(tool => {
+    if (tool.id === mapToolsStore.getLayerFunction) {
+        tool.active = true;
+    }
+})
+// 重置状态
+const resetToolStatus = () => {
+    tools.value.forEach(tool => {
+        tool.active = false;
+    })
+    mapToolsStore.setLayerFunction('')
+}
+// 点击工具事件
+const handleToolClick = (tool) => {
+    if (tool.disabled) {
+        return;
+    }
+    // 重置其他工具状态
+    tools.value.forEach(t => {
+        if (t.id !== tool.id) {
+            t.active = false;
+        }
+    })
+    // 设置当前工具状态
+    tool.active = true;
+    // 设置当前工具功能
+    mapToolsStore.setLayerFunction(tool.id)
+}
+</script>
+
+<style lang="less" scoped>
+.layer-modify-tool {
+    height: 34px;
+    // width: auto;
+    padding: 10px 0 10px 10px;
+    border-radius: 178px;
+    background: rgba(8, 66, 118, 0.7);
+    display: flex;
+    align-items: center;
+
+    .label {
+        font-family: 思源黑体;
+        font-size: 14px;
+        color: #fff;
+    }
+
+    .tools-box {
+        display: flex;
+        align-items: center;
+
+        .tool-item {
+            padding: 0 15px;
+            box-sizing: border-box;
+            border-right: 1px solid #fff;
+
+            &:last-child{
+                border-right: none;
+            }
+
+            img {
+                cursor: pointer;
+            }
+        }
+    }
+}
+</style>

src/views/components/LayersTools/index.vue

@@ -8,34 +8,36 @@
 -->
 <template>
   <div class="query-edit-tool-box">
-    <template v-for="(tool, index) in tools" :key="index">
-      <component class="tools-box" :title="tool.name" :is="tool.id" />
+    <template v-for="(tool, index) in tools.filter(item => item.show)" :key="index">
+      <component class="tools-box" :title="tool.name" :is="components[tool.id]" />
     </template>
   </div>
 </template>
 
-<script>
-import { defineComponent, ref } from "vue";
+<script setup>
+import { ref, watch } from "vue";
 import EditVector from "./components/EditVector.vue";
 import QuerySpace from "./components/QuerySpace.vue";
+import LayerModify from "./components/LayerModify.vue";
+import {useMapToolsStore} from '/@/store/modules/mapTools';
+const mapToolsStore = useMapToolsStore();
+const components = {
+  EditVector,
+  QuerySpace,
+  LayerModify,
+}
+const tools = ref([
+  { name: "空间查询", id: "QuerySpace", show: false },
+  { name: "矢量数据维护", id: "EditVector", show: false },
+  { name: "矢量数据维护", id: "LayerModify", show: mapToolsStore.getLayerToolsShow },
+]);
 
-export default defineComponent({
-  components: {
-    EditVector,
-    QuerySpace,
-  },
-  setup() {
-    const tools = ref([
-      { name: "空间查询", id: "QuerySpace", active: false },
-      { name: "矢量数据维护", id: "EditVector", active: false },
-    ]);
-
-    return {
-      tools,
-    };
-  },
+watch(() => mapToolsStore.getLayerToolsShow, (newVal) => {
+  tools.value[2].show = newVal;
 });
+
 </script>
+
 <style lang="less" scoped>
 .query-edit-tool-box {
   position: absolute;
@@ -43,6 +45,7 @@ export default defineComponent({
   top: 72px;
   width: auto;
   height: 34px;
+
   .tools-box {
     float: left;
     margin: 0 8px;

src/views/components/ToolBox/components/Analyse.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="map-analyse">
+    <div class="map-analyse" @click="handleClick">
         <a-tooltip placement="left" :trigger="trigger" overlayClassName="map-analyse-tip">
             <template #title>
                 <div class="map-analyse-tip-content">
@@ -56,6 +56,8 @@
 
 <script>
 import { defineComponent, ref, watch, onBeforeUnmount, getCurrentInstance, shallowRef, nextTick, onMounted } from "vue";
+import {useMapToolsStore} from '/@/store/modules/mapTools';
+const mapToolsStore = useMapToolsStore();
 const props = {
 }
 export default defineComponent({
@@ -277,6 +279,12 @@ export default defineComponent({
         onBeforeUnmount(() => {
             clear()
         })
+        const flag = ref(false)
+        const handleClick = ()=>{
+            mapToolsStore.setLayerToolsShow(!flag.value)
+            flag.value = !flag.value
+            mapToolsStore.setCurrentLayerDataSet('dataSet')
+        }
         return {
             trigger,
             analyseList,
@@ -289,7 +297,8 @@ export default defineComponent({
             handleAnalyse,
             modelOpts,
             selectValue,
-            dropdownVisibleChange
+            dropdownVisibleChange,
+            handleClick
         };
     },
 });

src/views/index.vue

@@ -87,6 +87,7 @@ export default defineComponent({
       console.log('地图加载完成');
       // 地图加载完成后，注册地图点击事件
       window.map.event.click(async (e) => {
+        console.log(mapToolsStore.getLayerFunction)
         console.log(e);
         if (e.graphic?.primitive.myId && e.graphic?.primitive.myId === 'bim') {
           // console.log('点击了模型', e.graphic?.primitive.id)