区域地图

package.json

@@ -28,6 +28,7 @@
     "core-js": "^2.6.12",
     "crypto-js": "^4.0.0",
     "cstor-live-player": "^1.0.1",
+    "d3": "^6.7.0",
     "element-ui": "^2.13.2",
     "gcoord": "^0.3.1",
     "jquery": "^3.6.0",

src/components/3DMap/Map3D.vue

@@ -26,11 +26,11 @@
 -->
 
 <template>
-  <div class="full">
+  <div class="full" >
     <div class="full" id="viewer-container">
       <danger-circle :viewer="viewer" ref="dangerCircle"></danger-circle>
     </div>
-    <info-layer ref="infoLayer"
+    <info-layer ref="infoLayer" style="background: radial-gradient(transparent,rgba(0,0,0,0.1),rgba(0,0,0,0.5),rgba(0,0,0,1))"
       :box1="box1"
       :box2="box2"
     ></info-layer>
@@ -113,7 +113,8 @@ export default {
       // 隐藏logo
       this.viewer._cesiumWidget._creditContainer.style.display = "none";
        // viewer.scene.globe.show = false;   // 隐藏地球实体
-      // viewer.imageryLayers.removeAll();
+      // this.viewer.imageryLayers.removeAll();
+      // this.addBaiduLayer()
       this.viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("rgba(20,56,76,0.5)");
       this.viewer.scene.preRender.addEventListener(this.moveListener);
       // this.addGltf([113.682062,34.702187,0],'/demo/8H.gltf');
@@ -237,17 +238,15 @@ export default {
     },
     //绕点旋转
     round(){
-      const  center = Cesium.Cartesian3.fromDegrees(113.702062,34.702187);
-      let heading = Cesium.Math.toRadians(50.0);
-      const pitch = Cesium.Math.toRadians(-20.0);
-      const range = 5000.0;
-      let x=50;
       let _this = this;
+      let container = document.getElementById('viewer-container');
+      let center = this.viewer.scene.globe.pick(this.viewer.camera.getPickRay(new Cesium.Cartesian2(container.clientHeight/2,container.clientWidth/2)),this.viewer.scene);
+      let x= Cesium.Math.toDegrees(_this.viewer.camera.heading);
       this.viewer.scene.preUpdate.addEventListener( () => {
         if(_this.isRound){
-          x+=0.1;
-          heading = Cesium.Math.toRadians(x);
-          _this.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))
+           x+=0.1;
+          let  heading = Cesium.Math.toRadians(x);
+          _this.viewer.camera.move(heading, _this.viewer.camera.pitch,  _this.viewer.camera.roll);
         }
       });
     },
@@ -263,9 +262,9 @@ export default {
       //初始化弹框图层
       this.$refs['infoLayer'].onload();
       this.$refs['dangerCircle'].onLoad();
-      this.round();
+      // this.addBuildingData('/data/ningxia.json');
       //添加建筑矢量数据
-       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.702062,34.702187, 2000.0,0,-20.0,0.0);
     },

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="info-layer">
+  <div class="info-layer" style="overflow: hidden">
       <box1 v-if="initFlag"  v-for="(item,index) of box1" :title="item.title" :position="[item.y,item.x]" :data="item.data"></box1>
       <box2 v-if="initFlag"  v-for="(item,index) of box2" :title="item.title" :position="[item.y,item.x]" :data="item.data"></box2>
   </div>

src/components/3DMap/map-components/tools-bar/tools-bar.vue

@@ -11,6 +11,7 @@ export default {
   methods: {
     handleRound(){
       this.screen.$refs['map'].isRound = !this.screen.$refs['map'].isRound;
+      this.screen.$refs['map'].round();
     }
   },
 }

