public/geojson/兴平城市总排口.geojson

@@ -0,0 +1,6 @@
+{
+  "type": "FeatureCollection",
+  "name": "兴平城市总排口",
+  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.536837, 34.235404, 0] } }]
+}

public/geojson/兴平城市总排口2.geojson

@@ -0,0 +1,6 @@
+{
+  "type": "FeatureCollection",
+  "name": "兴平城市总排口",
+  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.457912, 34.21285, 0] } }]
+}

public/geojson/庄头管理站.geojson

@@ -0,0 +1,6 @@
+{
+  "type": "FeatureCollection",
+  "name": "庄头管理站",
+  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.4476971626281, 34.21150936898815, 0] } }]
+}

public/geojson/新兴纺织园污水处理厂排口.geojson

@@ -0,0 +1,6 @@
+{
+  "type": "FeatureCollection",
+  "name": "新兴纺织园污水处理厂排口",
+  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.618597, 34.261497, 0] } }]
+}

public/geojson/汤坊管理站.geojson

@@ -0,0 +1,6 @@
+{
+  "type": "FeatureCollection",
+  "name": "汤坊管理站",
+  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.3804917335510, 34.20973487024093, 0] } }]
+}

public/geojson/阜寨管理站.geojson

@@ -0,0 +1,6 @@
+{
+  "type": "FeatureCollection",
+  "name": "阜寨管理站",
+  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.5273078083992, 34.23300777894599, 0] } }]
+}

src/views/components/layerList/index.vue

@@ -28,6 +28,8 @@
 <script>
 import * as mars3d from 'mars3d'
 let layerCache = {}
+let graphicsLayer = null
+let csqGraphicsLayer = null
 export default {
   name: 'LayerListView',
   data() {
@@ -46,7 +48,7 @@ export default {
               children: [
                 { id: '1-1-1', label: '提防背河坡脚线', meta: { type: 'polyline', url: '/geojson/提防背河坡脚线.geojson' } },
                 { id: '1-1-2', label: '河道管理范围线', meta: { type: 'polyline', url: '/geojson/河道管理范围线.geojson' } },
-                { id: '1-1-3', label: '一二级管控区界限', meta: { type: 'polyline', url: '/geojson/一二级管控区界限.geojson' } },
+                { id: '1-1-3', label: '一级管控区界限', meta: { type: 'polyline', url: '/geojson/一二级管控区界限.geojson' } },
                 { id: '1-1-4', label: '生态区界限', meta: { type: 'polyline', url: '/geojson/生态区界限.geojson' } },
                 { id: '1-1-5', label: '城市核心区', meta: { type: 'polyline', url: '/geojson/城市核心区.geojson' } },
                 { id: '1-1-6', label: '农村区段', meta: { type: 'polyline', url: '/geojson/农村区段.geojson' } },
@@ -54,9 +56,25 @@ export default {
                 { id: '1-1-9', label: '农村区段（右岸）', meta: { type: 'polyline', url: '/geojson/农村区段右岸.geojson' } }
               ]
             },
-            { id: '1-2', label: '监测设备' },
-            { id: '1-3', label: '入河排水（污）口' },
-            { id: '1-4', label: '河道管理站' }
+            { id: '1-2', label: '监测设备', type: 'monitor' },
+            {
+              id: '1-3',
+              label: '入河排水（污）口',
+              children: [
+                { id: '1-3-1', label: '兴平城市总排口', meta: { type: 'point', url: '/geojson/兴平城市总排口.geojson' } },
+                { id: '1-3-2', label: '兴平城市污水处理厂排口', meta: { type: 'point', url: '/geojson/兴平城市总排口2.geojson' } },
+                { id: '1-3-3', label: '新兴纺织园污水处理厂排口', meta: { type: 'point', url: '/geojson/新兴纺织园污水处理厂排口.geojson' } }
+              ]
+            },
+            {
+              id: '1-4',
+              label: '河道管理站',
+              children: [
+                { id: '1-4-1', label: '庄头管理站', meta: { type: 'point', url: '/geojson/庄头管理站.geojson' } },
+                { id: '1-4-2', label: '汤坊管理站', meta: { type: 'point', url: '/geojson/汤坊管理站.geojson' } },
+                { id: '1-4-3', label: '阜寨管理站', meta: { type: 'point', url: '/geojson/阜寨管理站.geojson' } }
+              ]
+            }
           ]
         },
         {
@@ -64,16 +82,16 @@ export default {
           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: '2-2', label: '水文监测点2', meta: { type: 'point', url: '/geojson/sw2.geojson' } }
           ]
         },
         {
           id: '3',
           label: '采砂区',
           children: [
-            { id: '3-1', label: '兴平市宜空采砂区', meta: { type: 'polygon', url: '/geojson/宜空采砂区.geojson' } },
-            { id: '3-2', label: '兴平市团结采砂区', meta: { type: 'polygon', url: '/geojson/团结采砂区.geojson' } },
-            { id: '3-3', label: '兴平市汤坊龙兴1区采砂区', meta: { type: 'polygon', url: '/geojson/坊龙兴1区采砂区.geojson' } }
+            { id: '3-1', label: '兴平市宜空采砂区', type: 'csq', meta: { type: 'polygon', url: '/geojson/宜空采砂区.geojson' } },
+            { id: '3-2', label: '兴平市团结采砂区', type: 'csq', meta: { type: 'polygon', url: '/geojson/团结采砂区.geojson' } },
+            { id: '3-3', label: '兴平市汤坊龙兴1区采砂区', type: 'csq', meta: { type: 'polygon', url: '/geojson/坊龙兴1区采砂区.geojson' } }
           ]
         },
         {
@@ -140,7 +158,14 @@ export default {
           this.$globalEventBus.$emit('showPlanDialog', { list: this.checkedNodes })
           return
         }
-
+        if (node.type === 'monitor') {
+          if (graphicsLayer) {
+            graphicsLayer.show = true
+          } else {
+            this.getMonitorData()
+          }
+          return
+        }
         if (node.children?.length) {
           // 递归加载所有叶子节点
           await this.loadAllLeafLayers(node.children)
@@ -152,6 +177,9 @@ export default {
             layerCache[id].show = true
           } else {
             await this.loadGeoJsonLayer(node)
+            if (node.type === 'csq') {
+              this.getCsqLayer(node.label)
+            }
           }
         }
       }
