构造大屏组件

src/components/3DMap/Map3D.vue

@@ -33,6 +33,7 @@
 <script>
  import InfoLayer from "./map-components/InfoLayer";
  let viewer = undefined;
+ let scratch = new Cesium.Cartesian2();
 export default {
   name: "Map3D",
   components: {InfoLayer},
@@ -86,14 +87,15 @@ export default {
       this.$viewer = viewer;
       // 隐藏logo
       viewer._cesiumWidget._creditContainer.style.display = "none";
-      viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("rgba(20,56,76,0.5)");
+
       // viewer.imageryLayers.removeAll();
       // viewer.imageryLayers.addImageryProvider(
       //   new Cesium.BaiduImageryProvider({
-      //     style: 'midnight',
+      //     style: 'normal',
       //     crs: 'WGS84'
       //   })
       // );
+      viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("rgba(20,56,76,0.5)");
       viewer.scene.preRender.addEventListener(this.moveListener);
     },
     //添加建筑矢量数据，url为建模json数据
@@ -150,6 +152,16 @@ export default {
         }
       );
     },
+    //添加百度地图地图
+    addBaiduLayer(){
+      viewer.imageryLayers.removeAll();
+      viewer.imageryLayers.addImageryProvider(
+        new Cesium.BaiduImageryProvider({
+          style: 'midnight',
+          crs: 'WGS84'
+        })
+      );
+    },
     //添加图标覆盖物(多个)
     addBillBoards(element,option= {},layerId){
      let layer =  new Cesium.BillboardCollection(option);
@@ -175,19 +187,20 @@ export default {
     },
     //屏幕坐标转化
     convertScreen(position){
-      let scratch = new Cesium.Cartesian2();
       return viewer.scene.cartesianToCanvasCoordinates(
-        Cesium.Cartesian3.fromDegrees(position[0], position[1]),
-        scratch
+        Cesium.Cartesian3.fromDegrees(position[0], position[1], 0),
+        new Cesium.Cartesian2()
       );
     },
     //相机移动事件
     moveListener(){
+
       this.positionListenerList.forEach(item => {
-          let location = this.convertScreen(item.position);
-          item.x = location.x-300;
-          item.y = location.y-300;
-        console.log(item)
+        let location = this.convertScreen(item.position);
+        if(Cesium.defined(location)) {
+            item.x = location.x;
+            item.y = location.y;
+          }
       })
     },
     //添加坐标监控
@@ -203,7 +216,7 @@ export default {
       //初始化弹框图层
       this.$refs['infoLayer'].onload();
       //添加建筑矢量数据
-      this.addBuildingData('http://139.9.103.171/mapData/zhengzhou/tileset.json')
+       this.addBuildingData('http://139.9.103.171/mapData/zhengzhou/tileset.json')
       //定位建筑群位置
       this.flyToPosition(113.682062,34.662187, 2000.0,0,-20.0,0.0);
     },

src/components/3DMap/map-components/InfoLayer.vue

@@ -1,20 +1,25 @@
 <template>
   <div class="info-layer">
-      <box1 v-if="initFlag" v-for="(item,index) of box1" :title="item.title" :position="[screen.$refs['map'].positionListenerList[index].y,screen.$refs['map'].positionListenerList[index].x]" :data="item.data"></box1>
+      <box1 v-if="initFlag"  v-for="(item,index) of box1" :title="item.title" :position="[screen.$refs['map'].positionListenerList[index].y,screen.$refs['map'].positionListenerList[index].x]" :data="item.data"></box1>
+      <box2 v-if="initFlag"  v-for="(item,index) of box2" :title="item.title" :position="[screen.$refs['map'].positionListenerList[index].y,screen.$refs['map'].positionListenerList[index].x]" :data="item.data"></box2>
   </div>
 </template>
 
 <script>
 import Box1 from "./infobox/box1";
+import Box2 from "./infobox/box2";
 export default {
   name: "InfoLayer",
-  components: {Box1},
+  components: {Box1,Box2},
   inject: ['screen'],
   data(){
     return{
       initFlag: false,
       box1: [
-        {position: [113.682062,34.662187]}
+        // {position: [113.682062,34.702187],title: '汤阴小学',data:[{label: '地点' , value: '汤阴县'},{label: '联系方式' , value: '4664-858585'}]}
+      ],
+      box2: [
+          {position: [113.682062,34.702187]}
       ]
     }
   },
@@ -23,7 +28,7 @@ export default {
 
     onload(){
       this.initFlag = true;
-      this.putPosition(this.box1);
+      this.putPosition(this.box2);
     },
 
     putPosition(boxList){

src/components/3DMap/map-components/infobox/box1.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="box1" :style="{
-      top: position[0]+'px',
+      top: position[0]-300+'px',
       left: position[1]+ 'px'
     }">
       <div class="wrap">
@@ -33,6 +33,7 @@
         </div>
       </div>
       <div class="line"></div>
+      <div class="" style="position: absolute;bottom: 0;left: 0;width: 10px;height: 10px;border-radius: 50%;background: radial-gradient(#00ffff,#004480,#02004a)"></div>
     </div>
 </template>
 
@@ -67,8 +68,6 @@ export default {
   height: 300px;
   position: absolute;
   /*background: #ffffff;*/
-  top: 30%;
-  left: 30%;
 }
 .wrap{
   width: 250px;
@@ -103,4 +102,15 @@ export default {
   margin-left: 30px;
   background-image: linear-gradient(135deg, transparent 25px, #2299c4 25px);
 }
+.changColor{
+  animation: color 0.2s linear infinite;
+}
+@keyframes color {
+  from{
+    background: radial-gradient(red, #ff00e5)
+  }
+  to{
+    background: radial-gradient(blue,red)
+  }
+}
 </style>

src/components/3DMap/map-components/infobox/box2.vue

@@ -0,0 +1,37 @@
+<template>
+  <div id="box2" :style="{
+      top: position[0]-300+'px',
+      left: position[1]+ 'px'
+    }">
+    <div style="position: absolute;bottom: 0;left: 0;background: url('')"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "box2",
+  props: {
+    title: {
+      type: "String",
+      default: '建筑'
+    },
+    data: {
+      type: "Array",
+      default: []  //[ {label: '姓名' , value: '梁汉强'}]
+    },
+    position: {
+      type: "Array",
+      default: [0,0]
+    }
+  }
+}
+</script>
+
+<style scoped>
+  #box2{
+    width: 300px;
+    height: 300px;
+    background: blue;
+    position: absolute;
+  }
+</style>

src/views/grid/mainScreen.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="full" style="background: #235e70">
-<!--    <info-box1></info-box1>-->
+  <div id="con" class="full">
     <dv-loading v-if="false" style="color: #dddddd"> 数据加载中 </dv-loading>
 
     <!--  自定义地图  -->
     <map3-d ref="map" @MonitorClick="handleMonitorClick" ></map3-d>
 
+    <!-- 地图切换按钮-->
+    <el-button style="position: absolute;top: 6%;left: 30%" @click="handleMap">切换地图</el-button>
+
     <!--  顶部导航栏  -->
     <div class="center title" style="width: 100%;height: 7%;position: absolute;top: 0">
       <div style="width: 30%;height: 100%" >
@@ -104,7 +106,11 @@ export default {
           break;
         default: ;
       }
-    }
+    },
+    handleMap(){
+      this.$refs['map'].addBaiduLayer();
+      this.$refs['map'].addBuildingData('http://139.9.103.171/mapData/zhengzhou/tileset.json');
+    },
   },
 }
 </script>

src/views/grid/screen.vue

@@ -1,12 +1,40 @@
 <template>
   <div style="width: 100%;height: 100%">
-    <iframe width="100%"  height="100%" src="http://139.9.103.171:1888/#/wel/smartCommunity"></iframe>
+    <div style="width: 100%;height: 100%" id="container"></div>
+    <div style="width: 100px;height: 100px;background: #00f9cf;position: absolute" :style="{
+      top: top+'px',
+      left: left+'px',
+    }"></div>
   </div>
 </template>
 
 <script>
+  let viewer = undefined;
 export default {
-  name: "screen"
+  name: "screen",
+  data(){
+    return{
+      top:0,
+      left: 0
+    }
+  },
+  mounted() {
+     viewer = new Cesium.Viewer("container");
+    viewer.scene.preRender.addEventListener(this.moveListener);
+  },
+  methods: {
+    moveListener(){
+        var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
+        var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
+          position,
+          new Cesium.Cartesian2()
+        );
+        if (Cesium.defined(canvasPosition)) {
+         this.top = canvasPosition.y-100 ;
+          this.left = canvasPosition.x ;
+        }
+    },
+  }
 }
 </script>