src/components/3DScene/3DScene.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="full" id="3DScene"></div>
+</template>
+
+<script>
+import * as d3 from 'd3';
+import * as Three from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+export default {
+  name: "Scene3D",
+  data(){
+    return{
+      camera: null,
+      scene: null,
+      renderer: null,
+      mesh: null,
+      controls: null
+    }
+  },
+  methods: {
+    //加载json文件
+    async addJson(url){
+      return new Promise((resolve, reject) => {
+        let loader = new Three.FileLoader();
+        loader.load(url,  (data) => {
+          resolve( JSON.parse(data));
+        });
+      } )
+    },
+    //添加天空盒子===》urls 6张方位图图片路径  //六张图片分别是朝前的（posz）、朝后的（negz）、朝上的（posy）、朝下的（negy）、朝右的（posx）和朝左的（negx）。
+    addSkyBox(urls){
+      let cubeTextureLoader = new Three.CubeTextureLoader();
+      let cubeTexture = cubeTextureLoader.load( urls);
+      this.scene.background = cubeTexture;
+    },
+    //添加平行光
+    addDirectionalLight(position,color=0xffffff){
+      //添加光源
+      let dirLight = new Three.DirectionalLight(color, 1)
+      dirLight.position.set(position[0], position[1], position[2]);
+      dirLight.castShadow = true //可以产生阴影
+      dirLight.shadow.mapSize = new Three.Vector2(1024, 1024)
+      this.scene.add(dirLight)
+    },
+    //添加gltf模型
+    addGltf(url){
+      let loader = new GLTFLoader();
+      loader.load( url,  (gltf) => {
+          this.scene.add(gltf.scene)
+          gltf.scene.traverse( function ( child ) {
+            if ( child.isMesh ) {
+              child.material.emissive =  child.material.color;
+              child.material.emissiveMap = child.material.map ;
+            }
+          } );
+        }, undefined,
+        ( error ) => {
+          console.error( error );
+        } );
+    },
+    //初始化场景
+    init() {
+      //挂载容器
+      let container = document.getElementById('3DScene');
+
+      //初始化相机
+      this.camera = new Three.PerspectiveCamera(50, container.clientWidth/container.clientHeight, 0.01, 1000000);
+      this.camera.position.z = 1000;
+      this.camera.position.x = 0;
+      this.camera.position.y = -200;
+
+      //初始化场景
+      this.scene = new Three.Scene();
+
+      //渲染器
+      this.renderer = new Three.WebGLRenderer({antialias: true});
+      this.renderer.setSize(container.clientWidth, container.clientHeight);
+      container.appendChild(this.renderer.domElement);
+      this.renderer.setClearColor('rgb(8,37,55)',0.5);
+
+      //坐标轴
+      let axes = new Three.AxisHelper(30000);
+      // this.scene.add(axes);
+
+      this.addDirectionalLight([1000,1000,1000]);
+      // this.addGltf('/demo/8H.gltf');
+      //控制器
+      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+      this.controls.enableDamping = true;
+    },
+    //每帧渲染调用
+    animate() {
+      requestAnimationFrame(this.animate);
+      this.controls.update();
+      this.renderer.render(this.scene, this.camera);
+    },
+    //添加网格地图
+    async addMap(url='/data/ningxia.json',center=[106.292249,37.206647],scale=8000){
+      const _this =this;
+      let json = await this.addJson(url)
+      // 墨卡托投影转换
+      const projection = d3.geoMercator().center(center).scale(scale).translate([0, 0]);
+      //地图对象模型（省份）
+      let map = new Three.Object3D();
+      json['features'].forEach(city => {
+        let City = new Three.Object3D();
+        city['geometry']['coordinates'].forEach(polygons => {
+          polygons.forEach(polygon => {
+            const shape = new Three.Shape();
+            let linePoints = [];
+            polygon.forEach((position,index) => {
+              const [x,y] = projection(position)
+              if(index==0){
+                shape.moveTo(x,y);
+              }
+              shape.lineTo(x,y);
+              linePoints.push(x,y);
+            })
+
+            const extrudeSettings = {
+              depth: 20,
+              bevelEnabled: false
+            };
+            const lineGeometry = new Three.BufferGeometry();
+            lineGeometry.attributes.position = new Three.BufferAttribute(new Float32Array(linePoints),2);
+            const geometry = new Three.ExtrudeGeometry(shape, extrudeSettings)
+            const material = new Three.MeshBasicMaterial({ color: '#02A1E2', transparent: true, opacity: 0.6 })
+            const material1 = new Three.MeshBasicMaterial({ color: '#3480c4', transparent: true, opacity: 0.5 })
+            const mesh = new Three.Mesh(geometry, [material, material1])
+            const lineMaterial = new Three.LineBasicMaterial({ color: '#02A1E2' });
+            const line = new Three.Line(lineGeometry, lineMaterial)
+            City.add(mesh);
+            City.add(line)
+          })
+        })
+
+        City.properties = city.properties;
+        if (city.properties.contorid) {
+          const [x, y] = projection(city.properties.contorid);
+          City.properties._centroid = [x, y];
+        }
+        console.log(City,55)
+      map.add(City)
+      })
+
+      _this.scene.add(map)
+
+
+    },
+  },
+
+  async mounted() {
+    const _this = this;
+    this.init();
+    this.animate();
+    await this.addMap();
+  }
+}
+</script>
+
+<style scoped>
+  .full{
+    width: 100%;
+    height: 100%;
+  }
+  .center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/components/scene/CityScreen.vue

