弹出气泡

src/assets/styles/base.scss

@@ -1367,7 +1367,7 @@ div::-webkit-scrollbar {
 
         h4 {
           display: flex;
-          color: #04080c;
+          color: #ffffff;
         }
       }
     }

src/components/supermap-2.5d.vue

@@ -1,29 +1,54 @@
 <template>
-    <div id="cesium-container" style="width: 100%; height: 100%;background: none;">
-
-    </div>
-
+  <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" /></span>
+        </div>
+        <div class="map-txt" v-html="bindPopupHtml">
+        </div>
+      </div>
+    </transition>
+    <!--地图top 显示 结束-->
+  </div>
 </template>
-<script>
-  import {
-    iconList,
-  } from '@/api/components/supermap.js'
-	export default {
-		name: 'sookaSuperMap',
-		data() {
-			return {
-        viewer:null,
-        scene:null,
-        handler:null,
 
-        pick:null,
-        back_position:null,
-        content:null,
-        stkTerrainProvider:null,
-
-        aac:null,//定时
-        /*************************原地图属性*********************/
-        isEditableLayers: false, //绘图控件
+<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 {
+        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: [],//地图落点实体
+      markerboxEntityRadius: [],//地图落点实体
+      connectBoxEntity: null,//地图线实体
+      graphicsBoxEntity: null,//地图面实体
+      connectBoxEntityTwo: null,//地图线实体
+      /*************************原地图属性*********************/
+      isEditableLayers: false, //绘图控件
 
       /*************************原地图属性*********************/
       aac:null,
@@ -36,7 +61,7 @@
   },
   watch: {},
   created() {
-    this.superMapInfo();
+      this.superMapInfo();
   },
   mounted() {
   },
@@ -47,86 +72,19 @@
       this.viewer.entities.removeAll()
     },
     //移除之前添加的点
-    clearMRadius() {
-      if (this.markerboxEntityRadius != null) {
-        this.viewer.entities.remove(this.markerboxEntityRadius)
-        this.markerboxEntityRadius = []
-      }
-    },
-    //移除之前添加的线
-    clearTwoC() {
-      if (this.connectBoxEntityTwo != null) {
-        this.viewer.entities.remove(this.connectBoxEntityTwo)
-        this.connectBoxEntityTwo = null
-      }
-    },
-    /**
-     * 地图落点-覆盖范围
-     */
-    setMarkersRadius(makerList) {
-      let that = this
-      that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
-      clearInterval(that.aac)
-      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)
-        //绘制摄像头的圈（覆盖范围）
-        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.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.viewer.entities.remove(this.markerboxEntity)
         this.markerboxEntity = []
       }
     },
+    //移除之前添加的点
+    clearMRadius() {
+      if (this.markerboxEntityRadius != null) {
+        this.viewer.entities.remove(this.markerboxEntityRadius)
+        this.markerboxEntityRadius = []
+      }
+    },
     //移除之前添加的线
     clearC() {
       if (this.connectBoxEntity != null) {
@@ -134,6 +92,13 @@
         this.connectBoxEntity = null
       }
     },
+    //移除之前添加的线
+    clearTwoC() {
+      if (this.connectBoxEntityTwo != null) {
+        this.viewer.entities.remove(this.connectBoxEntityTwo)
+        this.connectBoxEntityTwo = null
+      }
+    },
     //移除之前添加的面
     clearG() {
       if (this.graphicsBoxEntity != null) {
@@ -214,16 +179,16 @@
 
       //开始加载专题图等数据，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,
-        // });
+        // 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";
@@ -236,16 +201,16 @@
         //   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,
-        });
+        // //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";
@@ -261,9 +226,9 @@
         // 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);
