最新版添加东蒙基地监控视频

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist = true

package.json

@@ -17,6 +17,8 @@
     "axios": "^0.24.0",
     "echarts": "^5.3.3",
     "element-plus": "^2.1.8",
+    "flv.js": "^1.6.2",
+    "mpegts.js": "^1.7.3",
     "sass": "^1.43.5",
     "scss": "^0.2.4",
     "vue": "^3.2.16",

src/components/map/index.vue

@@ -72,6 +72,10 @@
     :style="{'right':roleInfo.posVisible?'450px':'50px'}">
     <el-option v-for="item in roleInfo.allVillageData" :key="item.name" :label="item.name" :value="item.name" />
   </el-select>
+  <!-- 监控 -->
+  <div style="z-index:99;top:0;left:0;background:rgba(0,0,0,0.2)" class="flex max-w max-h ai-c jc-c pos-f" @click="monitorClose" v-if="roleInfo.monitorVisible">
+    <video width="500" height="400" id="videoElement" controls autoplay></video>
+  </div>
   <Loading />
 </template>
 <script>
@@ -103,6 +107,9 @@
   import TaiPingCunJieGeoJson from '../../../public/geojson/太平村界.json'
   import JianSheYongDiGeoJson from '../../../public/geojson/建设用地.json'
 
