feat:添加图层管理组件及geojson数据渲染

src/views/components/layerList/index.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="layer-list-panel">
+    <div class="layer-list-panel-title">
+      <div class="title">
+        <img src="@/assets/image/common/layerIcon.png" alt="" />
+        <span style="margin-left: 0.08rem">资源列表</span>
+      </div>
+      <div @click="onExpandChange" style="cursor: pointer">
+        <img v-show="isExpanded" src="@/assets/image/common/arrow-up.png" style="width: 14px; height: 12px" />
+        <img v-show="!isExpanded" src="@/assets/image/common/arrow-up.png" style="transform: rotate(180deg); width: 14px; height: 12px" />
+      </div>
+    </div>
+
+    <div class="layer-list-panel-content" v-show="isExpanded">
+      <el-tree ref="tree" :data="treeData" show-checkbox node-key="id" :props="defaultProps" @check-change="onCheckChange" :default-expanded-keys="['1']">
+        <template #default="{ node, data }">
+          <span class="custom-tree-node">
+            <span>{{ node.label }}</span>
+            <i v-if="data.loading" class="el-icon-loading" style="margin-left: 4px; color: #409eff"></i>
+            <i v-if="data.error" class="el-icon-warning" style="margin-left: 4px; color: #f56c6c" :title="data.error"></i>
+          </span>
+        </template>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as mars3d from 'mars3d'
+let layerCache = {}
+export default {
+  name: 'LayerListView',
+  data() {
+    return {
+      isExpanded: true,
+      defaultProps: { children: 'children', label: 'label' },
+      treeData: [
+        {
+          id: '1',
+          label: '综合信息',
+          children: [
+            {
+              id: '1-1',
+              label: '生态区',
+              children: [
+                { id: '1-1-1', label: '提防背河坡脚线', meta: { type: 'polyline', url: '/geojson/difangbeihe.geojson' } },
+                { id: '1-1-2', label: '河道管理范围线', meta: { type: 'polyline', url: '/geojson/hedaoguanli.geojson' } },
+                { id: '1-1-3', label: '一二级管控区界限', meta: { type: 'polyline', url: '/geojson/yijiguanxian.geojson' } },
+                { id: '1-1-4', label: '生态区界限', meta: { type: 'polyline', url: '/geojson/shengtaiqu.geojson' } },
+                { id: '1-1-5', label: '城市核心区', meta: { type: 'polyline', url: '/geojson/chengshihx.geojson' } },
+                { id: '1-1-6', label: '农村区段', meta: { type: 'polyline', url: '/geojson/nongcunqd.geojson' } },
+                { id: '1-1-7', label: '规划区', meta: { type: 'polyline', url: '/geojson/guihuaqu.geojson' } },
+                { id: '1-1-8', label: '城市核心区（右岸）', meta: { type: 'polyline', url: '/geojson/chengshihx_r.geojson' } },
+                { id: '1-1-9', label: '农村区段（右岸）', meta: { type: 'polyline', url: '/geojson/nongcunqd_r.geojson' } }
+              ]
+            },
+            { id: '1-2', label: '监测设备' },
+            { id: '1-3', label: '入河排水（污）口' },
+            { id: '1-4', label: '河道管理站' }
+          ]
+        },
+        {
+          id: '2',
+          label: '水文监测',
+          children: [
+            { id: '2-1', label: '水文监测点1', meta: { type: 'point', url: '/geojson/sw1.geojson' } },
+            { id: '2-2', label: '水文监测点2', meta: { type: 'point', url: '/geojson/sw2.geojson' } }
+          ]
+        },
+        {
+          id: '3',
+          label: '采砂区',
+          children: [
+            { id: '3-1', label: '兴平市宜空采砂区', meta: { type: 'polygon', url: '/geojson/yikong.geojson' } },
+            { id: '3-2', label: '兴平市团结采砂区', meta: { type: 'polygon', url: '/geojson/tuanjie.geojson' } },
+            { id: '3-3', label: '兴平市汤坊龙兴1区采砂区', meta: { type: 'polygon', url: '/geojson/longxing.geojson' } }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    onExpandChange() {
+      this.isExpanded = !this.isExpanded
+    },
+
+    async onCheckChange(node, checked) {
+      const id = node.id
+      if (!node.meta?.url) {
+        return
+      }
+      if (checked) {
+        // 已缓存直接显示
+        if (layerCache[id]) {
+          layerCache[id].show = true
+          return
+        }
+        // 开始加载
+        this.$set(node, 'loading', true)
+        this.$set(node, 'error', '')
+        try {
+          const layer = new mars3d.layer.GeoJsonLayer({
+            name: node.label,
+            url: node.meta.url,
+            crs: 'EPSG:4326',
+            clampToGround: true,
+            symbol: this.getStyleByName(node.label)
+          })
+          window.map.addLayer(layer)
+          layerCache[id] = layer
+          // 父子关联：勾选子节点时，父节点作为 groupId
+          const parent = this.$refs.tree.getNode(id).parent
+          if (parent && parent.data.id) {
+            layer.options.parentId = parent.data.id
+          }
+        } catch (e) {
+          this.$set(node, 'error', e.message || '加载失败')
+        } finally {
+          this.$set(node, 'loading', false)
+        }
+      } else {
+        // 取消勾选 -> 销毁
+        if (layerCache[id]) {
+          window.map.removeLayer(layerCache[id])
+          delete layerCache[id]
+        }
+      }
+    },
+    getStyleByName(name) {
+      if (name === '生态区界限') {
+        return { type: 'polyline', styleOptions: { color: '#0c5b0f', width: 4 } }
+      } else if (name === '河道管理范围线') {
+        return {
+          type: 'polyline',
+          styleOptions: { width: 4, materialType: mars3d.MaterialType.PolylineDash, materialOptions: { color: '#0c5b0f', dashLength: 40 } }
+        }
+      } else if (name === '一二级管控区界限') {
+        return { type: 'polyline', styleOptions: { color: '#db7f06', width: 4 } }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.layer-list-panel {
+  position: absolute;
+  top: px-to-rem(100);
+  left: px-to-rem(480);
+  width: px-to-rem(240);
+  padding: px-to-rem(10);
+  background: #1b2535;
+  border-radius: 6px;
+  opacity: 0.85;
+  z-index: 1000;
+  .layer-list-panel-title {
+    margin-bottom: px-to-rem(10);
+    height: px-to-rem(30);
+    line-height: px-to-rem(30);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: px-to-rem(18);
+      color: #eaf3fe;
+    }
+  }
+  .layer-list-panel-content {
+    margin: px-to-rem(-10);
+    padding: px-to-rem(10);
+    max-height: px-to-rem(340);
+    overflow: auto;
+    :deep(.el-tree) {
+      background: transparent;
+      color: #fff;
+      .el-tree-node__content {
+        height: unset;
+      }
+      .el-tree-node__content:hover,
+      .el-upload-list__item:hover,
+      .el-tree-node:focus > .el-tree-node__content {
+        background-color: transparent;
+        height: unset;
+      }
+      .el-tree-node__label {
+        white-space: wrap;
+      }
+    }
+  }
+}
+</style>

src/views/index.vue

@@ -7,6 +7,7 @@
       <el-main>
         <div class="home-view">
           <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
+          <LayerListPanel></LayerListPanel>
           <SandMonitorLeft v-if="mainMenu === '采砂监控'"></SandMonitorLeft>
           <SandMonitorRight v-if="mainMenu === '采砂监控'"></SandMonitorRight>
         </div>
@@ -19,12 +20,13 @@
 import menuPanel from '@/views/components/menu'
 import { mapState } from 'vuex'
 import MainMap from '@/views/components/map'
+import LayerListPanel from '@/views/components/layerList'
 import SandMonitorLeft from './sand-monitor/left.vue'
 import SandMonitorRight from './sand-monitor/right.vue'
 const basePathUrl = window.basePathUrl || ''
 export default {
   name: 'MainView',
-  components: { MainMap, menuPanel, SandMonitorLeft, SandMonitorRight },
+  components: { MainMap, LayerListPanel, menuPanel, SandMonitorLeft, SandMonitorRight },
   computed: {
     ...mapState({
       mainMenu: (state) => state.home.mainMenu
@@ -35,7 +37,7 @@ export default {
       mapName: 'cMap',
       configUrl: basePathUrl + 'config/config.json',
       mapOptions: {
-        scene: { center: { lat: 32.507731, lng: 111.498888, alt: 1405.2, heading: 350.3, pitch: -11.6 } },
+        scene: { center: { lat: 34.227875, lng: 108.364403, alt: 35586.8, heading: 359.7, pitch: -88.6 } },
         basemaps: [
           //   {
           //     name: "天地图电子",
@@ -68,30 +70,32 @@ export default {
     async onMapload(map) {
       window.map = map
       map.hasTerrain = true
-    }
+      this.addWaterSurface(map)
+    },
     // 添加水面
-    // addWaterSurface(map) {
-    //   const geoJsonLayer = new this.mars3d.layer.GeoJsonLayer({
-    //     name: "dataWaterCS",
-    //     url: "./Zhengchang_river.json",
-    //     symbol: {
-    //       type: "water",
-    //       styleOptions: {
-    //         normalMap: "//data.mars3d.cn/img/textures/waterNormals.jpg",
-    //         addHeight: 120,
-    //         frequency: 8000.0, // 控制波数的数字。
-    //         animationSpeed: 0.02, // 控制水的动画速度的数字。
-    //         amplitude: 5.0, // 控制水波振幅的数字。
-    //         specularIntensity: 0.8, // 控制镜面反射强度的数字。
-    //         baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
-    //         blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
-    //         opacity: 0.7, // 透明度
-    //         clampToGround: true, // 是否贴地
-    //       },
-    //     },
-    //   });
-    //   map.addLayer(geoJsonLayer);
-    // },
+    addWaterSurface(map) {
+      const geoJsonLayer = new this.mars3d.layer.GeoJsonLayer({
+        name: '渭河',
+        url: './geojson/weihe.geojson',
+        crs: 'EPSG:4326',
+        symbol: {
+          type: 'water',
+          styleOptions: {
+            normalMap: '//data.mars3d.cn/img/textures/waterNormals.jpg',
+            addHeight: 120,
+            frequency: 8000.0, // 控制波数的数字。
+            animationSpeed: 0.04, // 控制水的动画速度的数字。
+            amplitude: 5.0, // 控制水波振幅的数字。
+            specularIntensity: 0.8, // 控制镜面反射强度的数字。
+            baseWaterColor: '#006ab4', // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
+            blendColor: '#006ab4', // 从水中混合到非水域时使用的rgba颜色对象。
+            opacity: 0.7, // 透明度
+            clampToGround: true // 是否贴地
+          }
+        }
+      })
+      map.addLayer(geoJsonLayer)
+    }
   }
 }
 </script>

src/views/sand-monitor/left.vue

@@ -137,6 +137,7 @@ export default {
     background: transparent;
     color: #4487d8;
     border-color: #4487d8;
+    font-size: px-to-rem(14);
   }
   :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
     background-color: #409eff;