@eturnity/eturnity_3d 6.34.4 → 6.34.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "6.34.4",
+  "version": "6.34.5",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
@@ -19,6 +19,7 @@
     "geo-three": "^0.1.11",
     "leaflet": "^1.8.0",
     "leaflet.gridlayer.googlemutant": "^0.14.0",
+    "lodash": "4.17.21",
     "svd-js": "^1.1.1",
     "three": "^0.149.0",
     "three-projected-material": "2.2.1",

package/src/helper/render/tile.js

@@ -9,6 +9,7 @@ import {
   tileToCorners
 } from '@eturnity/eturnity_maths'
 import { earthRadius } from '../../config'
+import { debounce } from 'lodash'
 
 import { cancellablePromise } from '../../utils/cancellablePromise'
 
@@ -19,6 +20,9 @@ export default {
     }
   },
   methods: {
+    debouncedRenderTiles: debounce(function () {
+      this.renderTiles()
+    }, 1000),
     async renderTiles() {
       if (
         !this.selectedMapLayer ||
@@ -254,6 +258,7 @@ export default {
           googleMapType = 'terrain'
           break
       }
+      let size = 640
       let roofsBoundZoomLvl = 19
       let { xMin, xMax, yMin, yMax } = this.roofsBounds
       if (xMin == Infinity) {
@@ -261,14 +266,26 @@ export default {
         yMin = 0
         xMax = 0
         yMax = 0
+      } else {
+        let roofBoundSizeInMeter = Math.max(xMax - xMin, yMax - yMin) / 1000
+
+        let exactZoomLvl = Math.log2(
+          (Math.cos((this.layoutSettings.layout_latitude * Math.PI) / 180) *
+            2 *
+            Math.PI *
+            earthRadius *
+            size) /
+            (256 * roofBoundSizeInMeter)
+        )
+        roofsBoundZoomLvl = Math.min(roofsBoundZoomLvl, parseInt(exactZoomLvl))
       }
       let roofsBoundCenterMeter = {
         x: (xMax + xMin) / 2000,
         y: (yMax + yMin) / 2000
       }
       let deltaLatLng = distanceToDeltaLatLng(
-        roofsBoundCenterMeter.x*1000,
-        roofsBoundCenterMeter.y*1000,
+        roofsBoundCenterMeter.x * 1000,
+        roofsBoundCenterMeter.y * 1000,
         this.layoutSettings.layout_latitude
       )
       let roofsBoundCenterLatLng = {
@@ -278,7 +295,7 @@ export default {
 
       let apiKey = process.env.VUE_APP_GOOGLE_MAP_API_KEY
       let backgroundPlane = []
-      let size = 640
+
       let planeGeometry = []
       let planeMaterial = []
       let texture = []
@@ -299,8 +316,8 @@ export default {
             2 *
             Math.PI *
             earthRadius) /
-          ( Math.pow(2, zoomLevel))
-        let sizeInMeter = groundResolution * size / 256
+          (256 * Math.pow(2, zoomLevel))
+        let sizeInMeter = groundResolution * size
         planeGeometry[indexGoogleBackground] = new THREE.PlaneGeometry(
           sizeInMeter,
           sizeInMeter * 0.9
@@ -349,83 +366,7 @@ export default {
         backgroundPlane[indexGoogleBackground].position.z =
           -indexGoogleBackground / 2
         this.backgroundMap.add(backgroundPlane[indexGoogleBackground])
-      }
-      this.scene.add(this.backgroundMap)
-    },
-    async renderGoogleTilesCenter() {
-      this.clearByType('tileMeshes')
-      if (this.backgroundMap) {
-        this.backgroundMap.clear()
-        this.scene.remove(this.backgroundMap)
-        this.clearThreeObjects(this.backgroundMap)
-      }
-      this.backgroundMap = new THREE.Group()
-
-      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 = [19, 16]
-
-      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 *
-            earthRadius) /
-          (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] = await this.loader.load(
-          googleBackgroundUrl
-        )
-        if (indexGoogleBackground == 0) {
-          this.newGoogleTileMaterial(
-            texture[indexGoogleBackground],
-            sizeInMeter,
-            googleMapType
-          )
-        }
-        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.backgroundMap.add(backgroundPlane[indexGoogleBackground])
+        backgroundPlane[indexGoogleBackground].needsUpdate = true
       }
       this.scene.add(this.backgroundMap)
     }

package/src/helper/renderMixin.js

@@ -193,6 +193,11 @@ export default {
           })
           break
         case 'changeMapProjection':
+          methodList.push({
+            name: 'renderTiles',
+            method: this.debouncedRenderTiles,
+            arg: []
+          })
           methodList.push({
             name: 'changeMapProjection',
             method: this.changeMapProjection,
@@ -203,11 +208,6 @@ export default {
             method: this.applyTextureOnRoofs,
             arg: []
           })
-          methodList.push({
-            name: 'renderTiles',
-            method: this.renderTiles,
-            arg: []
-          })
           break
         // methodList.push({
         //   name: 'removeImageOverlay',

package/src/helper/threeMixin.js

@@ -55,8 +55,8 @@ export default {
       // const helper = new THREE.CameraHelper( this.cameraProjection );
       // this.scene.add( helper );
 
-      // const axesHelper = new THREE.AxesHelper( 20 );
-      // this.scene.add( axesHelper );
+      const axesHelper = new THREE.AxesHelper( 20 );
+      this.scene.add( axesHelper );
       //Light
       const ambientLight = new THREE.AmbientLight(0xf0f0f0, 0.5)
       this.scene.add(ambientLight)