@eturnity/eturnity_3d 8.31.0 → 8.31.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "8.31.0",
+  "version": "8.31.1",
   "files": [
     "dist",
     "src"

package/src/components/ThreeCanvasViewer.vue

@@ -32,14 +32,56 @@
         intervalEventId: null,
       }
     },
-    beforeUnmount() {
-      clearInterval(this.intervalId)
-      clearInterval(this.intervalEventId)
-      cancelAnimationFrame(this.animationFrameId)
-      OverlayLayer.removeEventListener(
-        'overlay-is-ready',
-        this.updateOverlayRendering
-      )
+    computed: {
+      ...mapState({
+        geometryData: (state) => state.threeDModule.geometryData,
+        uuid: (state) => state.threeDModule.uuid,
+        view_mode: (state) => state.threeDModule.view_mode,
+        useCustomCamera: (state) => state.threeDModule.useCustomCamera,
+        cameraPerspectiveSettings: (state) =>
+          state.threeDModule.cameraPerspectiveSettings,
+        isInteractive: (state) => state.threeDModule.isInteractive,
+        isBuildingVisible: (state) => state.threeDModule.isBuildingVisible,
+        imageOverlay: (state) => state.threeDModule.imageOverlay,
+      }),
+      ...mapGetters({
+        polygons: 'getPolygons',
+        edges: 'getEdges3D',
+        nodes: 'getNodes3D',
+        mapConfig: 'getMapConfig',
+        roofsBounds: 'getRoofsBounds',
+        layoutSettings: 'getLayoutSettings',
+        roofs: 'getRoofs',
+        obstacles: 'getObstacles',
+        moduleFields: 'getModuleFields',
+        panels: 'getPanels',
+        userDeactivatedPanels: 'getUserDeactivatedPanels',
+      }),
+    },
+    watch: {
+      isReady: {
+        handler() {
+          if (this.screenshotable) {
+            return
+          }
+          const overlayReady =
+            OverlayLayer.getItems().length == 0 || this.isReady.overlay
+          if (
+            this.isReady.texturesToLoad == this.isReady.texturesLoaded &&
+            this.isReady.geometry &&
+            overlayReady
+          ) {
+            var event = new CustomEvent('screenshotable')
+            document.dispatchEvent(event)
+            this.intervalEventId = setInterval(() => {
+              document.dispatchEvent(event)
+            }, 500)
+            // dispatch the custom event
+            this.screenshotable = true
+          }
+        },
+        deep: true,
+      },
     },
     async mounted() {
       await this.hydrateData(this.geometryData)
@@ -76,7 +118,10 @@
         const polygon = this.polygons.find((p) => p.id == this.uuid)
         this.setCamera(polygon, this.view_mode)
       }
-      this.isReady.geometry = true
+      this.isReady = {
+        ...this.isReady,
+        geometry: true,
+      }
       this.intervalId = setInterval(() => this.render(), 500)
       OverlayLayer.addEventListener(
         'overlay-is-ready',
@@ -84,31 +129,14 @@
       )
       this.render()
     },