@@ -1,31 +1,37 @@
 <template>
-  <div class="full" >
+  <div  class="full" >
 
     <!-- 数据面板1   -->
-    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 25%;top: 10%;left: 10px">
-      <div  id="community-tendency" style="height: 100%;width: 100%;"  ></div>
-    </dv-border-box-7>
+    <div style="position:absolute;width: 20%;height: 25%;top: 10%;left: 10px;overflow: hidden">
+      <dv-border-box-7 class="toRight full" :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" >
+        <div  id="community-tendency" style="height: 100%;width: 100%;"  ></div>
+      </dv-border-box-7>
+    </div>
+
     <!-- 数据面板2   -->
-    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 50%;top: 37%;left: 10px">
-      <div class="full center" style="flex-direction: column">
-        <div style="width: 90%;height: 7%;font-size: 20px;color: white;justify-content: left" class="center"> 公共事件</div>
-        <div style="width: 100%;height: 40%;" class="center">
-          <div style="width: 50%;height: 100%;" class="center">
-            <dv-active-ring-chart :config="eventOption" style="width:100%;height:90%" />
-          </div>
-          <div  style="width: 60%;height: 100%;flex-direction: column;color: white" class="center" >
-            <div v-for="(item,index) of eventList" style="width: 95%;height: 35px;" class="center">
-              <div style="width: 30%;height: 80%;background: rgba(39,128,128,0.8);border-radius: 5px" class="center">{{item.label}}</div>
-              <div style="width: 70%;height: 100%;font-size: 13px;font-style: italic;justify-content: left;text-indent: 5px" class="center">{{item.value}}</div>
+    <div style="position:absolute;width: 20%;height: 50%;top: 37%;left: 10px;overflow: hidden">
+      <dv-border-box-7 class="toRight full"  :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" >
+        <div class="full center" style="flex-direction: column">
+          <div style="width: 90%;height: 7%;font-size: 20px;color: white;justify-content: left" class="center"> 公共事件</div>
+          <div style="width: 100%;height: 40%;" class="center">
+            <div style="width: 50%;height: 100%;" class="center">
+              <dv-active-ring-chart :config="eventOption" style="width:100%;height:90%" />
+            </div>
+            <div  style="width: 60%;height: 100%;flex-direction: column;color: white" class="center" >
+              <div v-for="(item,index) of eventList" style="width: 95%;height: 35px;" class="center">
+                <div style="width: 30%;height: 80%;background: rgba(39,128,128,0.8);border-radius: 5px" class="center">{{item.label}}</div>
+                <div style="width: 70%;height: 100%;font-size: 13px;font-style: italic;justify-content: left;text-indent: 5px" class="center">{{item.value}}</div>
+              </div>
             </div>
           </div>
+          <dv-scroll-board :config="dataConfigA" style="width: 98%;height: 50%" />
         </div>
-        <dv-scroll-board :config="dataConfigA" style="width: 98%;height: 50%" />
-      </div>
-    </dv-border-box-7>
+      </dv-border-box-7>
+    </div>
 
     <!-- 数据面板3   -->
-    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 25%;top: 10%;right: 10px">
+    <div style="position:absolute;width: 20%;height: 25%;top: 10%;right: 10px;overflow: hidden">
+      <dv-border-box-7 class="toLeft full" :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" >
       <div class="full center" style="height: 100%">
         <div style="position: absolute;width: 90%;height: 20%;color: white;top:0;font-size: 18px;justify-content: left" class="center">社会安全</div>
         <div style="width: 40%;height: 100%;" class="center">
@@ -39,49 +45,56 @@
         </div>
       </div>
     </dv-border-box-7>
+    </div>
 
     <!-- 数据面板4   -->
-    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 25%;top: 37%;right: 10px">
-      <div class="full center" style="flex-direction: column">
-        <div style="width: 90%;height: 15%;color: white;font-size: 18px">公共卫生事件影响人数</div>
-        <dv-capsule-chart :config="trafic" style="width: 90%;height: 85%" />
-      </div>
-    </dv-border-box-7>
+    <div style="position:absolute;width: 20%;height: 25%;top: 37%;right: 10px;overflow: hidden">
+      <dv-border-box-7 class="full toLeft" :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" >
+        <div class="full center" style="flex-direction: column">
+          <div style="width: 90%;height: 15%;color: white;font-size: 18px">公共卫生事件影响人数</div>
+          <dv-capsule-chart :config="trafic" style="width: 90%;height: 85%" />
+        </div>
+      </dv-border-box-7>
+    </div>
 
     <!-- 数据面板5   -->
