修改传感器气泡

src/components/supermap-2.5d.vue

@@ -1,11 +1,11 @@
 <template>
-  <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;" >
+  <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;">
     <!--地图top 显示 开始-->
     <transition name='fade'>
       <div class="map-tit" v-show="mapshow">
         <div class="top-tit">
           <i class="iconfont sj-icon-jkzx"></i>
-          <span><img src="../assets/images/close.svg" @click="mapshow=false"/></span>
+          <span><img src="../assets/images/close.svg" @click="mapShow" /></span>
         </div>
         <div class="map-txt" v-html="bindPopupHtml">
         </div>
@@ -16,418 +16,444 @@
 </template>
 
 <script>
-import {
-  iconList,
-  getDeviceList
-} from '@/api/components/supermap.js'
-import Cookies from 'js-cookie'
-import { getConfigKey } from "@/api/system/config";
-export default {
-  name: 'supermap-2.5d',
-  data() {
-    return {
+  import {
+    iconList,
+    getDeviceList
+  } from '@/api/components/supermap.js'
+  import Cookies from 'js-cookie'
+  import {
+    getConfigKey
+  } from "@/api/system/config";
+  export default {
+    name: 'supermap-2.5d',
+    data() {
+      return {
         bindPopupHtml: null,
         mapshow: false,
-      superMapRootUrl:null,
-      viewer:null,
-      scene:null,
-      handler:null,
-      pick:null,
-      back_position:null,
-      content:null,
-      mvtMap0:null,
-      shuixi_name:null,
-      mvtMap1:null,
-      mvtMap2:null,
-      mvtMap3:null,
-      road_name:null,
-      layer_xiangzhenjie_name:null,
-      markerboxEntity: [],//地图落点实体
-      connectBoxEntity: null,//地图线实体
-      graphicsBoxEntity: null,//地图面实体
-      markerboxEntityRadius: [],//地图落点实体
-      connectBoxEntityTwo: null,//地图线实体
-      /*************************原地图属性*********************/
-      isEditableLayers: false, //绘图控件
+        superMapRootUrl: null,
+        viewer: null,
+        scene: null,
+        handler: null,
+        pick: null,
+        back_position: null,
+        content: null,
+        mvtMap0: null,
+        shuixi_name: null,
+        mvtMap1: null,
+        mvtMap2: null,
+        mvtMap3: null,
+        road_name: null,
+        layer_xiangzhenjie_name: null,
+        markerboxEntity: [], //地图落点实体
+        connectBoxEntity: null, //地图线实体
+        graphicsBoxEntity: null, //地图面实体
+        markerboxEntityRadius: [], //地图落点实体
+        connectBoxEntityTwo: null, //地图线实体
+        timer: null,
+        /*************************原地图属性*********************/
+        isEditableLayers: false, //绘图控件
 
-      /*************************原地图属性*********************/
-      aac:null,
-      queryParams: {
-        name:null,
-        mapData: null,
-        mapName: null
-      },
-    }
-  },
-  watch: {},
-  created() {
-    this.superMapInfo();
-  },
-  mounted() {
-  },
-  props: {},
-  methods: {
-    //清除所有
-    clearAll(){
-      this.viewer.entities.removeAll()
-    },
-    //移除之前添加的点
-    clearMRadius() {
-      if (this.markerboxEntityRadius != null && this.markerboxEntityRadius.length>0) {
-        for (let i = 0; i < this.markerboxEntityRadius.length; i++) {
-          this.viewer.entities.remove(this.markerboxEntityRadius[i])
-        }
-        this.markerboxEntityRadius = []
+        /*************************原地图属性*********************/
+        aac: null,
+        queryParams: {
+          name: null,
+          mapData: null,
+          mapName: null
+        },
       }
     },
-    //移除之前添加的线
-    clearTwoC() {
-      if (this.connectBoxEntityTwo != null) {
-        this.viewer.entities.remove(this.connectBoxEntityTwo)
-        this.connectBoxEntityTwo = []
-      }
+    watch: {},
+    created() {
+      this.superMapInfo();
     },
-    /**
-     * 地图落点-覆盖范围
-     */
-    setMarkersRadius(makerList) {
-      let that = this
-      that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
-      for (let i in makerList) {
-        let longitude = makerList[i].lng;
-        let latitude = makerList[i].lat;
-        let marker = that.viewer.entities.add({
-          name:"",
-          position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
-          billboard: {
-            image: iconList[makerList[i].icon],
-            width: 48,
-            height: 48,
-            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-            disableDepthTestDistance:Number.POSITIVE_INFINITY
-          },
-          description: makerList[i].bindPopupHtml,
-          click: makerList[i].click,
-          parameter: makerList[i].parameter
+    mounted() {},
+    props: {},
+    methods: {
+      mapShow() {
+        this.mapshow = false,
+          clearInterval(this.timer)
+      },
+      //清除所有
+      clearAll() {
+        this.viewer.entities.removeAll()
+      },
+      //移除之前添加的点
+      clearMRadius() {
+        if (this.markerboxEntityRadius != null && this.markerboxEntityRadius.length > 0) {
+          for (let i = 0; i < this.markerboxEntityRadius.length; i++) {
+            this.viewer.entities.remove(this.markerboxEntityRadius[i])
+          }
+          this.markerboxEntityRadius = []
+        }
+      },
+      //移除之前添加的线
+      clearTwoC() {
+        if (this.connectBoxEntityTwo != null) {
+          this.viewer.entities.remove(this.connectBoxEntityTwo)
+          this.connectBoxEntityTwo = []
+        }
+      },
+      /**
+       * 地图落点-覆盖范围
+       */
+      setMarkersRadius(makerList) {
+        let that = this
+        that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
+        for (let i in makerList) {
+          let longitude = makerList[i].lng;
+          let latitude = makerList[i].lat;
+          let marker = that.viewer.entities.add({
+            name: "",
+            position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+            billboard: {
+              image: iconList[makerList[i].icon],
+              width: 48,
+              height: 48,
+              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+              disableDepthTestDistance: Number.POSITIVE_INFINITY
+            },
+            description: makerList[i].bindPopupHtml,
+            click: makerList[i].click,
+            parameter: makerList[i].parameter
+          })
+          that.markerboxEntityRadius.push(marker)
+          //绘制摄像头的圈（覆盖范围）
+          let markerRadius = that.viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(makerList[i].lng, makerList[i].lat, 2),
+            ellipse: {
+              semiMinorAxis: makerList[i].radius,
+              semiMajorAxis: makerList[i].radius,
+              height: 0.0,
+              material: Cesium.Color.DODGERBLUE.withAlpha(0.4),
+              outline: true,
+              outlineColor: Cesium.Color.DEEPSKYBLUE.withAlpha(1),
+              outlineWidth: 1,
+            },
+          });
+          that.markerboxEntityRadius.push(markerRadius)
+        }
+        that.viewer.scene.globe.depthTestAgainstTerrain = false
+        that.createLeftClickDescription()
+        that.createRightClickDescription()
+      },
+      /**
+       * 地图画线(贴地)
+       */
+      setConnectTwoList(connectList, color, withAlpha) {
+        let that = this
+        //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
+        let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
+        that.connectBoxEntityTwo = that.viewer.entities.add({
+          Type: 'Polyline',
+          polyline: {
+            positions: Cesium.Cartesian3.fromDegreesArray(connectList),
+            clampToGround: true, //贴地 true,不贴地  false
+            width: 5,
+            material: material
+          }
         })
-        that.markerboxEntityRadius.push(marker)
-        //绘制摄像头的圈（覆盖范围）
-        let markerRadius = that.viewer.entities.add({
-          position: Cesium.Cartesian3.fromDegrees(makerList[i].lng,makerList[i].lat,2),
-          ellipse: {
-            semiMinorAxis: makerList[i].radius,
-            semiMajorAxis: makerList[i].radius,
-            height: 0.0,
-            material: Cesium.Color.DODGERBLUE.withAlpha(0.4),
-            outline: true,
-            outlineColor: Cesium.Color.DEEPSKYBLUE.withAlpha(1),
-            outlineWidth: 1,
-          },
-        });
-        that.markerboxEntityRadius.push(markerRadius)
-      }
-      that.viewer.scene.globe.depthTestAgainstTerrain = false
-      that.createLeftClickDescription()
-      that.createRightClickDescription()
-    },
-    /**
-     * 地图画线(贴地)
-     */
-    setConnectTwoList(connectList,color,withAlpha) {
-      let that = this
-      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
-      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
-      that.connectBoxEntityTwo = that.viewer.entities.add({
-        Type: 'Polyline',
-        polyline: {
-          positions: Cesium.Cartesian3.fromDegreesArray(connectList),
-          clampToGround: true,//贴地 true,不贴地  false
-          width: 5,
-          material: material
+      },
+      //移除之前添加的点
+      clearM() {
+        if (this.markerboxEntity != null && this.markerboxEntity.length > 0) {
+          for (let i = 0; i < this.markerboxEntity.length; i++) {
+            this.viewer.entities.remove(this.markerboxEntity[i])
+          }
+          this.markerboxEntity = []
         }
-      })
-    },
-    //移除之前添加的点
-    clearM() {
-      if (this.markerboxEntity != null && this.markerboxEntity.length>0) {
-        for (let i = 0; i < this.markerboxEntity.length; i++) {
-          this.viewer.entities.remove(this.markerboxEntity[i])
+      },
+      //移除之前添加的线
+      clearC() {
+        if (this.connectBoxEntity != null) {
+          this.viewer.entities.remove(this.connectBoxEntity)
+          this.connectBoxEntity = []
         }
-        this.markerboxEntity = []
-      }
-    },
-    //移除之前添加的线
-    clearC() {
-      if (this.connectBoxEntity != null) {
-        this.viewer.entities.remove(this.connectBoxEntity)
-        this.connectBoxEntity = []
-      }
-    },
-    //移除之前添加的面
-    clearG() {
-      if (this.graphicsBoxEntity != null) {
-        this.viewer.entities.remove(this.graphicsBoxEntity)
-        this.graphicsBoxEntity = []
-      }
-    },
-    superMapInfo(){
-      getConfigKey('superMap.iServer').then(response => {
-        this.superMapRootUrl = response.msg;
-        this.onload();
-      })
-    },
-    onload(){
-      let that = this;
-      //1.添加地形数据
-      that.viewer = new Cesium.Viewer('cesiumContainer',{
-        //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
-        terrainProvider : new Cesium.CesiumTerrainProvider({
-          url :that.superMapRootUrl+"/3D-sipingchangjing/rest/realspace/datas/dem@spyx4326",
-          //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
-          invisibility:true
-        }),
-        infoBox:false,
-        navigation: false
-      }, {
-        contextOptions: {
-          msaaLevel: 4,
-          requestWebgl2: true
-        },
-        orderIndependentTranslucency: false
-      });
-      that.scene = that.viewer.scene;
-      that.viewer.cesiumWidget.creditContainer.style.display = "none" // 去掉超图logo水印
+      },
+      //移除之前添加的面
+      clearG() {
+        if (this.graphicsBoxEntity != null) {
+          this.viewer.entities.remove(this.graphicsBoxEntity)
+          this.graphicsBoxEntity = []
+        }
+      },
+      superMapInfo() {
+        getConfigKey('superMap.iServer').then(response => {
+          this.superMapRootUrl = response.msg;
+          this.onload();
+        })
+      },
+      onload() {
+        let that = this;
+        //1.添加地形数据
+        that.viewer = new Cesium.Viewer('cesiumContainer', {
+          //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
+          terrainProvider: new Cesium.CesiumTerrainProvider({
+            url: that.superMapRootUrl + "/3D-sipingchangjing/rest/realspace/datas/dem@spyx4326",
+            //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
+            invisibility: true
+          }),
+          infoBox: false,
+          navigation: false
+        }, {
+          contextOptions: {
+            msaaLevel: 4,
+            requestWebgl2: true
+          },
+          orderIndependentTranslucency: false
+        });
+        that.scene = that.viewer.scene;
+        that.viewer.cesiumWidget.creditContainer.style.display = "none" // 去掉超图logo水印
 
-      //2.添加SuperMap iServer发布的影像服务
-      let layer = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
-        url : that.superMapRootUrl+"/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",
-      }));
+        //2.添加SuperMap iServer发布的影像服务
+        let layer = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+          url: that.superMapRootUrl + "/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",
+        }));
 
-      //飞行值坐标点,每3秒推进一级
-      //heading-代表镜头左右方向,正值为右,负值为左
-      //pitch-代表镜头上下方向,正值为上,负值为下.
-      //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
-      setTimeout(function() {
-        that.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 950000),
-          orientation: {
-            // heading :  Cesium.Math.toRadians(346.4202942851978),
-            // pitch : Cesium.Math.toRadians(-56.74026687972041),
-            // roll : Cesium.Math.toRadians(0)
-          }
-        });
+        //飞行值坐标点,每3秒推进一级
+        //heading-代表镜头左右方向,正值为右,负值为左
+        //pitch-代表镜头上下方向,正值为上,负值为下.
+        //roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
+        setTimeout(function() {
+          that.viewer.camera.flyTo({
+            destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 950000),
+            orientation: {
+              // heading :  Cesium.Math.toRadians(346.4202942851978),
+              // pitch : Cesium.Math.toRadians(-56.74026687972041),
+              // roll : Cesium.Math.toRadians(0)
+            }
+          });
 
-      }, 3000);
-      setTimeout(function() {
-        that.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 650000),
-          orientation: {
-            // heading :  Cesium.Math.toRadians(346.4202942851978),
-            // pitch : Cesium.Math.toRadians(-56.74026687972041),
-            // roll : Cesium.Math.toRadians(0)
-          }
-        });
+        }, 3000);
+        setTimeout(function() {
+          that.viewer.camera.flyTo({
+            destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 650000),
+            orientation: {
+              // heading :  Cesium.Math.toRadians(346.4202942851978),
+              // pitch : Cesium.Math.toRadians(-56.74026687972041),
+              // roll : Cesium.Math.toRadians(0)
+            }
+          });
 
-      }, 3000);
-      setTimeout(function() {
-        that.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 350000),
-          orientation: {
-            // heading :  Cesium.Math.toRadians(346.4202942851978),
-            // pitch : Cesium.Math.toRadians(-56.74026687972041),
-            // roll : Cesium.Math.toRadians(0)
-          }
-        });
+        }, 3000);
+        setTimeout(function() {
+          that.viewer.camera.flyTo({
+            destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 350000),
+            orientation: {
+              // heading :  Cesium.Math.toRadians(346.4202942851978),
+              // pitch : Cesium.Math.toRadians(-56.74026687972041),
+              // roll : Cesium.Math.toRadians(0)
+            }
+          });
 
-      }, 3000);
+        }, 3000);
 