@@ -161,13 +189,18 @@ export default {
           this.$globalEventBus.$emit('showPlanDialog', { list: this.checkedNodes })
           return
         }
-
+        if (node.type === 'monitor') {
+          this.removeMonitorData()
+          return
+        }
         if (node.children?.length) {
           // 递归删除所有叶子节点
           this.removeAllLeafLayers(node.children)
           return
         }
-
+        if (node.type === 'csq') {
+          this.removeCsqLayer(node.label)
+        }
         this.removeLayer(id)
       }
     },
@@ -182,6 +215,9 @@ export default {
             layerCache[child.id].show = true
           } else {
             await this.loadGeoJsonLayer(child)
+            if (child.type === 'csq') {
+              this.getCsqLayer(child.label)
+            }
           }
         }
       }
@@ -194,6 +230,9 @@ export default {
           this.removeAllLeafLayers(child.children)
         } else {
           this.removeLayer(child.id)
+          if (child.type === 'csq') {
+            this.removeCsqLayer(child.label)
+          }
         }
       }
     },
@@ -250,7 +289,7 @@ export default {
         return { type: 'polyline', styleOptions: { color: '#c53632', width: 2 } }
       } else if (name === '河道管理范围线') {
         return { type: 'polyline', styleOptions: { color: '#12641c', width: 2 } }
-      } else if (name === '一二级管控区界限') {
+      } else if (name === '一级管控区界限') {
         return {
           type: 'polyline',
           styleOptions: { width: 2, materialType: mars3d.MaterialType.PolylineDash, materialOptions: { color: '#12641c', dashLength: 60 } }
@@ -278,27 +317,40 @@ export default {
           }
         }
       } else if (name.indexOf('水文') > -1) {
+        const ptStyle = this.getPointStyle(name)
         return {
           type: 'billboard',
           styleOptions: {
             image: require('./image/水文站.png'),
-            scale: 1,
-            clampToGround: true,
-            horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
-            verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
-            pixelOffset: new this.Cesium.Cartesian2(0, -6), // 偏移量
-            distanceDisplayCondition: new this.Cesium.DistanceDisplayCondition(0.0, 500000) // 按视距显示
+            ...ptStyle
+          }
+        }
+      } else if (name.indexOf('排口') > -1) {
+        const ptStyle = this.getPointStyle(name)
+        return {
+          type: 'billboard',
+          styleOptions: {
+            image: require('./image/排污口.png'),
+            ...ptStyle
+          }
+        }
+      } else if (name.indexOf('管理站') > -1) {
+        const ptStyle = this.getPointStyle(name)
+        return {
+          type: 'billboard',
+          styleOptions: {
+            image: require('./image/管理站.png'),
+            ...ptStyle
           }
         }
       } else if (name.indexOf('采砂区') > -1) {
         return {
           type: 'polygon',
           styleOptions: {
+            label: { text: name, font_size: 14, outline: true, outlineColor: '#000000', outlineWidth: 2 },
+            clampToGround: true,
             materialType: this.mars3d.MaterialType.Grid,
-            materialOptions: {
-              color: '#cc9648',
-              cellAlpha: 0.5
-            },
+            materialOptions: { color: '#cc9648', cellAlpha: 0.5 },
             outline: true,
             outlineWidth: 1,
             outlineColor: '#cc9648'
@@ -306,6 +358,18 @@ export default {
         }
       }
     },
+
+    getPointStyle(name) {
+      return {
+        scale: 0.8,
+        label: { text: name, font_size: 14, outline: true, outlineColor: '#000000', outlineWidth: 2, pixelOffsetY: -60 },
+        clampToGround: true,
+        horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
+        pixelOffset: new this.Cesium.Cartesian2(0, -6), // 偏移量
+        distanceDisplayCondition: new this.Cesium.DistanceDisplayCondition(0.0, 500000) // 按视距显示
+      }
+    },
     // 处理水文站数据
     handleData(isShow) {
       const nodeIds = ['2-1', '2-2']
@@ -336,6 +400,75 @@ export default {
           _that.$globalEventBus.$emit('clickWaterStation', event)
         })
       }
