@eturnity/eturnity_3d 1.0.3 → 1.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "1.0.3",
+  "version": "1.0.5",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",

package/src/helper/threeMixin.js

@@ -60,21 +60,48 @@ export default {
         this.three_map.position.set(-coords.x*coef,-coords.y*coef,0)
         this.scene.add(this.three_map)
       }else{
-        let apiKey=process.env.VUE_APP_GOOGLE_MAP_API_KEY
-        console.log('apiKey Google',apiKey)
-        let backgroundPlanes=[]
-        
-        let planeGeometry = new THREE.PlaneGeometry(1000, 1000)
+          let googleMapType='satellite'
+          switch(this.selectedMapLayer.key){
+            case 'googleLayerRoadmap':
+              googleMapType='roadmap'
+              break;
+            case 'googleLayer':
+              googleMapType='satellite'
+              break;
+            case 'googleLayerTerrain':
+              googleMapType='terrain'
+              break;
+      
+          }
+          
+          let apiKey = process.env.VUE_APP_GOOGLE_MAP_API_KEY
+          let backgroundPlane=[]
+          let size=640
+          let planeGeometry=[]
+          let planeMaterial=[]
+          let texture=[]
+          let zoomLevels=[18,12]
+          for(let indexGoogleBackground=0;indexGoogleBackground<zoomLevels.length; indexGoogleBackground++){
+            let zoomLevel=zoomLevels[indexGoogleBackground]
+            let groundResolution = (Math.cos(this.layoutSettings.layout_latitude * Math.PI/180) * 2 *  Math.PI * 6378137) / (256 * Math.pow(2,zoomLevel)) 
+            let sizeInMeter=groundResolution*size
+            planeGeometry[indexGoogleBackground] = new THREE.PlaneGeometry(sizeInMeter, sizeInMeter)
+            let googleBackgroundUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
+              this.layoutSettings.layout_latitude +
+              ',' +
+              this.layoutSettings.layout_longitude
+            }&maptype=${googleMapType}&zoom=${zoomLevel}&size=${size}x${size}&key=${apiKey}`
+      
+            texture[indexGoogleBackground] = this.loader.load(googleBackgroundUrl)
+            planeMaterial[indexGoogleBackground] = new THREE.MeshBasicMaterial({
+              map: texture[indexGoogleBackground],
+              side: THREE.DoubleSide
+            })
+            backgroundPlane[indexGoogleBackground] = new THREE.Mesh(planeGeometry[indexGoogleBackground], planeMaterial[indexGoogleBackground])
+            backgroundPlane[indexGoogleBackground].position.z = -indexGoogleBackground/2
+            this.background_map.add(backgroundPlane[indexGoogleBackground])
+          }
         
-        let googleBackgroundUrl_0=`https://maps.googleapis.com/maps/api/staticmap?center=${this.layoutSettings.layout_latitude+","+this.layoutSettings.layout_longitude}&zoom=14&size=400x400&key=${apiKey}`
-        let texture = this.loader.load(googleBackgroundUrl_0)
-        let planeMaterial = new THREE.MeshBasicMaterial( {
-          map: texture,
-          side: THREE.DoubleSide
-        })
-        backgroundPlanes[0] = new THREE.Mesh(planeGeometry, planeMaterial)
-        backgroundPlanes[0] .position.z=0
-        this.background_map.add( backgroundPlanes[0] )
       }
       this.scene.add(this.background_map)
     },