-      //开始加载专题图等数据，8秒后开始执行
-      setTimeout(function() {
-        // // 3.水系
-        // let shuixi = that.superMapRootUrl+"/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian";
-        // that.mvtMap0 = that.scene.addVectorTilesMap({
-        //   url: shuixi,
-        //   canvasWidth: 512,
-        //   name: 'mvt_map0',
-        //   viewer: that.viewer,
-        //   selectedColor:new Cesium.Color(6,169,254,0.5),
-        //   show:true,
-        // });
+        //开始加载专题图等数据，8秒后开始执行
+        setTimeout(function() {
+          // // 3.水系
+          // let shuixi = that.superMapRootUrl+"/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian";
+          // that.mvtMap0 = that.scene.addVectorTilesMap({
+          //   url: shuixi,
+          //   canvasWidth: 512,
+          //   name: 'mvt_map0',
+          //   viewer: that.viewer,
+          //   selectedColor:new Cesium.Color(6,169,254,0.5),
+          //   show:true,
+          // });
 
-        // //4.林地
-        // let lindi = that.superMapRootUrl+"/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi";
-        // that.mvtMap1 = that.scene.addVectorTilesMap({
-        //   url: lindi,
-        //   canvasWidth: 512,
-        //   name: 'mvt_map1',
-        //   viewer: that.viewer,
-        //   selectedColor:new Cesium.Color(6,254,181,0.5),
-        //   show:true,
-        // });
-        //
-        // //5.农田
-        // let nongtian = that.superMapRootUrl+"/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian";
-        // that.mvtMap2 = that.scene.addVectorTilesMap({
-        //   url: nongtian,
-        //   canvasWidth: 512,
-        //   name: 'mvt_map2',
-        //   viewer: that.viewer,
-        //   selectedColor:new Cesium.Color(250, 236, 246,1.0),
-        //   show:true,
-        // });
-        //
-        // //6.路网
-        // let road = that.superMapRootUrl+"/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian";
-        // that.mvtMap3 = that.scene.addVectorTilesMap({
-        //   url: road,
-        //   canvasWidth: 512,
-        //   name: 'mvt_map3',
-        //   viewer: that.viewer,
-        //   show:true,
-        // });
-        //
-        // //7.添加路网NAME
-        // let road_name_url = that.superMapRootUrl+'/3D-road_Name_S/rest/realspace';
-        // that.road_name = that.scene.open(road_name_url);
-        //
-        // // 8.添加水系NAME
-        // let shuixi_name_url = that.superMapRootUrl+'/3D-shuixi_Name/rest/realspace';
-        // that.shuixi_name = that.scene.open(shuixi_name_url);
+          // //4.林地
+          // let lindi = that.superMapRootUrl+"/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi";
+          // that.mvtMap1 = that.scene.addVectorTilesMap({
+          //   url: lindi,
+          //   canvasWidth: 512,
+          //   name: 'mvt_map1',
+          //   viewer: that.viewer,
+          //   selectedColor:new Cesium.Color(6,254,181,0.5),
+          //   show:true,
+          // });
+          //
+          // //5.农田
+          // let nongtian = that.superMapRootUrl+"/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian";
+          // that.mvtMap2 = that.scene.addVectorTilesMap({
+          //   url: nongtian,
+          //   canvasWidth: 512,
+          //   name: 'mvt_map2',
+          //   viewer: that.viewer,
+          //   selectedColor:new Cesium.Color(250, 236, 246,1.0),
+          //   show:true,
+          // });
+          //
+          // //6.路网
+          // let road = that.superMapRootUrl+"/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian";
+          // that.mvtMap3 = that.scene.addVectorTilesMap({
+          //   url: road,
+          //   canvasWidth: 512,
+          //   name: 'mvt_map3',
+          //   viewer: that.viewer,
+          //   show:true,
+          // });
+          //
+          // //7.添加路网NAME
+          // let road_name_url = that.superMapRootUrl+'/3D-road_Name_S/rest/realspace';
+          // that.road_name = that.scene.open(road_name_url);
+          //
+          // // 8.添加水系NAME
+          // let shuixi_name_url = that.superMapRootUrl+'/3D-shuixi_Name/rest/realspace';
+          // that.shuixi_name = that.scene.open(shuixi_name_url);
 
-        //9.添加县界和乡镇界
-        let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
-          url : that.superMapRootUrl+"/map-SIPING/rest/maps/XianJie_XiangZhenJie",
-        }));
+          //9.添加县界和乡镇界
+          let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+            url: that.superMapRootUrl + "/map-SIPING/rest/maps/XianJie_XiangZhenJie",
+          }));
 