-    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 28%;top: 64%;right: 10px">
-      <div class="full center" style="flex-direction: column">
-        <div style="width: 90%;height: 10%;justify-content: left;color: white;font-size: 20px" class="center">
-          公共卫生
-        </div>
-        <div class="center" style="width: 100%;height: 90%">
-          <div  style="height: 100%;width: 50%;flex-direction: column" class="center">
-            <div v-for="(item,index) of medicalList" style="width: 95%;height: 35px;" class="center">
-              <div style="width: 70%;height: 100%;font-size: 13px;font-style: italic;justify-content: left;text-indent: 5px;color: #dddddd" class="center">{{item.value}}</div>
-              <div style="width: 30%;height: 80%;background: rgb(125,128,39);border-radius: 5px" class="center">{{item.label}}</div>
+    <div style="position:absolute;width: 20%;height: 28%;top: 64%;right: 10px;overflow: hidden">
+      <dv-border-box-7 class="toLeft full"  :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" >
+        <div class="full center" style="flex-direction: column">
+          <div style="width: 90%;height: 10%;justify-content: left;color: white;font-size: 20px" class="center">
+            公共卫生
+          </div>
+          <div class="center" style="width: 100%;height: 90%">
+            <div  style="height: 100%;width: 50%;flex-direction: column" class="center">
+              <div v-for="(item,index) of medicalList" style="width: 95%;height: 35px;" class="center">
+                <div style="width: 70%;height: 100%;font-size: 13px;font-style: italic;justify-content: left;text-indent: 5px;color: #dddddd" class="center">{{item.value}}</div>
+                <div style="width: 30%;height: 80%;background: rgb(125,128,39);border-radius: 5px" class="center">{{item.label}}</div>
+              </div>
             </div>
+            <div style="width:50%;height:100%" id="ziyuan"></div>
           </div>
-          <div style="width:50%;height:100%" id="ziyuan"></div>
         </div>
-      </div>
-    </dv-border-box-7>
+      </dv-border-box-7>
+    </div>
 
     <!-- 数据面板7  路况   -->
-    <div style="background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));position:absolute;width: 10%;height: 20%;top: 75%;right: 22%;color: white">
-      <div class="full center">
+    <div  style="position:absolute;width: 10%;height: 20%;top: 75%;right: 22%;color: white;overflow: hidden">
+      <div class="full center toTop" style="background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));">
         <div id="round1" class="full"></div>
       </div>
     </div>
-    <div style="background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));position:absolute;width: 10%;height: 20%;top: 75%;left: 22%;color: white">
-      <div class="full center">
+    <div style="position:absolute;width: 10%;height: 20%;top: 75%;left: 22%;color: white;overflow: hidden">
+      <div class="full center toTop" style="background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));">
         <div id="round2" class="full"></div>
       </div>
     </div>
 
     <!-- 数据面板8  趋势   -->
-    <div style="position:absolute;width: 36%;height: 20%;top: 70%;right: 32%;color: white;background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0))">
-      <div class="full center">
-        <div  id="accident" style="height: 100%;width: 100%"></div>
+    <div style="position:absolute;width: 36%;height: 20%;top: 70%;right: 32%;color: white;overflow: hidden">
+      <div style="background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));" class="full toTop">
+        <div class="full center">
+          <div  id="accident" style="height: 100%;width: 100%"></div>
+        </div>
       </div>
     </div>
 

src/components/scene/EpidemicScreen.vue