-    computed: {
-      ...mapState({
-        geometryData: (state) => state.threeDModule.geometryData,
-        uuid: (state) => state.threeDModule.uuid,
-        view_mode: (state) => state.threeDModule.view_mode,
-        useCustomCamera: (state) => state.threeDModule.useCustomCamera,
-        cameraPerspectiveSettings: (state) =>
-          state.threeDModule.cameraPerspectiveSettings,
-        isInteractive: (state) => state.threeDModule.isInteractive,
-        isBuildingVisible: (state) => state.threeDModule.isBuildingVisible,
-        imageOverlay: (state) => state.threeDModule.imageOverlay,
-      }),
-      ...mapGetters({
-        polygons: 'getPolygons',
-        edges: 'getEdges3D',
-        nodes: 'getNodes3D',
-        mapConfig: 'getMapConfig',
-        roofsBounds: 'getRoofsBounds',
-        layoutSettings: 'getLayoutSettings',
-        roofs: 'getRoofs',
-        obstacles: 'getObstacles',
-        moduleFields: 'getModuleFields',
-        panels: 'getPanels',
-        userDeactivatedPanels: 'getUserDeactivatedPanels',
-      }),
+    beforeUnmount() {
+      clearInterval(this.intervalId)
+      clearInterval(this.intervalEventId)
+      cancelAnimationFrame(this.animationFrameId)
+      OverlayLayer.removeEventListener(
+        'overlay-is-ready',
+        this.updateOverlayRendering
+      )
     },
     methods: {
       ...mapActions({
@@ -162,8 +190,10 @@
           const target = [0, 0, 0]
           this.orthographicCamera.position.set(...position)
           this.orthographicCamera.lookAt(...target)
-          this.isReady.camera = true
-
+          this.isReady = {
+            ...this.isReady,
+            camera: true,
+          }
           let { xMin, xMax, yMin, yMax } = this.orthographicBounds(
             roofsBounds,
             margin
@@ -263,7 +293,10 @@
           this.camera.lookAt(...target)
           this.camera.updateProjectionMatrix()
 
-          this.isReady.camera = true
+          this.isReady = {
+            ...this.isReady,
+            camera: true,
+          }
         }
       },
       orthographicBounds(bounds, margin) {
@@ -309,31 +342,6 @@
         }
       },
     },
-    watch: {
-      isReady: {
-        handler() {
-          if (this.screenshotable) {
-            return
-          }
-          const overlayReady =
-            OverlayLayer.getItems().length == 0 || this.isReady.overlay
-          if (
-            this.isReady.texturesToLoad == this.isReady.texturesLoaded &&
-            this.isReady.geometry &&
-            overlayReady
-          ) {
-            var event = new CustomEvent('screenshotable')
-            document.dispatchEvent(event)
-            this.intervalEventId = setInterval(() => {
-              document.dispatchEvent(event)
-            }, 500)
-            // dispatch the custom event
-            this.screenshotable = true
-          }
-        },
-        deep: true,
-      },
-    },
   }
 </script>
 

package/src/helper/cameraMixin.js