+  import flvjs from 'flv.js'
+  import mpegts from 'mpegts.js'
+
   export default defineComponent({
     components: { LayerTreeLocal, houseInfo, Loading, tablesinfo, barcharts, piecharts, linecharts, objectDia },
 
@@ -115,8 +122,10 @@
         isFirstLoad: true,
         MAP_SERVER: MAP_SERVER_CONFIG,
         // MAP_TOOL: MAP_TOOL_CONFIG,
+        flvPlayer: null,
         baseLayerObj: {},
         roleInfo: {
+          monitorVisible: false,
           layersVisible: true,
           posVisible: props.location,
           areaVisible: props.leftShow,
@@ -170,6 +179,7 @@
         sceneLayers: [],
         dataserviceArr: [], //存放数据服务entity实体
         landmarkArr: [],//存放地标entity实体
+        monitorMarkArr: [],
         polygonArr: [],
         buildMarkArr: [],
         shangYeZhenVillage: [
@@ -555,6 +565,7 @@
       )
 
       onMounted(() => {
+        
         if (route.query.type == 'shangyezhen') {
           data.roleInfo.allVillageData = data.shangYeZhenVillage
 
@@ -616,7 +627,6 @@
           methods.getBoundServerData()
           methods.getAttributeList()
           methods.addPointMask()
-
         }, 1000)
         setTimeout(function () {
           methods.handlerChangeBasemap()
@@ -633,6 +643,38 @@
        *  ————  handlerLoadWebServer  添加服务图层
        * **/
       const methods = {
+        addMonitorFlvVideo(){
+          if (mpegts.isSupported()) {
+            var videoElement = document.getElementById('videoElement')           
+            data.flvPlayer = mpegts.createPlayer(
+              {
+                type: 'flv',
+                isLive: true,
+                hasAudio: false,
+                cors: true,
+                hanVideo: true,
+                url: "http://112.36.21.16:18208/video/37131220241327001881.flv"   // 自己的flv视频流
+              },
+              {
+                enableWorker: false, //不启用分离线程
+                enableStashBuffer: false, //关闭IO隐藏缓冲区
+                reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
+                autoCleanupSourceBuffer: true, //自动清除缓存
+              }
+            )
+            data.flvPlayer.attachMediaElement(videoElement)
+            data.flvPlayer.load()
+            data.flvPlayer.play()
+          }
+        },
+        monitorClose(){
+          data.flvPlayer.pause();
+          data.flvPlayer.unload();
+          data.flvPlayer.detachMediaElement();
+          data.flvPlayer.destroy();
+          data.flvPlayer = "";
+          data.roleInfo.monitorVisible = false
+        },
         getDictionaryData() {
           let param = {
             page: 1,
@@ -712,15 +754,15 @@
                 },
               })
               data.buildMarkArr.push(entity);
-              // viewer.entities.add(entity);
-              data.dataSource.entities.add(entity);
+              viewer.entities.add(entity);
+              // data.dataSource.entities.add(entity);
             }
           }
-          methods.combineListener()
+          // methods.combineListener()
         },
         //点聚合功能实现 
         combineListener() {
-          console.log("combineListener")
+           
           data.dataSource.clustering.enabled = true;
           data.dataSource.clustering.pixelRange = 60;
           data.dataSource.clustering.minimumClusterSize = 2;
@@ -1161,15 +1203,15 @@
 
           // 添加底图
           let layers = viewer.scene.imageryLayers;
-          // layers.addImageryProvider(new Cesium.MapboxStyleImageryProvider({
-          //   id: 'mapboxname',
-          //   url: 'https://api.mapbox.com/styles/v1',
-          //   username: 'xujingliang',
-          //   styleId: 'cli9o6tl500zh01r8fpbx2n1s',
-          //   accessToken: 'pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg',
-          //   scaleFactor: false,
-          //   show: false
-          // }));
+          layers.addImageryProvider(new Cesium.MapboxStyleImageryProvider({
+            id: 'mapboxname',
+            url: 'https://api.mapbox.com/styles/v1',
+            username: 'xujingliang',
+            // styleId: 'cli9o6tl500zh01r8fpbx2n1s',
+            // accessToken: 'pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg',
+            // scaleFactor: false,
+            // show: false
+          }));
 
           // viewer.scene.imageryLayers.remove('mapboxname');
 
@@ -1290,10 +1332,18 @@
           // data.roleInfo.MVTBubbleShow = false
           if (obj.type == 'S3M') {
             viewer.scene.layers.remove(obj.layersName)
-            data.landmarkArr.forEach((item, index) => {
-              viewer.entities.remove(data.landmarkArr[index])
-            })
-            data.roleInfo.s3mvisible = false
+            if(obj.name == '东蒙基地'){
+              data.monitorMarkArr.forEach((item, index) => {
+                viewer.entities.remove(data.monitorMarkArr[index])
+              })
+              data.monitorMarkArr = []
+            }else{
+              data.landmarkArr.forEach((item, index) => {
+                viewer.entities.remove(data.landmarkArr[index])
+              })
+              data.landmarkArr = []
+              data.roleInfo.s3mvisible = false
+            }
           } else if (obj.type == 'MVT') {
             window.viewer.scene.removeVectorTilesMap(obj.layersName);
             if (obj.name == '建设用地') {
@@ -1339,7 +1389,7 @@
           data.roleInfo.xihuluimg = pickResult.layerID
           if (pickResult) {
             let pickkey = pickResult.layerID
-            let pickproperties = pickResult[pickkey][0].feature.properties
+            let pickproperties = pickResult[pickkey] ? pickResult[pickkey][0].feature.properties : pickResult.properties
             let tableData = []
             if (JSON.stringify(pickproperties) == '{}') {
               tableData.push({
@@ -1701,32 +1751,55 @@
 
           }
         },
+        addMonitorEntity() {
+          let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+          handler.setInputAction(function (movement) {
+            let selectedEntity = window.viewer.selectedEntity;
+            console.log('asd',selectedEntity)
+            if(selectedEntity && selectedEntity.id == "dmjdid"){           
+              data.roleInfo.monitorVisible = true  
+              setTimeout(function () {
+                methods.addMonitorFlvVideo()
+              }, 500)
+            }
+          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+          let list = [
+            {
+              position: [118.019369,35.365593],
+              name: "东蒙基地监控",
+              id: 'dmjdid'
+            }
+          ];
+          for (let i = 0; i < list.length; i++) {    
+            var position3 = new Cesium.Cartographic(Cesium.Math.toRadians(list[i].position[0]), Cesium.Math.toRadians(list[i].position[1]));
+            list[i].height = window.viewer.scene.sampleHeight(position3);
+            let entity = new Cesium.Entity({
+              id: 'dmjdid',
+              position: Cesium.Cartesian3.fromDegrees(parseFloat(list[i].position[0]), parseFloat(list[i].position[1]), parseFloat(list[i].height + 1)),
+              billboard: {
+                image:"/images/monitor.png",
+                height: 30,
+                width: 30,
+                // height:40,
+                // width:40,
+                // scale:1,
+                // pixelSize:20,
+                pixelOffset: new Cesium.Cartesian2(15, -15),
+                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                disableDepthTestDistance: 99000000,
+                // clampToGround:true
+              },
+            })
+            data.monitorMarkArr.push(entity);
+            viewer.entities.add(entity);
+          }
+        },
         addSchoolEntity() {
           let list = [
             {
               position: [117.963558, 35.39894],
               name: "上冶镇中心小学"
             }
-            // {
-            //   position:[117.98512611573159,35.25364337631628],
-            //   name:"东关中学"
-            // }, 
-            // {
-            //   position:[117.96415391365807,35.26292122125022],
-            //   name:"费县实验中学",
-            // },
-            // {
-            //   position:[117.95830322815323,35.2698094923481],
-            //   name:"西关小学",
-            // },
-            // {
-            //   position:[117.9553245528308,35.26961841496414],
-            //   name:"费县职业中专",
-            // },
-            // {
-            //   position:[117.94721838453447,35.26606553073805],
-            //   name:"费县第二中学"
-            // }
           ];
           let canvasArr = [];
           for (let i = 0; i < list.length; i++) {
@@ -1786,10 +1859,10 @@
         addCustomEntity() {
           let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
           handler.setInputAction(function (event) {
-
+            console.log('asd111',event);
             let selectedEntity = window.viewer.selectedEntity;
             var position = viewer.scene.pickPosition(event.position);
-
+            console.log('asd112',selectedEntity);
             let cartographic = Cesium.Cartographic.fromCartesian(position);
             let lng = Cesium.Math.toDegrees(cartographic.longitude) + 0.003; // 经度
             let lat = Cesium.Math.toDegrees(cartographic.latitude) - 0.018; // 纬度
@@ -2114,6 +2187,11 @@
                   methods.addCommunityEntity();
                 }, 10000)
               }
+              if (obj.name == '东蒙基地') {
+                setTimeout(function () {
+                  methods.addMonitorEntity();
+                }, 2000)
+              }
             })
 
             /*