@@ -135,16 +135,16 @@
               headerBGC: '#005b3a',
               align: ['center','center','center','center','center','center'],
               data: [
-                ['城关镇', '8', '<span style=\"color:#3dff11;\">7</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
-                ['韩庄镇', '11', '<span style=\"color:#3dff11;\">8</span>','<span style=\"color:#dd0f36;\">1</span>','低风险','Ⅳ级'],
-                ['白营镇', '7', '<span style=\"color:#3dff11;\">5</span>','<span style=\"color:#dd0f36;\">1</span>','低风险','Ⅳ级'],
-                ['古贤镇', '5', '<span style=\"color:#3dff11;\">5</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
-                ['菜园镇', '2', '<span style=\"color:#3dff11;\">1</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
-                ['任固镇', '4', '<span style=\"color:#3dff11;\">1</span>','<span style=\"color:#dd0f36;\">1</span>','低风险','Ⅳ级'],
-                ['五陵镇', '4', '<span style=\"color:#3dff11;\">3</span>','<span style=\"color:#dd0f36;\">1</span>','低风险','Ⅳ级'],
-                ['瓦岗乡', '6', '<span style=\"color:#3dff11;\">4</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
-                ['伏道镇', '1', '<span style=\"color:#3dff11;\">1</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
-                ['宜沟镇', '3', '<span style=\"color:#3dff11;\">3</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
+                ['城关镇', '0', '<span style=\"color:#3dff11;\">0</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
+                ['韩庄镇', '0', '<span style=\"color:#3dff11;\">0</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
+                ['白营镇', '0', '<span style=\"color:#3dff11;\">0</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
+                ['古贤镇', '0', '<span style=\"color:#3dff11;\">0</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
+                ['菜园镇', '0', '<span style=\"color:#3dff11;\">0</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
+                ['任固镇', '0', '<span style=\"color:#3dff11;\">0</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
+                ['五陵镇', '0', '<span style=\"color:#3dff11;\">0</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
+                ['瓦岗乡', '0', '<span style=\"color:#3dff11;\">0</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
+                ['伏道镇', '0', '<span style=\"color:#3dff11;\">0</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
+                ['宜沟镇', '0', '<span style=\"color:#3dff11;\">0</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
               ],
               oddRowBGC: 'rgba(0,78,50,0.2)',
               evenRowBGC: 'rgba(127,127,127,0.2)',

src/styles/element-ui.scss

@@ -1,3 +1,27 @@
+.toRight{
+  animation: to-right 0.5s ;
+}
+@keyframes to-right {
+  from{
+    transform: translate(-100%,0);
+  }
+}
+.toLeft{
+  animation: to-left 0.5s ;
+}
+@keyframes to-left {
+  from{
+    transform: translate(100%,0);
+  }
+}
+.toTop{
+  animation: to-top 0.5s ;
+}
+@keyframes to-top {
+  from{
+    transform: translate(0,100%);
+  }
+}
 
 .el-dropdown-menu__item {
   font-size: 12px !important;

src/views/demo/test.vue

@@ -1,62 +1,20 @@
 <template>
-  <div id="container" style="width: 100%;height: 100%;"></div>
+    <div style="width: 100%;height: 100%;">
+      <scene3-d></scene3-d>
+    </div>
 </template>
 
 <script>
-import * as Three from 'three'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import Scene3D from "../../components/3DScene/3DScene";
 export default {
   name: 'test',
-  data() {
-    return {
-      camera: null,
-      scene: null,
-      renderer: null,
-      mesh: null
-    }
-  },
-  methods: {
-    init() {
-      let container = document.getElementById('container');
-      this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
-      this.camera.position.z = 1;
-      this.scene = new Three.Scene();
-      this.renderer = new Three.WebGLRenderer({antialias: true});
-      this.renderer.setClearColor('rgb(135,206,250)',1.0);
-      // Instantiate a loader
-      let loader = new GLTFLoader();
-      this.renderer.setSize(container.clientWidth, container.clientHeight);
-      container.appendChild(this.renderer.domElement);
-      loader.load( '/demo/8H.gltf',  (gltf) => {
-
-          this.scene.add(gltf.scene)
-          gltf.scene.traverse( function ( child ) {
-            if ( child.isMesh ) {
-              child.material.emissive =  child.material.color;
-              child.material.emissiveMap = child.material.map ;
-            }
-          } );
-        }, undefined,
-      ( error ) => {
-        console.error( error );
-      } );
-
-    },
-    animate() {
-      requestAnimationFrame(this.animate);
-      // this.camera.position.x += 0.01;
-      // this.camera.position.y += 0.02;
-      this.renderer.render(this.scene, this.camera);
-    }
-  },
-  mounted() {
-    this.init();
-    this.animate()
-  }
+  components: {Scene3D},
 }
 </script>
 
 <style scoped>
-
+  .full{
+    width: 100%;
+    height: 100%;
+  }
 </style>

src/views/grid/mainScreen.vue

@@ -22,7 +22,7 @@
     </div>
 
     <!-- 场景数据面板    -->
-    <city-screen v-if="scene==0"></city-screen>
+    <city-screen  v-if="scene==0"></city-screen>
     <trafic-screen @videoShow="handleMonitorClick" v-if="scene==1"></trafic-screen>
     <event-screen @videoShow="handleMonitorClick" v-if="scene==2"></event-screen>
     <government-affairs @videoShow="handleMonitorClick" v-if="scene==3"></government-affairs>
@@ -95,15 +95,7 @@ export default {
     handleDevice(index){
       this.scene = index;
       switch (index){
-        case 0:
-          this.$refs['map'].toLayer('ss');
-          break;
-        case 1:
-          this.$refs['map'].toLayer('monitoring');
-          break;
-        case 2:
-          this.$refs['map'].toLayer('event');
-          break;
+
         default: ;
       }
     },