@@ -13,24 +13,18 @@ export default {
   data() {
     return {
       animationFrameId: null,
+      perspectiveCamera: new THREE.PerspectiveCamera(80, 300 / 300, 1, 50000),
+      orthographicCamera: new THREE.OrthographicCamera(
+        -50,
+        50,
+        50,
+        -50,
+        1,
+        1000
+      ),
     }
   },
-  created() {
-    this.perspectiveCamera = new THREE.PerspectiveCamera(
-      80,
-      300 / 300,
-      1,
-      50000
-    )
-    this.orthographicCamera = new THREE.OrthographicCamera(
-      -50,
-      50,
-      50,
-      -50,
-      1,
-      1000
-    )
-  },
+  created() {},
   methods: {
     initialiseCameras(isPerspectiveCamera) {
       if (isPerspectiveCamera) {
@@ -53,6 +47,11 @@ export default {
       this.cameraProjection.up.set(0, 0, 1)
       this.scene.add(this.camera)
     },
+    setCameraZoomOffset(zoomOffset) {
+      this.camera.zoom = zoomOffset
+      this.camera.updateProjectionMatrix()
+      this.render()
+    },
     setCameraAspectRatio() {
       const canvasRatio =
         this.DOMElement.clientWidth / this.DOMElement.clientHeight
@@ -74,9 +73,12 @@ export default {
       this.camera.updateProjectionMatrix()
     },
     turnPerspectiveCameraToOrthogonal() {
+      if (this.orthographicCamera.id == this.camera.id) {
+        return
+      }
       const cameraPosition = new THREE.Vector3(
-        this.camera.position.x,
-        this.camera.position.y,
+        this.orbitControl.target.x,
+        this.orbitControl.target.y,
         this.camera.position.z
       )
       var halfHeightDistance =
@@ -105,12 +107,13 @@ export default {
       )
       this.camera.updateProjectionMatrix()
       this.renderer.camera = this.camera
-      this.composer.renderCamera = this.camera
-
-      this.renderPass.camera = this.camera
-      this.overlayRenderPass.camera = this.camera
-      this.outlinePassHighlight.renderCamera = this.camera
-      this.outlinePassSelected.renderCamera = this.camera
+      if (this.composer) {
+        this.composer.renderCamera = this.camera
+        this.renderPass.camera = this.camera
+        this.overlayRenderPass.camera = this.camera
+        this.outlinePassHighlight.renderCamera = this.camera
+        this.outlinePassSelected.renderCamera = this.camera
+      }
       this.orbitControl.screenSpacePanning = true
       this.orbitControl.object = this.camera
       this.orbitControl.target.set(cameraPosition.x, cameraPosition.y, 0)
@@ -132,9 +135,14 @@ export default {
       this.camera.updateProjectionMatrix()
       this.nodesVisible = true
       this.renderNodes()
-      this.composer.render()
+      if (this.composer) {
+        this.composer.render()
+      }
     },
     turnOrthogonalCameraToPerspective() {
+      if (this.perspectiveCamera.id == this.camera.id) {
+        return
+      }
       this.camera = this.perspectiveCamera
       let altitude =
         (this.orthographicCamera.right - this.orthographicCamera.left) /
@@ -151,14 +159,16 @@ export default {
       this.camera.updateProjectionMatrix()
 
       this.renderer.camera = this.camera
-      this.composer.renderer.camera = this.camera
-      this.composer.renderCamera = this.camera
-      this.renderPass.camera = this.camera
-      this.overlayRenderPass.camera = this.camera
-      this.outlinePassHighlight.camera = this.camera
-      this.outlinePassHighlight.renderCamera = this.camera
-      this.outlinePassSelected.camera = this.camera
-      this.outlinePassSelected.renderCamera = this.camera
+      if (this.composer) {
+        this.composer.renderer.camera = this.camera
+        this.composer.renderCamera = this.camera
+        this.renderPass.camera = this.camera
+        this.overlayRenderPass.camera = this.camera
+        this.outlinePassHighlight.camera = this.camera
+        this.outlinePassHighlight.renderCamera = this.camera
+        this.outlinePassSelected.camera = this.camera
+        this.outlinePassSelected.renderCamera = this.camera
+      }
       this.orbitControl.camera = this.camera
       this.orbitControl.object = this.camera
       this.orbitControl.target.set(
@@ -166,6 +176,11 @@ export default {
         this.camera.position.y,
         0
       )
+      this.camera.position.set(
+        this.orthographicCamera.position.x,
+        this.orthographicCamera.position.y - 20,
+        altitude
+      )
       this.orbitControl.screenSpacePanning = false
       this.orbitControl.enableRotate = true
       this.orbitControl.mouseButtons = {
@@ -175,7 +190,9 @@ export default {
       }
       this.orbitControl.update()
 
-      this.composer.render()
+      if (this.composer) {
+        this.composer.render()
+      }
     },
     zoomIn3D() {
       if (this.camera.isOrthographicCamera) {

package/src/helper/render/base.js

@@ -55,5 +55,11 @@ export default {
       this.mergedBaseMesh.receiveShadow = true
       this.mergedBaseMesh.castShadow = true
     },
+    hideBases() {
+      this.mergedBaseMesh.visible = false
+    },
+    showBases() {
+      this.mergedBaseMesh.visible = true
+    },
   },
 }

package/src/helper/render/building.js

@@ -0,0 +1,23 @@
+import * as THREE from 'three'
+
+export default {
+  created() {},
+  methods: {
+    showBuildings() {
+      this.showRoofs()
+      this.showBases()
+      this.showObstacles()
+      this.showModuleFields()
+      this.showEdges()
+      this.render()
+    },
+    hideBuildings() {
+      this.hideRoofs()
+      this.hideBases()
+      this.hideObstacles()
+      this.hideModuleFields()
+      this.hideEdges()
+      this.render()
+    },
+  },
+}

package/src/helper/render/edge.js

@@ -36,6 +36,7 @@ export default {
       return cylinder
     },
     renderEdges() {
+      if (this.selectedTool == 'screenshot') return
       this.clearEdgesRemovedOnes('edgeMeshes')
       if (this.renderLineEdges) {
         this.renderLineEdges()
@@ -96,5 +97,15 @@ export default {
         }
       })
     },
+    hideEdges() {
+      Object.values(this.meshes.edgeMeshes).forEach((mesh) => {
+        mesh.visible = false
+      })
+    },
+    showEdges() {
+      Object.values(this.meshes.edgeMeshes).forEach((mesh) => {
+        mesh.visible = true
+      })
+    },
   },
 }

package/src/helper/render/imageOverlay.js

@@ -54,6 +54,16 @@ export default {
       this.meshes.backgroundMesh.visible = true
       return
     },
+    hideImageOverlays() {
+      OverlayLayer.dispatchActionToAllItems('setOpacity', 0)
+      this.updateProjectionMaterials()
+      this.renderImageOverlayOnBackground()
+    },
+    showImageOverlays() {
+      OverlayLayer.dispatchActionToAllItems('setOpacity', 1)
+      this.updateProjectionMaterials()
+      this.renderImageOverlayOnBackground()
+    },
     async getOverlaysMaterials() {
       let overlayMaterialsPromises = []
       OverlayLayer.getReadyItems()

package/src/helper/render/index.js

@@ -15,7 +15,9 @@ import projectionMaterial from './projectionMaterial'
 import tile from './tile'
 import tileProjection from './tileProjection'
 import mergedGeometry from './mergedGeometry'
-
+import building from './building'
+import marker from './marker'
+import scene from './scene'
 export default {
   mixins: [
     margin,
@@ -35,5 +37,8 @@ export default {
     tile,
     tileProjection,
     mergedGeometry,
+    building,
+    marker,
+    scene,
   ],
 }

package/src/helper/render/marker.js

@@ -0,0 +1,71 @@
+import * as THREE from 'three'
+
+export default {
+  created() {},
+  methods: {
+    renderMarker() {
+      if (this.selectedTool != 'screenshot') {
+        return
+      }
+      if (this.meshes.markerMesh) {
+        return
+      }
+      //const lod = new THREE.LOD()
+      const sphereGeometry = new THREE.SphereGeometry(1, 32, 32) // Initial radius of 5
+      const coneGeometry = new THREE.ConeGeometry(0.98, 2, 32)
+
+      const opacity = 1
+      const material = new THREE.MeshPhongMaterial({
+        color: 0xff0000, // red color
+        transparent: true,
+        opacity,
+      })
+      let roofCenter = {
+        x: 0,
+        y: 0,
+        z: 0,
+      }
+      if (this.roofs.length > 0) {
+        roofCenter = {
+          x: (this.roofsBounds.xMin + this.roofsBounds.xMax) / 2000,
+          y: (this.roofsBounds.yMin + this.roofsBounds.yMax) / 2000,
+          z: this.roofsBounds.zMax / 2000,
+        }
+      }
+      const sphereMesh = new THREE.Mesh(sphereGeometry, material)
+      const coneMesh = new THREE.Mesh(coneGeometry, material)
+      coneMesh.rotateX(-Math.PI / 2)
+      coneMesh.position.set(0, 0, -1.2)
+      const markerMesh = new THREE.Group()
+      markerMesh.add(coneMesh)
+
+      markerMesh.add(sphereMesh)
+      markerMesh.userData = { id: 'marker' }
+      markerMesh.position.set(roofCenter.x, roofCenter.y, roofCenter.z + 10)
+      markerMesh.scale.set(3, 3, 3)
+      // for (let i = 1; i < 10; i++) {
+      //   const mesh = markerMesh.clone()
+      //   mesh.scale.set(i * 3, i * 3, i * 3)
+      //   mesh.position.set(0, 0, 12 * i)
+      //   lod.addLevel(mesh, (i - 1) * 100)
+      // }
+      // const lastMesh = markerMesh.clone()
+      // lastMesh.scale.set(150, 150, 150)
+      // lastMesh.position.set(0, 0, 600)
+      // lod.addLevel(lastMesh, 1000)
+      // this.scene.add(lod)
+      this.scene.add(markerMesh)
+      this.meshes.markerMesh = markerMesh
+    },
+    showMarker() {
+      if (this.meshes.markerMesh) {
+        this.meshes.markerMesh.visible = true
+      }
+    },
+    hideMarker() {
+      if (this.meshes.markerMesh) {
+        this.meshes.markerMesh.visible = false
+      }
+    },
+  },
+}

package/src/helper/render/moduleField.js

@@ -102,5 +102,11 @@ export default {
             this.areModuleFieldsVisible && this.panelOpacity === 1)
       )
     },
+    hideModuleFields() {
+      this.updateModuleFieldsVisibility(false)
+    },
+    showModuleFields() {
+      this.updateModuleFieldsVisibility(true)
+    },
   },
 }

package/src/helper/render/obstacle.js

@@ -90,5 +90,13 @@ export default {
       this.mergedObstacleMesh.receiveShadow = true
       this.mergedObstacleMesh.castShadow = true
     },
+    hideObstacles() {
+      this.mergedObstacleSideMesh.visible = false
+      this.mergedObstacleMesh.visible = false
+    },
+    showObstacles() {
+      this.mergedObstacleSideMesh.visible = true
+      this.mergedObstacleMesh.visible = true
+    },
   },
 }

package/src/helper/render/overlay.js

@@ -83,12 +83,29 @@ export default {
       })
     },
     updateOverlayRendering() {
+      this.renderOverlays()
+      this.updateProjectionMaterials()
+      this.render()
       if (this.isReady) {
-        this.isReady.overlay = true
+        this.isReady = {
+          ...this.isReady,
+          overlay: true,
+        }
       }
+    },
+    hideOverlays() {
+      OverlayLayer.getItems().forEach((overlay) => {
+        overlay.setOpacity = 0
+      })
+      this.updateProjectionMaterials()
       this.renderOverlays()
+    },
+    showOverlays() {
+      OverlayLayer.getItems().forEach((overlay) => {
+        overlay.setOpacity = 1
+      })
       this.updateProjectionMaterials()
-      this.render()
+      this.renderOverlays()
     },
   },
 }

