优化

public/geojson/sw2.geojson

@@ -2,5 +2,5 @@
   "type": "FeatureCollection",
   "name": "sw1",
   "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
-  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.350786, 34.198267] } }]
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.347533, 34.201302] } }]
 }

src/views/water-station-popup/index.vue

@@ -63,7 +63,7 @@
             <LineChart style="height: 2.05rem" :options="swOption" v-if="chartShow" />
           </div>
         </template>
-        <template>
+        <template v-else>
           <div class="noData">
             <img src="@/assets/image/comprehensive/noData.png" alt="" />
             <div class="txt">暂无实时监测信息</div>
@@ -87,19 +87,19 @@
               </li>
             </ul>
             <div class="monitor-video" v-if="artShow">
-               <EasyPlayer
-             ref="playerRef"
-             playerName="测试"
-             :videoUrl="videoOption.url"
-             class="video-player screenshot"
-             live
-             speed
-             :easyStretch="true"
-             :muted="true"
-             :has-audio="false"
-             :reconnection="true"
-             @click.native.stop
-           />
+              <EasyPlayer
+                ref="playerRef"
+                playerName="测试"
+                :videoUrl="videoOption.url"
+                class="video-player screenshot"
+                live
+                speed
+                :easyStretch="true"
+                :muted="true"
+                :has-audio="false"
+                :reconnection="true"
+                @click.native.stop
+              />
             </div>
           </template>
           <template v-else>
@@ -132,7 +132,7 @@ export default {
       },
       chartShow: false,
       artShow: false,
-      videoOption: { url: ''},
+      videoOption: { url: '' },
       visible: false,
       typeVal: '1',
       radius: '',
@@ -156,6 +156,7 @@ export default {
   },
   destroyed() {
     this.$globalEventBus.$off('clickWaterStation')
+    window.map.removeLayer(graphicsLayer)
     this.graphicsLayer = null
   },
   methods: {
@@ -295,12 +296,14 @@ export default {
             if (res.data.length > 0) {
               this.toLoadVideo(this.monitorList[0], 0)
             }
+            this.addCameraIcon()
           }
         })
     },
     toLoadVideo(row, index) {
       this.activeIndex = index
       this.artShow = false
+      this.flyToPoint(row)
       window
         .requestSDK(
           '/ttvideo/video/player/getVideoRealtimeUrl',
@@ -325,6 +328,7 @@ export default {
           }
         })
     },
+
     addCameraToMap() {
       if (graphicsLayer) {
         window.map.removeLayer(graphicsLayer)
@@ -345,6 +349,49 @@ export default {
       })
       graphicsLayer.addGraphic(graphic)
     },
+    // 添加摄像头图标
+    addCameraIcon() {
+      if (!graphicsLayer) {
+        graphicsLayer = new this.mars3d.layer.GraphicLayer()
+        window.map.addLayer(graphicsLayer)
+      }
+      this.monitorList.forEach((item, index) => {
+        const graphic = new this.mars3d.graphic.BillboardEntity({
+          position: [item.longitude, item.latitude],
+          style: {
+            image: require('@/assets/image/common/camera.png'),
+            scale: 0.8,
+            horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
+            verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
+          }
+        })
+        //添加可视化区域
+        const sector = new this.mars3d.graphic.CircleEntity({
+          id: 'sector_' + index,
+          positions: [[item.longitude, item.latitude, 0]],
+          style: {
+            radius: 6000,
+            color: '#32edda',
+            opacity: 0.35,
+            outline: true,
+            outlineWidth: 1,
+            outlineColor: '#32edda',
+            visibleDepth: false,
+            clampToGround: true
+          },
+          attr: { deviceCode: item.deviceCode, channelCode: item.channelCode, devName: item.devName }
+        })
+        graphicsLayer.addGraphic(graphic)
+        graphicsLayer.addGraphic(sector)
+      })
+    },
+    // 定位到点
+    flyToPoint(point) {
+      window.map.flyToPoint([point.longitude, point.latitude], {
+        radius: 5000, // 飞行距离目标点的距离
+        duration: 2 // 飞行持续时间（秒）
+      })
+    },
     closeModal() {
       this.visible = false
       this.radius = ''
@@ -432,7 +479,7 @@ export default {
       .monitor-list {
         display: flex;
         justify-content: space-between;
-        .monitor-video{
+        .monitor-video {
           width: calc(100% - px-to-rem(180));
           height: px-to-rem(230);
         }