+        // 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({
@@ -322,6 +287,21 @@
     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 != '') {
+              that.bindPopupHtml = html
+              that.mapshow = true
+            } else {
+              that.mapshow = false
+            }
+          } else {
+            that.mapshow = false
+          }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
     /**
@@ -330,6 +310,7 @@
     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) {
@@ -346,161 +327,211 @@
       let that = this;
       that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
 
-        for (let i in makerList) {
-          let longitude = makerList[i].lng;
-          let latitude = makerList[i].lat;
-          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.viewer.scene.globe.depthTestAgainstTerrain=false;
-        that.createLeftClickDescription_cgq();
-      },
-      /**
-       *鼠标左击事件是原来的气泡(传感器)
-       */
-      createLeftClickDescription_cgq() {
-        let that = this;
-        clearInterval(that.aac);
-        that.handler.setInputAction(function (movement) {
-          that.aac = setInterval(function (){
-            let color = "green";
-            let value = Math.random();
-            let up = "▲";
-            let down = "▼";
-            if(value>0.5){
-              color = "red";
-              value = value +""+ up;
-            }else{
-              value = value +""+ down;
-            }
-            let html = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
-            window.parent.frames[0].document.querySelector(".cesium-infoBox-description").innerHTML = html;
-          },1000);
-        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-      },
-      /**
-       *鼠标右击事件是原来的点击
-       */
-      createRightClickDescription() {
-        let that = this;
-        that.handler.setInputAction(function (movement) {
-          // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口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)
+      for (let i in makerList) {
+        let longitude = makerList[i].lng;
+        let latitude = makerList[i].lat;
+        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.viewer.scene.globe.depthTestAgainstTerrain=false;
+      that.createLeftClickDescription_cgq();
+    },
+    /**
+     *鼠标左击事件是原来的气泡(传感器)
+     */
+    createLeftClickDescription_cgq() {
+      let that = this;
+      clearInterval(that.aac);
+      that.handler.setInputAction(function (movement) {
+        that.aac = setInterval(function (){
+          let color = "green";
+          let value = Math.random();
+          let up = "▲";
+          let down = "▼";
+          if(value>0.5){
+            color = "red";
+            value = value +""+ up;
+          }else{
+            value = value +""+ down;
           }
-        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
-      },
-      /**
-       * 落点定位
-       */
-      dropLocation(lat, lng) {
-        this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
+          let html = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
+          window.parent.frames[0].document.querySelector(".cesium-infoBox-description").innerHTML = html;
+        },1000);
+      }, Cesium.ScreenSpaceEventType.LEFT_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
+        }
+      })
+    },
+    /**
+     * 地图落点-覆盖范围
+     */
+    setMarkersRadius(makerList) {
+      let that = this
+      that.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
+      clearInterval(that.aac)
+      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)
+        //绘制摄像头的圈（覆盖范围）
+        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.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
+        }
+      })
+    },
+    /**
+     * 地图图形(贴地)
+     */
+    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
+        }
+      })
     }
-	}
+  },
+}
 </script>
 
-<style lang="scss" scoped>
-	@import '@/assets/styles/base.scss';
-
-  input[type=checkbox] {
-    margin: 0px 4px 0 0px;
-  }
-
-  label {
-    display: inline-block;
-  }
-
-  .param-container {
-    border: none;
-  }
-
-  .titleBox {
-    margin-bottom: 0px;
-  }
-
-  .sm-div-graphic {
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .map-tit {
     position: absolute;
-    color: #fff;
-    font-size: 14px;
-  }
-
-  #test .divpoint {
-    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
-    background-size: cover;
-    width: 128px;
-    height: 216px;
-  }
-
-  #test3 .divpoint {
-    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
-    background-size: cover;
-    width: 230px;
-    height: 150px;
-  }
-
-  #test .label-wrap {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    height: 50px;
-  }
-
-  #test3 .label-wrap {
-    padding-left: 100px;
-    padding-top: 8px;
-    box-sizing: border-box;
-  }
-
-  #test .pop-title {
-    color: #fff;
-    margin-top: 11px;
-    margin-bottom: 4px;
-    display: flex;
-    align-items: center;
-    font-size: 18px;
-  }
+    top: 90px;
+    left: 50%;
+    transform: translatex(-50%);
+    border: 1px solid #15519b;
+    z-index: 9999;
+    background: linear-gradient(rgba(4, 23, 62, 0.6), rgba(0, 28, 70, 0.6));
+    min-width: 300px;
+
+    .top-tit {
+      width: 100%;
+      height: 28px;
+      line-height: 28px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      background: #15519b80;
+      padding: 0px 10px;
+      align-items: center;
+
+      i {
+        color: #10ccff;
+        font-size: 18px;
+        text-shadow: 0px 0px 5px #23b3b3;
+        ;
+      }
 
+      span img {
+        display: block;
+        width: 12px;
+        height: 12px;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
 
-  #test .data-li {
-    font-size: 14px;
-    margin-top: 15px;
-    margin-bottom: 5px;
-  }
+    .map-txt {
+      padding: 10px 15px;
+      color: #fff;
+      line-height: 20px;
+      font-size: 12px;
 
-  #test3 .data-li {
-    font-size: 14px;
-    margin-top: 6px;
+      .d-l-con {}
+    }
   }
 
-  #test2 .divpoint {
-    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
-    background-size: cover;
-    width: 116px;
-    height: 120px;
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: 1s;
   }
 
-  #test2 .label-wrap {
-    box-sizing: border-box;
-    padding-top: 10px;
-    padding-left: 51px;
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+    transform: translateY(-10rem);
   }
-
 </style>