-        //10.添加区县乡镇村名称
-        let layer_xiangzhenjie_name = that.superMapRootUrl+'/3D-Name_he/rest/realspace';
-        that.scene.open(layer_xiangzhenjie_name);
-        that.road_name.then(function (layers) {
-          let xianJie_textLayer = that.scene.layers.find('XianJie@SiPing#1');//区县文字图层
-          let xiangZhenJie_textLayer = that.scene.layers.find('XiangZhenJie@SiPing#2');//乡镇文字图层
-          let cun_textLayer = that.scene.layers.find('Cun@SiPing#1');//村文字图层
-          //关闭避让
-          xianJie_textLayer.isOverlapDisplayed = true;
-          xiangZhenJie_textLayer.isOverlapDisplayed = true;
-          cun_textLayer.isOverlapDisplayed = true;
-        });
+          //10.添加区县乡镇村名称
+          let layer_xiangzhenjie_name = that.superMapRootUrl + '/3D-Name_he/rest/realspace';
+          that.scene.open(layer_xiangzhenjie_name);
+          that.road_name.then(function(layers) {
+            let xianJie_textLayer = that.scene.layers.find('XianJie@SiPing#1'); //区县文字图层
+            let xiangZhenJie_textLayer = that.scene.layers.find('XiangZhenJie@SiPing#2'); //乡镇文字图层
+            let cun_textLayer = that.scene.layers.find('Cun@SiPing#1'); //村文字图层
+            //关闭避让
+            xianJie_textLayer.isOverlapDisplayed = true;
+            xiangZhenJie_textLayer.isOverlapDisplayed = true;
+            cun_textLayer.isOverlapDisplayed = true;
+          });
 
