辖区要素

src/router/index.ts

@@ -23,6 +23,10 @@ const routes = [
         path: '/ship-playback',
         component: () => import('@/views/ship-playback/index.vue'),
     },
+    {
+        path: '/element',
+        component: () => import('@/views/element/index.vue'),
+    },
 ]
 
 const router = createRouter({

src/views/element/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="main">
+    <div class="tree">
+      <div class="buttons">
+        <el-button type="primary" @click="setSourceData">上图</el-button>
+      </div>
+      <el-tree-v2
+        :data="treeData"
+        :props="{
+          value: 'mapId',
+          label: 'mapLabel',
+          children: 'children'
+        }"
+        :height="800"
+      />
+    </div>
+    <div class="map">
+      <EasyMapGLComponent
+        @easyMapGLLoad="mapGLLoad"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+import xqysJson from './xqys.json'
+import * as format from "ol/format";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      map: <any>null,
+      mapFunc: <any>null,
+      treeData: <any>[],
+      sourceElement: 'source_element'
+    })
+    const mapGLLoad = (map, func) => {
+      state.map = map
+      state.mapFunc = func
+      initMap()
+      initTree()
+    }
+    const initTree = () => {
+      state.treeData = []
+      const formatData = (key, pName, idKey = 'id', labelKey = 'name') => {
+        const obj = {
+          mapId: key,
+          mapLabel: pName,
+          children: []
+        }
+        xqysJson.data[key].forEach(v => {
+          v.mapId = key + '_' + v.id
+          v.mapLabel = v.name
+          obj.children.push(v)
+        })
+        state.treeData.push(obj)
+      }
+      formatData('axAreaList', '岸线-预警区')
+      formatData('axBayonetList', '岸线-卡口')
+      formatData('axCoastlineList', '岸线-海岸线')
+      formatData('axSiteList', '岸线-行业场所')
+      formatData('deptInfo', '部门详情', 'deptId', 'deptName')
+      formatData('districtList', '警务区')
+      formatData('governmentalList', '政府机构')
+      formatData('islandList', '岛屿')
+      formatData('monitoringList', '视频监控')
+      formatData('portList', '港区列表')
+      formatData('radarList', '雷达')
+      formatData('seaList', '水域-海域')
+      formatData('terminalList', '自助报备终端')
+      formatData('waterAreaList', '水域-警务区')
+      formatData('waterBasedFacilitiesList', '水域-水上设施')
+    }
+    const initMap = () => {
+      state.map.addSource(state.sourceElement, {
+        type: 'geojson',
+        data: {
+          type: 'FeatureCollection',
+          features: []
+        }
+      })
+      state.map.addLayer({
+        id: 'layer_element-line',
+        type: "line",
+        source: state.sourceElement,
+        layout: {
+        },
+        paint: {
+          'line-color': ['get', 'lineColor'],
+          'line-width': ['get', 'lineWidth'],
+          // 'line-dasharray': ['get', 'lineDasharray']
+        }
+      })
+      state.map.addLayer({
+        id: 'layer_element-polygon',
+        type: "fill",
+        source: state.sourceElement,
+        paint: {
+          'fill-color': ['get', 'fillColor']
+        }
+      })
+    }
+    const globalLineDash = [
+      [0, 0], //实线
+      [15, 15], //长虚线
+      [5, 5] //虚线
+    ]
+    const setSourceData = () => {
+      const arr: any = []
+      state.treeData.forEach(p => {
+        p.children.forEach(v => {
+          try {
+            const geometry: any = new format.WKT().readFeature(v.location).getGeometry()
+            const obj = {
+              type: 'Feature',
+              geometry: {
+                type: geometry.getType(),
+                coordinates: geometry.getCoordinates()
+              },
+              properties: v
+            }
+            let fillColor = 'rgba(20, 129, 241, 0.3)'
+            let lineColor = '#2860F1'
+            let lineWidth = 1
+            let lineDasharray = globalLineDash[0]
+            if (v.regionalColor) {
+              fillColor = v.regionalColor
+            }
+            if (v.segmentColor) {
+              lineColor = v.segmentColor
+            }
+            if (v.segmentWidth) {
+              lineWidth = v.segmentWidth
+            }
+            if (v.segmentType) {
+              lineDasharray = globalLineDash[Number(v.segmentType)]
+            }
+            obj.properties.fillColor = fillColor
+            obj.properties.lineColor = lineColor
+            obj.properties.lineWidth = lineWidth
+            obj.properties.lineDasharray = lineDasharray
+            arr.push(obj)
+          } catch (e) {
+          }
+        })
+      })
+      state.map.getSource(state.sourceElement).setData({
+        type: 'FeatureCollection',
+        features: arr
+      })
+    }
+    onMounted(() => {
+      console.log(xqysJson)
+    })
+    return {
+      ...toRefs(state),
+      mapGLLoad,
+      setSourceData
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  .tree {
+    width: 400px;
+    height: 100%;
+  }
+  .map {
+    flex: 1;
+  }
+}
+</style>

src/views/index.vue

@@ -4,6 +4,7 @@
     <el-button @click="$router.push('/track-status')">船舶轨迹状态查询</el-button>
     <el-button @click="$router.push('/ship-test')">船舶测试</el-button>
     <el-button @click="$router.push('/ship-playback')">船舶回放</el-button>
+    <el-button @click="$router.push('/element')">辖区要素</el-button>
   </div>
 </template>