package/src/helper/render/panel.js

@@ -111,6 +111,8 @@ export default {
         const meshSide = existingSideMesh ? existingSideMesh : new THREE.Mesh()
         meshSide.geometry = geometrySide
         meshSide.material = this.material.panelSide
+        meshSide.material.opacity = this.panelOpacity
+        meshSide.material.transparent = true
         meshSide.userData.version = panel.version
         meshSide.userData.type = 'panelsMeshes'
         meshSide.userData.meshId = panel.id + '_side'

package/src/helper/render/roof.js

@@ -158,5 +158,15 @@ export default {
         }
       })
     },
+    hideRoofs() {
+      Object.values(this.meshes.roofMeshes).forEach((mesh) => {
+        mesh.visible = false
+      })
+    },
+    showRoofs() {
+      Object.values(this.meshes.roofMeshes).forEach((mesh) => {
+        mesh.visible = true
+      })
+    },
   },
 }

package/src/helper/render/scene.js

@@ -0,0 +1,79 @@
+import * as THREE from 'three'
+
+export default {
+  created() {},
+  methods: {
+    setSceneFromMetaData(params) {
+      const sunLight = this.scene.getObjectByName('sunLight')
+      if (sunLight) {
+        sunLight.castShadow = false
+      }
+      params.is_building_visible || params.is_building_visible == undefined
+        ? this.showBuildings()
+        : this.hideBuildings()
+      params.is_overlay_visible || params.is_overlay_visible == undefined
+        ? this.showImageOverlays()
+        : this.hideImageOverlays()
+      params.is_panel_visible || params.is_panel_visible == undefined
+        ? this.showPanels()
+        : this.hidePanels()
+      params.is_marker_visible || params.is_marker_visible == undefined
+        ? this.showMarker()
+        : this.hideMarker()
+      params.view_mode == '3d' || params.is_panel_visible == undefined
+        ? this.turnOrthogonalCameraToPerspective()
+        : this.turnPerspectiveCameraToOrthogonal()
+      if (params.map_layer != undefined) {
+        this.initialiseMapLayer(params.map_layer)
+      }
+      if (params.zoom_level_offset && params.view_mode == '2d') {
+        this.setCameraZoomOffset(params.zoom_level_offset)
+      }
+      if (params.camera) {
+        this.setCameraFromMetaData(params.camera)
+      } else if (params.camera_offset) {
+        this.setCameraOffsetFromMetaData(params.camera_offset)
+      }
+    },
+    setCameraOffsetFromMetaData(cameraOffset) {
+      this.camera.position.set(
+        this.orbitControl.target.x + cameraOffset.x_m,
+        this.orbitControl.target.y + cameraOffset.y_m,
+        this.orbitControl.target.z + cameraOffset.z_m
+      )
+      this.camera.updateProjectionMatrix()
+      this.orbitControl.update()
+      this.render()
+    },
+    setCameraFromMetaData(cameraMetaData) {
+      if (cameraMetaData.type != this.camera.type) {
+        return
+      }
+      this.camera.zoom = cameraMetaData.zoom
+      if (cameraMetaData.type == 'OrthographicCamera') {
+        this.camera.left = cameraMetaData.left
+        this.camera.right = cameraMetaData.right
+        this.camera.top = cameraMetaData.top
+        this.camera.bottom = cameraMetaData.bottom
+      } else {
+        if (cameraMetaData.position) {
+          this.camera.position.set(
+            cameraMetaData.position.x,
+            cameraMetaData.position.y,
+            cameraMetaData.position.z
+          )
+        }
+        if (cameraMetaData.target) {
+          this.orbitControl.target.set(
+            cameraMetaData.target.x,
+            cameraMetaData.target.y,
+            cameraMetaData.target.z
+          )
+        }
+      }
+      this.camera.updateProjectionMatrix()
+      this.orbitControl.update()
+      this.render()
+    },
+  },
+}