-      }, 3000);
+        }, 3000);
 
-    },
-    /**
-     * 地图落点
-     */
-    setMarkers(makerList) {
-      let that = this
-      that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
-      for (let i in makerList) {
-        let longitude = makerList[i].lng
-        let latitude = makerList[i].lat
-        let marker = that.viewer.entities.add({
-          name: '',
-          position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
-          billboard: {
-            image: iconList[makerList[i].icon],
-            width: 48,
-            height: 48,
-            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-            disableDepthTestDistance: Number.POSITIVE_INFINITY
-          },
-          description: makerList[i].bindPopupHtml,
-          click: makerList[i].click,
-          parameter: makerList[i].parameter
-        })
-        that.markerboxEntity.push(marker)
-      }
-      that.viewer.scene.globe.depthTestAgainstTerrain = false
-      that.createLeftClickDescription()
-      that.createRightClickDescription()
-    },
-    /**
-     *鼠标左击事件是原来的气泡
-     */
-    createLeftClickDescription() {
-      let that = this;
-      that.handler.setInputAction(function (movement) {
+      },
+      /**
+       * 地图落点
+       */
+      setMarkers(makerList) {
+        let that = this
+        that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
+        for (let i in makerList) {
+          let longitude = makerList[i].lng
+          let latitude = makerList[i].lat
+          let marker = that.viewer.entities.add({
+            name: '',
+            position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+            billboard: {
+              image: iconList[makerList[i].icon],
+              width: 48,
+              height: 48,
+              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+              disableDepthTestDistance: Number.POSITIVE_INFINITY
+            },
+            description: makerList[i].bindPopupHtml,
+            click: makerList[i].click,
+            parameter: makerList[i].parameter
+          })
+          that.markerboxEntity.push(marker)
+        }
+        that.viewer.scene.globe.depthTestAgainstTerrain = false
+        that.createLeftClickDescription()
+        that.createRightClickDescription()
+      },
+      /**
+       *鼠标左击事件是原来的气泡
+       */
+      createLeftClickDescription() {
+        let that = this;
+        that.handler.setInputAction(function(movement) {
           that.pick = that.viewer.scene.pick(movement.position);
           if (that.pick && that.pick) {
             let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(
               movement.position).primitive.id);
 
             let html = id._description;
-            if (html != undefined && html._value != null && html._value != '') {
+            clearInterval(that.timer)
+            if (html != undefined && html._value != null && html._value != '' && html != 'cgq') {
               that.bindPopupHtml = html
               that.mapshow = true
+            } else if (html == 'cgq') {
+              that.timer = setInterval(function() {
+                var color = "green";
+                var value = Math.random();
+                var up = "▲";
+                var down = "▼";
+                if (value > 0.5) {
+                  color = "red";
+                  value = value + "" + up;
+                } else {
+                  value = value + "" + down;
+                }
+                that.bindPopupHtml = "<span style='color:" + color + "'>当前传感器数值: " + value + "</span>";
+              }, 1000)
+              that.mapshow = true
             } else {
               that.mapshow = false
+              clearInterval(that.timer)
             }
           } else {
             that.mapshow = false
+            clearInterval(that.timer)
           }
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-    },
-    /**
-     *鼠标右击事件是原来的点击
-     */
-    createRightClickDescription() {
-      let that = this;
-      that.handler.setInputAction(function (movement) {
-              that.mapshow = false
-        // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
-        that.pick = that.viewer.scene.pick(movement.position);
-        if (that.pick && that.pick) {
-          let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(movement.position).primitive.id);
-          let clickName = id._click;
-          that.$emit(clickName, id._parameter)
-        }
-      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
-    },
-    /**
-     * 落点定位
-     */
-    dropLocation(lat, lng) {
-      this.viewer.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
-      });
-    },
-    /**
-     * 地图画线(贴地)
-     */
-    setConnectList(connectList,color,withAlpha) {
-      let that = this
-      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
-      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
-      that.connectBoxEntity = that.viewer.entities.add({
-        Type: 'Polyline',
-        polyline: {
-          positions: Cesium.Cartesian3.fromDegreesArray(connectList),
-          clampToGround: true,//贴地 true,不贴地  false
-          width: 5,
-          material: material
-        }
-      })
-    },
-    /**
-     * 地图图形(贴地)
-     */
-    setGraphicsList(graphicsList,color,withAlpha) {
-      let that = this
-      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      },
+      /**
+       *鼠标右击事件是原来的点击
+       */
+      createRightClickDescription() {
+        let that = this;
+        that.handler.setInputAction(function(movement) {
+          that.mapshow = false
+          clearInterval(that.timer)
+          // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
+          that.pick = that.viewer.scene.pick(movement.position);
+          if (that.pick && that.pick) {
+            let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(
+              movement.position).primitive.id);
+            let clickName = id._click;
+            that.$emit(clickName, id._parameter)
+          }
+        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      },
+      /**
+       * 落点定位
+       */
+      dropLocation(lat, lng) {
+        this.viewer.camera.flyTo({
+          destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
+        });
+      },
+      /**
+       * 地图画线(贴地)
+       */
+      setConnectList(connectList, color, withAlpha) {
+        let that = this
+        //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
+        let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
+        that.connectBoxEntity = that.viewer.entities.add({
+          Type: 'Polyline',
+          polyline: {
+            positions: Cesium.Cartesian3.fromDegreesArray(connectList),
+            clampToGround: true, //贴地 true,不贴地  false
+            width: 5,
+            material: material
+          }
+        })
+      },
+      /**
+       * 地图图形(贴地)
+       */
+      setGraphicsList(graphicsList, color, withAlpha) {
+        let that = this
+        //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
 
-      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
-      that.graphicsBoxEntity = that.viewer.entities.add({
-        polygon: {
-          hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
-          clampToGround: true,//贴地 true,不贴地  false
-          width: 5,
-          material: material
-        }
-      })
-    }
+        let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
+        that.graphicsBoxEntity = that.viewer.entities.add({
+          polygon: {
+            hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
+            clampToGround: true, //贴地 true,不贴地  false
+            width: 5,
+            material: material
+          }
+        })
+      }
 
-  },
-}
+    },
+  }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
@@ -488,4 +514,4 @@ export default {
     opacity: 0;
     transform: translateY(-10rem);
   }
-</style>
+</style>

src/views/monitor.vue

@@ -455,7 +455,7 @@
                   lng: 124.59,
                   lat: 43.02,
                   icon: "marker",
-                  bindPopupHtml: "",
+                  bindPopupHtml: "cgq",
                   click: "",
                   parameter: "",
                   keepBindPopup: false,