修改界面自适应

src/jlmap3d/config/Render.js

@@ -1,6 +1,12 @@
 export function SetRender(dom) {
+  console.log(dom.clientWidth);
+  console.log(dom.clientHeight);
+  console.log(dom.innerWidth);
+  console.log(dom.innerHeight);
+  console.log(dom.offsetWidth);
+  console.log(dom.offsetHeight);
   var renderer = new THREE.WebGLRenderer({antialias: true});
-  renderer.setSize(dom.clientWidth, dom.clientHeight);
+  renderer.setSize(dom.offsetWidth, dom.offsetHeight);
-  renderer.setSize( window.innerWidth, window.innerHeight );
+  //renderer.setSize( window.innerWidth, window.innerHeight );
   return renderer;
 }

src/jlmap3d/jl3dsimulation/jl3dsimulation.js

@@ -48,7 +48,9 @@ export function JLmapDriving(dom, data,skinStyle) {
   this.animateswitch = false;
   //初始化webgl渲染
   let renderer = SetRender(dom);
-  dom.appendChild(renderer.domElement);
+  renderer.domElement.style.position = "absolute";
+  renderer.domElement.style.top = "0";
+  document.getElementById('jlsimulation').appendChild(renderer.domElement);
   //定义相机
   let camera = SetCamera(dom);
   //定义场景(渲染容器)
@@ -85,7 +87,7 @@ export function JLmapDriving(dom, data,skinStyle) {
   //地图模型数据
   let mapdata = new Jl3ddata();
 
-  let camera2 = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
+  let camera2 = new THREE.PerspectiveCamera( 60,window.innerWidth / window.innerHeight, 1, 2000 );
 	camera2.name = "camera2";
 
   let controls3 = new MouseControls(camera2, 1.6);

src/jlmap3d/jlmap3d.js

@@ -48,7 +48,9 @@ export function JLmap3d(dom, data,skinStyle) {
   this.animateswitch = false;
   //初始化webgl渲染
   let renderer = SetRender(dom);
-  dom.appendChild(renderer.domElement);
+  renderer.domElement.style.position = "absolute";
+  renderer.domElement.style.top = "0";
+  document.getElementById('testjlmap3d').appendChild(renderer.domElement);
   //定义相机
   let camera = SetCamera(dom);
   //定义场景(渲染容器)

src/views/jlmap3d/index.vue

@@ -116,7 +116,7 @@
       },
       init: function (skinStyle) {
         let mapdata = this.$store.getters['map/map'];
-        let dom = document.getElementById('testjlmap3d');
+        let dom = document.getElementById('app');
         this.jlmap3d = new JLmap3d(dom, mapdata, skinStyle);
         this.jlmap3d.eventon();
       },
@@ -227,8 +227,6 @@
   }
 
   #testjlmap3d {
-    width: 937px;
-    height: 937px;
   }
 
   .jalmap3ddiv {
@@ -244,7 +242,8 @@
     //left:20%;
     width: 100%;
     height: 100%;
-    z-index: 0;
+    position:absolute;
+    z-index: -1;
   }
 
   #canvastexture {

src/views/jlmap3d/simulation/jl3dsimulation.vue

@@ -160,7 +160,7 @@
       },
       init: function (skinStyle) {
         let mapdata = this.$store.getters['map/map'];
-        let dom = document.getElementById('jlsimulation');
+        let dom = document.getElementById('app');
         this.jlmap3d = new JLmapDriving(dom, mapdata, skinStyle);
         this.jlmap3d.eventon();
 
@@ -291,7 +291,8 @@
     //left:20%;
     width: 100%;
     height: 100%;
-    z-index: 0;
+    position:absolute;
+    z-index: -1;
   }
 
   #canvastexture {