package/src/helper/render/tile.js

@@ -257,10 +257,16 @@ export default {
           meshId,
           imagePromise,
         })
-        this.isReady.texturesToLoad++
+        this.isReady = {
+          ...this.isReady,
+          texturesToLoad: this.isReady.texturesToLoad + 1,
+        }
         imagePromise
           .then((image) => {
-            this.isReady.texturesLoaded++
+            this.isReady = {
+              ...this.isReady,
+              texturesLoaded: this.isReady.texturesLoaded + 1,
+            }
             if (!image) {
               this.removeTileFromPending(meshId, mapLayer)
               resolve()
@@ -433,9 +439,11 @@ export default {
         let googleBackgroundUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
           roofsBoundCenterLatLng.lat + ',' + roofsBoundCenterLatLng.lng
         }&maptype=${googleMapType}&zoom=${zoomLevel}&size=${size}x${size}&key=${apiKey}`
-        this.isReady.texturesToLoad++
+        this.isReady = {
+          ...this.isReady,
+          texturesToLoad: this.isReady.texturesToLoad + 1,
+        }
         this.loader.load(googleBackgroundUrl, (texture) => {
-          this.isReady.texturesLoaded++
           texture.encoding = THREE.sRGBEncoding
           texture.colorSpace = THREE.SRGBColorSpace
           planeTexture[indexGoogleBackground] = texture
@@ -486,6 +494,10 @@ export default {
             this.googleBackgroundMap.castShadow = false
             this.render()
           }
+          this.isReady = {
+            ...this.isReady,
+            texturesLoaded: this.isReady.texturesLoaded + 1,
+          }
         })
       }
 

package/src/helper/renderMixin.js

@@ -26,6 +26,7 @@ export default {
       moduleFieldsMeshes: {},
       tileMeshes: {},
       overlayMeshes: {},
+      markerMesh: null,
     }
   },
   mounted() {
@@ -91,6 +92,12 @@ export default {
   },
   methods: {
     refreshRendering(e) {
+      if (this.isReady) {
+        this.isReady = {
+          ...this.isReady,
+          geometry: false,
+        }
+      }
       let methodList = []
       if (this.fullRenderNeeded) {
         methodList = this.renderingMethodsByEvent({ name: 'full' })
@@ -111,6 +118,12 @@ export default {
       }
 
       this.lastGeometryEventIdDone = this.lastGeometryEventId
+      if (this.isReady) {
+        this.isReady = {
+          ...this.isReady,
+          geometry: true,
+        }
+      }
     },
     renderingMethodsByEvent(geometryEvent) {
       const name = geometryEvent.name
@@ -181,6 +194,11 @@ export default {
         case 'full':
         case 'reset':
         case 'changeOverlays':
+          methodList.push({
+            name: 'renderMarker',
+            method: this.renderMarker,
+            arg: [],
+          })
           methodList.push({
             name: 'renderOverlays',
             method: this.renderOverlays,
@@ -445,6 +463,55 @@ export default {
             arg: [],
           })
           break
+        case 'hideBuildings':
+          methodList.push({
+            name: 'hideBuilding',
+            method: this.hideBuildings,
+            arg: [],
+          })
+          break
+        case 'showBuildings':
+          methodList.push({
+            name: 'showBuilding',
+            method: this.showBuildings,
+            arg: [],
+          })
+          break
+        case 'hideMarker':
+          methodList.push({
+            name: 'hideMarker',
+            method: this.hideMarker,
+            arg: [],
+          })
+          break
+        case 'showMarker':
+          methodList.push({
+            name: 'showMarker',
+            method: this.showMarker,
+            arg: [],
+          })
+          break
+        case 'turnOrthogonalCameraToPerspective':
+          methodList.push({
+            name: 'turnOrthogonalCameraToPerspective',
+            method: this.turnOrthogonalCameraToPerspective,
+            arg: [],
+          })
+          break
+        case 'turnPerspectiveCameraToOrthogonal':
+          methodList.push({
+            name: 'turnPerspectiveCameraToOrthogonal',
+            method: this.turnPerspectiveCameraToOrthogonal,
+            arg: [],
+          })
+          break
+        case 'setSceneFromMetaData':
+          methodList.push({
+            name: 'setSceneFromMetaData',
+            method: this.setSceneFromMetaData,
+            arg: [params],
+          })
+          break
       }
       return methodList
     },
@@ -478,7 +545,6 @@ export default {
       this.renderObstacles()
       this.updateProjectionMaterials()
     },
-
     getCanvasOffset() {
       if (!this.$refs.canvas3DContainer) return { top: 0, left: 0 }
       var box = this.$refs.canvas3DContainer.getBoundingClientRect()

package/src/helper/threeMixin.js

@@ -209,7 +209,7 @@ export default {
       this.provider = new CustomProvider('', this.selectedMapLayer.key)
       this.renderTiles()
     },
-    initialiseMapLayer() {
+    initialiseMapLayer(layerKey = null) {
       if (!this.layers || this.layers.length == 0) {
         this.layers = getLayers()
       }
@@ -219,7 +219,10 @@ export default {
         let selectedLayer = null
         for (let i = 0; i < this.layers.length; i++) {
           const layer = this.layers[i]
-          if (
+          if (layerKey && layer.key == layerKey) {
+            selectedLayer = layer
+            break
+          } else if (
             this.globalProjectProperties &&
             layer.key === this.globalProjectProperties.map_type
           ) {

package/src/store/three-d-module.js

@@ -102,23 +102,43 @@ const getters = {
       xMax: -Infinity,
       yMin: Infinity,
       yMax: -Infinity,
+      zMin: Infinity,
+      zMax: -Infinity,
+    }
+    const roofs = getters.getRoofs
+    if (roofs.length) {
+      roofs.forEach((polygon) =>
+        polygon.outline.forEach((p) => {
+          if (bounds.xMin > p.x) {
+            bounds.xMin = p.x
+          }
+          if (bounds.xMax < p.x) {
+            bounds.xMax = p.x
+          }
+          if (bounds.yMin > p.y) {
+            bounds.yMin = p.y
+          }
+          if (bounds.yMax < p.y) {
+            bounds.yMax = p.y
+          }
+          if (bounds.zMin > p.z) {
+            bounds.zMin = p.z
+          }
+          if (bounds.zMax < p.z) {
+            bounds.zMax = p.z
+          }
+        })
+      )
+    } else {
+      bounds = {
+        xMin: -1000,
+        xMax: 1000,
+        yMin: -1000,
+        yMax: 1000,
+        zMin: 0,
+        zMax: 0,
+      }
     }
-    getters.getRoofs.forEach((polygon) =>
-      polygon.outline.forEach((p) => {
-        if (bounds.xMin > p.x) {
-          bounds.xMin = p.x
-        }
-        if (bounds.xMax < p.x) {
-          bounds.xMax = p.x
-        }
-        if (bounds.yMin > p.y) {
-          bounds.yMin = p.y
-        }
-        if (bounds.yMax < p.y) {
-          bounds.yMax = p.y
-        }
-      })
-    )
     return bounds
   },
 }

package/src/utils/layers.js

@@ -224,7 +224,49 @@ const GeoLayer_HR = L.tileLayer(
     layerTypeAPI: 'geoportail_fr_wmts_ortho_layer',
   }
 )
+const GeoLayerCadastral = L.tileLayer(
+  'https://data.geopf.fr/wmts?' +
+    '&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0' +
+    '&STYLE=normal' +
+    '&TILEMATRIXSET=PM' +
+    '&FORMAT=image/png' +
+    '&LAYER=CADASTRALPARCELS.PARCELLAIRE_EXPRESS' +
+    '&TILEMATRIX={z}' +
+    '&TILEROW={y}' +
+    '&TILECOL={x}',
+  {
+    layers: 'CADASTRALPARCELS.PARCELLAIRE_EXPRESS',
+    id: 'CADASTRALPARCELS.PARCELLAIRE_EXPRESS',
+    attribution: '© IGN-F/Geoportail France',
+    minZoom: leafletMapLayersConfig['GeoPortal']['minZoom'],
+    maxZoom: leafletMapLayersConfig['GeoPortal']['maxZoom'],
+    maxNativeZoom: leafletMapLayersConfig['GeoPortal']['maxNativeZoom'],
+    tileSize: 256,
+    layerTypeAPI: 'geoportail_fr_wmts_cadastral_parcel_parcellaire_express',
+  }
+)
 
+const GeoLayerGridSystem = L.tileLayer(
+  'https://data.geopf.fr/wmts?' +
+    '&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0' +
+    '&STYLE=normal' +
+    '&TILEMATRIXSET=PM' +
+    '&FORMAT=image/png' +
+    '&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' +
+    '&TILEMATRIX={z}' +
+    '&TILEROW={y}' +
+    '&TILECOL={x}',
+  {
+    layers: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
+    id: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
+    attribution: '© IGN-F/Geoportail France',
+    minZoom: leafletMapLayersConfig['GeoPortal']['minZoom'],
+    maxZoom: leafletMapLayersConfig['GeoPortal']['maxZoom'],
+    maxNativeZoom: leafletMapLayersConfig['GeoPortal']['maxNativeZoom'],
+    tileSize: 256,
+    layerTypeAPI: 'geoportail_fr_wmts_geographical_grid_systems_plan_ign_v2',
+  }
+)
 const azureSatelliteLayer = L.tileLayer(
   'https://atlas.microsoft.com/map/tile?' +
     'api-version={apiVersion}' +
@@ -315,6 +357,16 @@ function getLayers() {
       key: 'geoportail_fr_wmts_ortho_layer',
       layerData: GeoLayer_HR,
     },
+    {
+      name: 'GeoPortal France (Parcelles Cadastrales)',
+      key: 'geoportail_fr_wmts_cadastral_parcel_parcellaire_express',
+      layerData: GeoLayerCadastral,
+    },
+    {
+      name: 'GeoPortal France (Grille IGN)',
+      key: 'geoportail_fr_wmts_geographical_grid_systems_plan_ign_v2',
+      layerData: GeoLayerGridSystem,
+    },
     {
       name: 'Bing (satellite)',
       key: 'azureSatelliteLayer',

package/src/utils/leaflet-config.service.js

@@ -60,7 +60,7 @@ export const leafletMapLayersConfig = {
     minZoom: 0,
   },
   GeoPortal: {
-    maxZoom: 22,
+    maxZoom: 25,
     maxNativeZoom: 19,
     minZoom: 6,
   },