@eturnity/eturnity_3d 7.42.3 → 7.48.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "7.42.3",
+  "version": "7.48.1",
   "files": [
     "dist",
     "src"
@@ -15,7 +15,7 @@
     "prettier": "prettier --write \"**/*.{js,vue}\""
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "7.42.2",
+    "@eturnity/eturnity_maths": "7.48.0",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "core-js": "3.30.2",
     "cors": "2.8.5",

package/src/helper/ImageHelper.js

@@ -0,0 +1,67 @@
+class ImageHelper {
+  /**
+   * Wrapper for image loading
+   * @param {String} src - source url
+   * @returns image
+   */
+  static loadImage(src) {
+    return new Promise((resolve, reject) => {
+      const image = new Image()
+      image.crossOrigin = 'Anonymous'
+      image.onload = () => {
+        resolve(image)
+      }
+      image.onerror = reject
+      image.src = src
+    })
+  }
+
+  /**
+   * Overlays images on top of one another
+   * @param {Array<Images>} images
+   * @returns overlapped image
+   */
+  static overlayImages(images = []) {
+    return new Promise((resolve, reject) => {
+      const canvas = document.createElement('canvas')
+      canvas.width = images[0].width
+      canvas.height = images[0].height
+      const ctx = canvas.getContext('2d')
+
+      // last element of the array will be the top most layer
+      images.forEach((image) => {
+        ctx.drawImage(image, 0, 0)
+      })
+
+      const newImage = new Image()
+      newImage.src = canvas.toDataURL('image/png')
+      newImage.onload = () => {
+        resolve(newImage)
+      }
+      newImage.onerror = reject
+    })
+  }
+
+  /**
+   * Checks if an image is fully transparent
+   * @param {Image} image
+   * @returns Boolean
+   */
+  static isFullyTransparent(image) {
+    const canvas = document.createElement('canvas')
+    canvas.width = image.width
+    canvas.height = image.height
+    const ctx = canvas.getContext('2d')
+    ctx.drawImage(image, 0, 0)
+    const imageData = ctx.getImageData(0, 0, image.width, image.height)
+    const pixels = imageData.data
+    for (let i = 3; i < pixels.length; i += 4) {
+      if (pixels[i] !== 0) {
+        return false
+      }
+    }
+    return true
+  }
+}
+
+export default ImageHelper

package/src/helper/customProvider.js

@@ -1,5 +1,8 @@
 import { MapProvider } from 'geo-three'
 import getLayers from '../utils/layers'
+import ImageHelper from './ImageHelper'
+import { MAP_LAYER_TYPE } from '../utils/constants'
+
 export class CustomProvider extends MapProvider {
   constructor(address, map_layer) {
     super()
@@ -9,77 +12,114 @@ export class CustomProvider extends MapProvider {
     this.mapLayer = map_layer
     this.maxZoom = this.layer.layerData.options.maxNativeZoom || 20
     this.minZoom = this.layer.layerData.options.minZoom || 17
-    this.defaultImage = document.createElement('img')
-    this.defaultImage.src = require('../assets/images/white_tile.png')
-    this.defaultImage.crossOrigin = 'Anonymous'
+    const imgSrc = require('../assets/images/white_tile.png')
+    this.defaultImage = ImageHelper.loadImage(imgSrc.default || imgSrc)
     this.url = layer
       ? layer.layerData._url
       : 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
     this.address = address
   }
 
-  fetchTile(zoom, x, y) {
-    const minZoomLayer = this.layer.layerData.options.minZoom || 9
-    const maxZoomLayer = this.layer.layerData.options.maxNativeZoom || 20
-    return new Promise((resolve, reject) => {
-      if (zoom < minZoomLayer) {
-        resolve(this.defaultImage)
-      } else {
-        const image = document.createElement('img')
-
-        image.onload = function () {
-          image.style.backgroundColor = 'red'
-          resolve(image)
-        }
-        image.onerror = function () {
-          resolve(this.defaultImage)
-        }
+  getImageSrc(layerKey, layer, position) {
+    const { x, y, zoom } = position
+    let imageSrc = layer._url
+    if (layerKey == 'bkgHexagonGermanyLayer') {
+      const numTiles = Math.pow(2, zoom)
+      const tileX = x
+      const tileY = numTiles - 1 - y
+      const earthPerimeter = 6378137 * Math.PI * 2
+      const resolution_mPerTile = earthPerimeter / numTiles
 
-        image.crossOrigin = 'Anonymous'
-        let imageSrc = this.url
-        if (this.layer.key == 'bkgHexagonGermanyLayer') {
-          const numTiles = Math.pow(2, zoom)
-          const tileX = x
-          const tileY = numTiles - 1 - y
-          const earthPerimeter = 6378137 * Math.PI * 2
-          const resolution_mPerTile = earthPerimeter / numTiles
+      const xMin = tileX * resolution_mPerTile - earthPerimeter / 2
+      const xMax = xMin + resolution_mPerTile
+      const yMin = tileY * resolution_mPerTile - earthPerimeter / 2
+      const yMax = yMin + resolution_mPerTile
+      const { kid, layers } = layer.options
+      imageSrc =
+        imageSrc +
+        '?service=WMS' +
+        '&request=GetMap' +
+        `&layers=${layers}` +
+        `&kid=${kid}` +
+        '&format=image%2Fpng' +
+        '&transparent=true' +
+        '&version=1.3.0' +
+        '&width=256' +
+        '&height=256' +
+        '&crs=EPSG%3A3857' +
+        `&bbox=${xMin},${yMin},${xMax},${yMax}`
+    } else if (layerKey == 'azureSatelliteLayer') {
+      const { apiVersion, tilesetId, subscriptionKey } = layer.options
+      imageSrc = imageSrc
+        .replace('{x}', x)
+        .replace('{y}', y)
+        .replace('{z}', zoom)
+        .replace('{apiVersion}', apiVersion)
+        .replace('{tilesetId}', tilesetId)
+        .replace('{subscriptionKey}', subscriptionKey)
+      imageSrc = imageSrc + `&no-cache=${Date.now()}`
+    } else {
+      imageSrc = imageSrc.replace('{x}', x)
+      imageSrc = imageSrc.replace('{y}', y)
+      imageSrc = imageSrc.replace('{z}', zoom)
+      if (layer.options.subdomains) {
+        const subDomain =
+          layer.options.subdomains[
+            Math.abs((x << zoom) + y) % layer.options.subdomains.length
+          ]
+        imageSrc = imageSrc.replace('{s}', subDomain)
+      }
+      imageSrc = imageSrc.replace('{format}', 'image/jpeg')
+      imageSrc = imageSrc.replace('{tileMatrixSet}', 'PM')
+    }
+    return imageSrc
+  }
 
-          const xMin = tileX * resolution_mPerTile - earthPerimeter / 2
-          const xMax = xMin + resolution_mPerTile
-          const yMin = tileY * resolution_mPerTile - earthPerimeter / 2
-          const yMax = yMin + resolution_mPerTile
+  async fetchTile(zoom, x, y) {
+    try {
+      const minZoomLayer = this.layer.layerData.options.minZoom || 9
+      const position = {
+        x,
+        y,
+        zoom,
+      }
+      if (zoom < minZoomLayer) {
+        return this.defaultImage
+      } else if (this.layer.key === MAP_LAYER_TYPE.HEXAGON_SATELLITE) {
+        const layerGroup = this.layer.layerData
+        const layers = layerGroup
+          .getLayers()
+          .sort((a, b) => a.options.order - b.options.order)
 
-          imageSrc += `&service=WMS&request=GetMap&layers=rgb&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&id=bkg_image&layerTypeAPI=bkgHexagonGermanyLayer&width=256&height=256&srs=EPSG%3A3857&bbox=${xMin},${yMin},${xMax},${yMax}`
-        } else if (this.layer.key == 'azureSatelliteLayer') {
-          const { apiVersion, tilesetId, subscriptionKey } =
-            this.layer.layerData.options
-          imageSrc = imageSrc
-            .replace('{x}', x)
-            .replace('{y}', y)
-            .replace('{z}', zoom)
-            .replace('{apiVersion}', apiVersion)
-            .replace('{tilesetId}', tilesetId)
-            .replace('{subscriptionKey}', subscriptionKey)
-          imageSrc = imageSrc + `&no-cache=${Date.now()}`
-        } else {
-          imageSrc = imageSrc.replace('{x}', x)
-          imageSrc = imageSrc.replace('{y}', y)
-          imageSrc = imageSrc.replace('{z}', zoom)
-          //imageSrc = imageSrc.replace('{s}', 'a')
-          if (this.layer.layerData.options.subdomains) {
-            const subDomain =
-              this.layer.layerData.options.subdomains[
-                Math.abs((x << zoom) + y) %
-                  this.layer.layerData.options.subdomains.length
-              ]
-            imageSrc = imageSrc.replace('{s}', subDomain)
-          }
-          imageSrc = imageSrc.replace('{format}', 'image/jpeg')
-          //imageSrc = imageSrc.replace('{format}', 'image/png')
-          imageSrc = imageSrc.replace('{tileMatrixSet}', 'PM')
+        const promiseArray = layers.map((layer) => {
+          const imagePromise = ImageHelper.loadImage(
+            this.getImageSrc(this.layer.key, layer, position)
+          )
+          return imagePromise.catch((error) => error)
+        })
+        const images = await Promise.all(promiseArray)
+        const validImages = images.filter((image) => {
+          return image instanceof Image
+        })
+        if (!validImages.length) {
+          throw 'No valid image'
         }
-        image.src = imageSrc
+        const result =
+          validImages.length === 1
+            ? validImages[0]
+            : await ImageHelper.overlayImages(validImages)
+        return result
+      } else {
+        const imageSrc = this.getImageSrc(
+          this.layer.key,
+          this.layer.layerData,
+          position
+        )
+        const image = await ImageHelper.loadImage(imageSrc)
+        return image
       }
-    })
+    } catch (error) {
+      return this.defaultImage
+    }
   }
 }

package/src/helper/render/roof.js

@@ -151,7 +151,7 @@ export default {
             mesh.userData.version = roofPolygon.version
             mesh.userData.type = 'flatRoofMeshes'
             mesh.userData.meshId = roofPolygon.id
-
+            mesh.renderOrder = 10
             mesh.visible = roofPolygon.maximumGap > maximumGapLimit
             this.scene.add(mesh)
             this.meshes.flatRoofMeshes[roofPolygon.id] = mesh

package/src/helper/render/tile.js

@@ -229,7 +229,16 @@ export default {
         }
 
         let mesh = this.meshes.tileMeshes[meshId]
-        if (mesh && this.provider.mapLayer == mesh.userData.mapLayer) {
+        const materialId =
+          'material_' + x + '_' + y + '_' + zoomLvl + '_' + mapLayer
+        const tileProjectionMaterial = this.material.projectionTiles.find(
+          (m) => m.userData.materialId === materialId
+        )
+        if (
+          mesh &&
+          this.provider.mapLayer == mesh.userData.mapLayer &&
+          (!isTileOnRoofBound || tileProjectionMaterial)
+        ) {
           resolve()
           return
         }
@@ -263,6 +272,8 @@ export default {
             }
             texture.generateMipmaps = false
             texture.format = THREE.RGBAFormat
+            texture.encoding = THREE.sRGBEncoding
+            texture.colorSpace = THREE.SRGBColorSpace
             texture.needsUpdate = true
             let corners = tileToCorners(x, y, zoomLvl, latitude, longitude)
             corners = corners.map((c) => {
@@ -284,8 +295,6 @@ export default {
               mesh.castShadow = false
               mesh.updateMatrix()
             } else {
-              texture.encoding = THREE.sRGBEncoding
-              texture.colorSpace = THREE.SRGBColorSpace
               material = new THREE.MeshPhongMaterial({
                 map: texture,
                 color: 0xffffff,
@@ -490,6 +499,7 @@ export default {
           t.imagePromise.cancel()
           return false
         }
+        return true
       })
     },
   },

package/src/utils/constants.js

@@ -11,6 +11,6 @@ export const MAP_LAYER_TYPE = {
   BASEMAP_SATELLITE: 'baseMapLayerStreetNumber',
   IGN_SATELLITE: 'ignSpainLayer_pnoa_image',
   IGN_ROAD: 'ignSpainLayer_map',
-  BKG_SATELLITE: 'bkgHexagonGermanyLayer',
+  HEXAGON_SATELLITE: 'bkgHexagonGermanyLayer',
   GEOPORTAL_SATELLITE: 'geoportail_fr_wmts_ortho_layer',
 }