+    },
+    getMonitorData() {
+      graphicsLayer = new this.mars3d.layer.GraphicLayer()
+      window.map.addLayer(graphicsLayer)
+      window.requestSDK('/device/deviceSimpleList', { pageNum: 1, pageSize: 10, platFlag: '1', operType: '0' }, {}, 'post').then((res) => {
+        const data = res.data
+        data.forEach((point) => {
+          const graphic = new mars3d.graphic.BillboardEntity({
+            position: [point.longitude, point.latitude],
+            style: {
+              image: require('./image/camera.png'),
+              scale: 0.8,
+              clampToGround: true,
+              horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
+              verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
+              pixelOffset: new this.Cesium.Cartesian2(0, -6), // 偏移量
+              distanceDisplayCondition: new this.Cesium.DistanceDisplayCondition(0.0, 500000) // 按视距显示
+            },
+            attr: { ...point }
+          })
+          graphicsLayer.addGraphic(graphic)
+        })
+        graphicsLayer.flyTo()
+      })
+    },
+    removeMonitorData() {
+      if (graphicsLayer) {
+        graphicsLayer.show = false
+        // window.map.removeLayer(graphicsLayer)
+      }
+    },
+    // 采砂区柱状图
+    getCsqLayer(name) {
+      const coorList = {
+        兴平市宜空采砂区: [108.352091, 34.202407, 100],
+        兴平市团结采砂区: [108.360076, 34.20512, 100],
+        兴平市汤坊龙兴1区采砂区: [108.474301, 34.21255, 100]
+      }
+      const lengthList = {
+        兴平市宜空采砂区: 300,
+        兴平市团结采砂区: 500,
+        兴平市汤坊龙兴1区采砂区: 600
+      }
+      if (csqGraphicsLayer) {
+        csqGraphicsLayer.show = true
+      } else {
+        csqGraphicsLayer = new this.mars3d.layer.GraphicLayer()
+        window.map.addLayer(csqGraphicsLayer)
+      }
+      const position = coorList[name]
+      const graphic = new this.mars3d.graphic.CylinderEntity({
+        id: name,
+        position,
+        style: {
+          length: lengthList[name],
+          topRadius: 20.0,
+          bottomRadius: 20.0,
+          color: '#85bc68',
+          opacity: 0.45,
+          clampToGround: true
+        }
+      })
+      csqGraphicsLayer.addGraphic(graphic)
+    },
+    removeCsqLayer(name) {
+      if (csqGraphicsLayer) {
+        const graphic = csqGraphicsLayer.getGraphicById(name)
+        csqGraphicsLayer.removeGraphic(graphic)
+      }
     }
   },
   destroyed() {
@@ -343,6 +476,10 @@ export default {
     this.$globalEventBus.$off('toggleLeftPanel')
     // 把图层上绑定的事件也清掉
     Object.values(layerCache).forEach((l) => l.off('click'))
+    window.map.removeLayer(graphicsLayer)
+    graphicsLayer = null
+    window.map.removeLayer(csqGraphicsLayer)
+    csqGraphicsLayer = null
   }
 }
 </script>

