From 5899fe134740d2c0f8b6cb0b04f4a081637212fc Mon Sep 17 00:00:00 2001
From: sunzhenyu <sunzhenyu@joylink.club>
Date: Wed, 7 Aug 2019 11:28:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=95=8C=E9=9D=A2=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/jlmap3d/config/Render.js                    | 10 ++++++++--
 src/jlmap3d/jl3dsimulation/jl3dsimulation.js    |  6 ++++--
 src/jlmap3d/jlmap3d.js                          |  4 +++-
 src/views/jlmap3d/index.vue                     |  7 +++----
 src/views/jlmap3d/simulation/jl3dsimulation.vue |  5 +++--
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/jlmap3d/config/Render.js b/src/jlmap3d/config/Render.js
index afa9b038b..19b1364bc 100644
--- a/src/jlmap3d/config/Render.js
+++ b/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( window.innerWidth, window.innerHeight );
+  renderer.setSize(dom.offsetWidth, dom.offsetHeight);
+  //renderer.setSize( window.innerWidth, window.innerHeight );
   return renderer;
 }
diff --git a/src/jlmap3d/jl3dsimulation/jl3dsimulation.js b/src/jlmap3d/jl3dsimulation/jl3dsimulation.js
index 0cf240c18..a7dd16443 100644
--- a/src/jlmap3d/jl3dsimulation/jl3dsimulation.js
+++ b/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);
diff --git a/src/jlmap3d/jlmap3d.js b/src/jlmap3d/jlmap3d.js
index 18034e588..4788ed9b8 100644
--- a/src/jlmap3d/jlmap3d.js
+++ b/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);
   //定义场景(渲染容器)
diff --git a/src/views/jlmap3d/index.vue b/src/views/jlmap3d/index.vue
index dd791e92b..cc26b88d7 100644
--- a/src/views/jlmap3d/index.vue
+++ b/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 {
diff --git a/src/views/jlmap3d/simulation/jl3dsimulation.vue b/src/views/jlmap3d/simulation/jl3dsimulation.vue
index d8d6d4c6c..252a84c05 100644
--- a/src/views/jlmap3d/simulation/jl3dsimulation.vue
+++ b/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 {