Merge remote-tracking branch 'origin/visu_firecontrol_01_siping_2.5d' into visu_firecontrol_01_siping_2.5d

src/components/supermap-2.5d.vue

@@ -1,5 +1,18 @@
 <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" /></span>
+        </div>
+        <div class="map-txt" v-html="bindPopupHtml">
+        </div>
+      </div>
+    </transition>
+    <!--地图top 显示 结束-->
+  </div>
 </template>
 
 <script>
@@ -13,6 +26,8 @@ export default {
   name: 'supermap-2.5d',
   data() {
     return {
+        bindPopupHtml: null,
+        mapshow: false,
       superMapRootUrl:null,
       viewer:null,
       scene:null,
@@ -171,7 +186,7 @@ export default {
           //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
           invisibility:true
         }),
-        infoBox:true,
+        infoBox:false,
         navigation: false
       }, {
         contextOptions: {
@@ -336,6 +351,21 @@ export default {
     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);
     },
     /**
@@ -344,6 +374,7 @@ export default {
     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) {
@@ -449,3 +480,63 @@ export default {
   },
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .map-tit {
+    position: absolute;
+    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;
+      }
+    }
+
+    .map-txt {
+      padding: 10px 15px;
+      color: #fff;
+      line-height: 20px;
+      font-size: 12px;
+
+      .d-l-con {}
+    }
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: 1s;
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+    transform: translateY(-10rem);
+  }
+</style>