src/views/components/tools/index.vue

@@ -17,10 +17,6 @@
 
 <script>
 import Controls from './controls/control.vue'
-import * as mars3d from 'mars3d'
-import Vue from 'vue'
-Vue.prototype.mars3d = mars3d
-Vue.prototype.Cesium = mars3d.Cesium
 export default {
   name: 'MapTools',
   data() {
@@ -43,7 +39,7 @@ export default {
   mounted() {
     this.$globalEventBus.$on('loadMap', () => {
       console.info('我加入')
-      this.distanceMeasure = new mars3d.thing.Measure({
+      this.distanceMeasure = new this.mars3d.thing.Measure({
         label: {
           color: '#ffffff',
           font_family: '楷体',
@@ -122,8 +118,8 @@ export default {
         // 下面代码抬升面的高度到一个平面，来示意“水平”
         if (window.map.scene.mode === this.Cesium.SceneMode.SCENE3D) {
           const oldPositions = graphic.positionsShow
-          const rang = mars3d.PolyUtil.getHeightRangeByDepth(oldPositions, window.map.scene)
-          graphic.positions = mars3d.PointUtil.setPositionsHeight(oldPositions, rang.maxHeight)
+          const rang = this.mars3d.PolyUtil.getHeightRangeByDepth(oldPositions, window.map.scene)
+          graphic.positions = this.mars3d.PointUtil.setPositionsHeight(oldPositions, rang.maxHeight)
         }
       } else {
         this.distanceMeasure.clear()

src/views/index.vue

@@ -105,13 +105,14 @@ export default {
       this.$globalEventBus.$emit('loadMap')
       this.mapLoaded = true
       map.hasTerrain = true
+      this.addBoundary(map)
       this.addWaterSurface(map)
     },
     // 添加水面
     addWaterSurface(map) {
       const geoJsonLayer = new this.mars3d.layer.GeoJsonLayer({
         name: '渭河',
-        url: '/geojson/weihe.geojson',
+        url: '/geojson/渭河.geojson',
         crs: 'EPSG:4326',
         symbol: {
           type: 'water',
@@ -124,12 +125,55 @@ export default {
             specularIntensity: 0.8, // 控制镜面反射强度的数字。
             baseWaterColor: '#006ab4', // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
             blendColor: '#006ab4', // 从水中混合到非水域时使用的rgba颜色对象。
-            opacity: 0.7, // 透明度
+            opacity: 0.85, // 透明度
             clampToGround: true // 是否贴地
           }
         }
       })
       map.addLayer(geoJsonLayer)
+    },
+    // 添加行政区边界
+    addBoundary(map) {
+      const graphicLayer = new this.mars3d.layer.GraphicLayer()
+      map.addLayer(graphicLayer)
+      this.mars3d.Util.fetchJson({ url: '/geojson/兴平市面.geojson' }).then((geojson) => {
+        const coords = geojson.features[0].geometry.coordinates
+        const positions = coords[0].length > 1 && Array.isArray(coords[0][0]) ? coords[0][0] : coords[0]
+        const graphic = new this.mars3d.graphic.Mask({
+          positions: positions,
+          style: {
+            fill: true,
+            color: 'rgb(2,26,79)',
+            opacity: 0.9,
+            outline: false,
+            outlineColor: '#39E09B',
+            outlineWidth: 8,
+            outlineOpacity: 0.8,
+            arcType: this.Cesium.ArcType.GEODESIC,
+            clampToGround: true
+          }
+        })
+        graphicLayer.addGraphic(graphic)
+      })
+      // const geoJsonLayer = new this.mars3d.layer.GeoJsonLayer({
+      //   url: '/geojson/兴平市.geojson',
+      //   mask: true,
+      //   symbol: {
+      //     styleOptions: {
+      //       fill: true,
+      //       color: 'rgb(2,26,79)',
+      //       opacity: 0.9,
+      //       outline: true,
+      //       outlineColor: '#39E09B',
+      //       outlineWidth: 8,
+      //       outlineOpacity: 0.8,
+      //       arcType: this.Cesium.ArcType.GEODESIC,
+      //       clampToGround: true
+      //     }
+      //   }
+      //   // flyTo: true
+      // })
+      // map.addLayer(geoJsonLayer)
     }
   }
 }

src/views/safety-inspection/addInspectionTask.vue

@@ -39,14 +39,8 @@
 </template>
 
 <script>
-import "mars3d/dist/mars3d.css"
-import * as mars3d from 'mars3d'
-import Vue from 'vue'
 import { toAddSecurityPatrol, endPatrol, startPatrol } from '@/api/securityPatrolApi'
 import moment from 'moment'
-// 为了方便使用,绑定到原型链，在其他vue文件，直接this.mars3d 来使用
-Vue.prototype.mars3d = mars3d
-Vue.prototype.Cesium = mars3d.Cesium
 export default {
   name: 'addInspectionTask',
   props: {
@@ -221,11 +215,11 @@ export default {
         })
         return
       }
-        const point = this.addTaskFrom.inspectionPoint[this.currentPatrolIndex]
-        this.flyToPoint(point)
-        // 播放视频
-        this.playVideo(point)
-        this.currentPatrolIndex++
+      const point = this.addTaskFrom.inspectionPoint[this.currentPatrolIndex]
+      this.flyToPoint(point)
+      // 播放视频
+      this.playVideo(point)
+      this.currentPatrolIndex++
     },
     playVideo(point) {
       this.fetchUrl(point).then((res) => {
@@ -260,7 +254,7 @@ export default {
     removeOption(index) {
       if (this.addTaskFrom.inspectionPoint.length > 1) {
         this.addTaskFrom.inspectionPoint.splice(index, 1)
-        this.$refs.addTaskFormRef.validateField('inspectionPoint');
+        this.$refs.addTaskFormRef.validateField('inspectionPoint')
       }
     }
   },

src/views/safety-inspection/index.vue

@@ -8,11 +8,7 @@
 <script>
 import Left from './left.vue'
 import Right from './right.vue'
-import * as mars3d from 'mars3d'
-import Vue from 'vue'
 let graphicsLayer = null
-Vue.prototype.mars3d = mars3d
-Vue.prototype.Cesium = mars3d.Cesium
 export default {
   components: {
     Left,
@@ -27,8 +23,8 @@ export default {
     this.fetchData()
   },
   methods: {
-    fetchData(){
-       window
+    fetchData() {
+      window
         .requestSDK(
           '/device/deviceSimpleList',
           {
@@ -50,55 +46,38 @@ export default {
     },
     // 添加初始点
     addInitialPoints() {
+      graphicsLayer = new this.mars3d.layer.GraphicLayer()
+      window.map.addLayer(graphicsLayer)
       this.inspectionOptions.forEach((point) => {
-          this.addPointToMap(point)
+        this.addPointToMap(point)
       })
     },
 
     // 添加点到地图
     addPointToMap(point) {
-      // if (graphicsLayer) {
-      //   window.map.removeLayer(graphicsLayer)
-      // }
-      graphicsLayer = new this.mars3d.layer.GraphicLayer()
-      window.map.addLayer(graphicsLayer)
-      const graphic = new mars3d.graphic.PointEntity({
+      const graphic = new this.mars3d.graphic.BillboardEntity({
         position: [point.longitude, point.latitude],
-        billboard: {
+        style: {
           image: require('./image/camera.png'),
-          scale: 1,
+          scale: 0.8,
           horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
           verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
         },
-        attr: {
-          ...point
-        },
-        label: {
-          text: point.devName,
-          font_size: 32,
-          color: '#red',
-          outline: true,
-          outlineColor: '#000000',
-          outlineWidth: 2,
-          horizontalOrigin: this.Cesium.HorizontalOrigin.LEFT,
-          verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
-          pixelOffset: new this.Cesium.Cartesian2(15, 0)
-        }
+        attr: { ...point }
       })
-
       graphicsLayer.addGraphic(graphic)
       let that = this
       graphic.on(this.mars3d.EventType.click, function () {
         const pointData = graphic.attr
-         that.fetchUrl(pointData).then((res) => {
-          if(res.code == 4001){
+        that.fetchUrl(pointData).then((res) => {
+          if (res.code == 4001) {
             that.$message.warning('设备离线')
-          }else if(res.code == 400){
+          } else if (res.code == 400) {
             that.$message.error(res.msg)
-          }else{
+          } else {
             const url = res.data.streamUrl
             that.$set(pointData, 'url', url)
-            that.$globalEventBus.$emit('clickVideoPlay', {point: pointData, visible: true ,type:'click'})
+            that.$globalEventBus.$emit('clickVideoPlay', { point: pointData, visible: true, type: 'click' })
           }
         })
       })
@@ -122,7 +101,12 @@ export default {
             resolve(res)
           })
       })
-    },
+    }
+  },
+  beforeDestroy() {
+    if (graphicsLayer) {
+      window.map.removeLayer(graphicsLayer)
+    }
   }
 }
 </script>