- Dem.Layer.js: add open WMS layer as basemap

- transformation problem with esri base layer

package-lock.json

@@ -56,25 +56,24 @@
             "dev": true
         },
         "node_modules/@babel/core": {
-            "version": "7.13.13",
+            "version": "7.13.14",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.13.tgz",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.14.tgz",
-            "integrity": "sha512-1xEs9jZAyKIouOoCmpsgk/I26PoKyvzQ2ixdRpRzfbcp1fL+ozw7TUgdDgwonbTovqRaTfRh50IXuw4QrWO0GA==",
+            "integrity": "sha512-wZso/vyF4ki0l0znlgM4inxbdrUvCb+cVz8grxDq+6C9k6qbqoIJteQOKicaKjCipU3ISV+XedCqpL2RJJVehA==",
             "dev": true,
             "dependencies": {
                 "@babel/code-frame": "^7.12.13",
                 "@babel/generator": "^7.13.9",
                 "@babel/helper-compilation-targets": "^7.13.13",
-                "@babel/helper-module-transforms": "^7.13.12",
+                "@babel/helper-module-transforms": "^7.13.14",
                 "@babel/helpers": "^7.13.10",
                 "@babel/parser": "^7.13.13",
                 "@babel/template": "^7.12.13",
                 "@babel/traverse": "^7.13.13",
-                "@babel/types": "^7.13.13",
+                "@babel/types": "^7.13.14",
                 "convert-source-map": "^1.7.0",
                 "debug": "^4.1.0",
                 "gensync": "^1.0.0-beta.2",
                 "json5": "^2.1.2",
-                "lodash": "^4.17.19",
                 "semver": "^6.3.0",
                 "source-map": "^0.5.0"
             },
@@ -237,9 +236,9 @@
             }
         },
         "node_modules/@babel/helper-module-transforms": {
-            "version": "7.13.12",
+            "version": "7.13.14",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.12.tgz",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.14.tgz",
-            "integrity": "sha512-7zVQqMO3V+K4JOOj40kxiCrMf6xlQAkewBB0eu2b03OO/Q21ZutOzjpfD79A5gtE/2OWi1nv625MrDlGlkbknQ==",
+            "integrity": "sha512-QuU/OJ0iAOSIatyVZmfqB0lbkVP0kDRiKj34xy+QNsnVZi/PA6BoSoreeqnxxa9EHFAIL0R9XOaAR/G9WlIy5g==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-module-imports": "^7.13.12",
@@ -248,8 +247,8 @@
                 "@babel/helper-split-export-declaration": "^7.12.13",
                 "@babel/helper-validator-identifier": "^7.12.11",
                 "@babel/template": "^7.12.13",
-                "@babel/traverse": "^7.13.0",
+                "@babel/traverse": "^7.13.13",
-                "@babel/types": "^7.13.12"
+                "@babel/types": "^7.13.14"
             }
         },
         "node_modules/@babel/helper-optimise-call-expression": {
@@ -1294,9 +1293,9 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.13.13",
+            "version": "7.13.14",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.13.tgz",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.14.tgz",
-            "integrity": "sha512-kt+EpC6qDfIaqlP+DIbIJOclYy/A1YXs9dAf/ljbi+39Bcbc073H6jKVpXEr/EoIh5anGn5xq/yRVzKl+uIc9w==",
+            "integrity": "sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-validator-identifier": "^7.12.11",
@@ -6652,25 +6651,24 @@
             "dev": true
         },
         "@babel/core": {
-            "version": "7.13.13",
+            "version": "7.13.14",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.13.tgz",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.14.tgz",
-            "integrity": "sha512-1xEs9jZAyKIouOoCmpsgk/I26PoKyvzQ2ixdRpRzfbcp1fL+ozw7TUgdDgwonbTovqRaTfRh50IXuw4QrWO0GA==",
+            "integrity": "sha512-wZso/vyF4ki0l0znlgM4inxbdrUvCb+cVz8grxDq+6C9k6qbqoIJteQOKicaKjCipU3ISV+XedCqpL2RJJVehA==",
             "dev": true,
             "requires": {
                 "@babel/code-frame": "^7.12.13",
                 "@babel/generator": "^7.13.9",
                 "@babel/helper-compilation-targets": "^7.13.13",
-                "@babel/helper-module-transforms": "^7.13.12",
+                "@babel/helper-module-transforms": "^7.13.14",
                 "@babel/helpers": "^7.13.10",
                 "@babel/parser": "^7.13.13",
                 "@babel/template": "^7.12.13",
                 "@babel/traverse": "^7.13.13",
-                "@babel/types": "^7.13.13",
+                "@babel/types": "^7.13.14",
                 "convert-source-map": "^1.7.0",
                 "debug": "^4.1.0",
                 "gensync": "^1.0.0-beta.2",
                 "json5": "^2.1.2",
-                "lodash": "^4.17.19",
                 "semver": "^6.3.0",
                 "source-map": "^0.5.0"
             }
@@ -6814,9 +6812,9 @@
             }
         },
         "@babel/helper-module-transforms": {
-            "version": "7.13.12",
+            "version": "7.13.14",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.12.tgz",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.14.tgz",
-            "integrity": "sha512-7zVQqMO3V+K4JOOj40kxiCrMf6xlQAkewBB0eu2b03OO/Q21ZutOzjpfD79A5gtE/2OWi1nv625MrDlGlkbknQ==",
+            "integrity": "sha512-QuU/OJ0iAOSIatyVZmfqB0lbkVP0kDRiKj34xy+QNsnVZi/PA6BoSoreeqnxxa9EHFAIL0R9XOaAR/G9WlIy5g==",
             "dev": true,
             "requires": {
                 "@babel/helper-module-imports": "^7.13.12",
@@ -6825,8 +6823,8 @@
                 "@babel/helper-split-export-declaration": "^7.12.13",
                 "@babel/helper-validator-identifier": "^7.12.11",
                 "@babel/template": "^7.12.13",
-                "@babel/traverse": "^7.13.0",
+                "@babel/traverse": "^7.13.13",
-                "@babel/types": "^7.13.12"
+                "@babel/types": "^7.13.14"
             }
         },
         "@babel/helper-optimise-call-expression": {
@@ -7673,9 +7671,9 @@
             }
         },
         "@babel/types": {
-            "version": "7.13.13",
+            "version": "7.13.14",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.13.tgz",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.14.tgz",
-            "integrity": "sha512-kt+EpC6qDfIaqlP+DIbIJOclYy/A1YXs9dAf/ljbi+39Bcbc073H6jKVpXEr/EoIh5anGn5xq/yRVzKl+uIc9w==",
+            "integrity": "sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==",
             "dev": true,
             "requires": {
                 "@babel/helper-validator-identifier": "^7.12.11",

src/js/core/Map.js

@@ -16,7 +16,9 @@ class Map extends OrbitControls {
     _controlCorners;
     _controlContainer;
     _controls;
+    size;
     camera;
+    container;
     length;
     width;
     height;
@@ -81,9 +83,10 @@ class Map extends OrbitControls {
 
         this.basemaps = {
             "currentVersion": 10.01,
-            "services": [
+            "services": [               
-                { "name": "esri:topograhy", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'ESRI Topograhy' },
+                { "name": "osm:wms", "type": "MapServer", 'image': 'background_osm_world_topography.png', 'title': 'OSM WMS' },
-                { "name": "esri:imagery", "type": "MapServer", 'image': 'background_esri_world_imagery.png', 'title': 'ESRI Imagery' },
+                { "name": "esri:topograhy", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'ESRI Topography' },
+               
             ]
         };
     }
@@ -168,7 +171,7 @@ class Map extends OrbitControls {
     }
 
     async addLayer(layer) {
-        var id = util.stamp(layer);
+        let id = util.stamp(layer);
         if (this._layers[id]) {
             return this;
         }

src/js/layer/DemLayer.js

@@ -13,18 +13,24 @@ import { Texture } from 'three/src/textures/Texture';
 import { TextureLoader } from 'three/src/loaders/TextureLoader';
 import { Plane } from 'three/src/math/Plane';
 import { Vector3 } from 'three/src/math/Vector3';
+import proj4 from 'proj4/dist/proj4';
+
 export class DemLayer extends Layer {
 
     images = [{
-        "width": 407, //904,
+        width: 405,
-        "url": "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/export",
+        // "url": "https://sdi.noe.gv.at/at.gv.noe.geoserver/OGD/wms",
-        "height": 549, //509
+        url: " https://ows.terrestris.de/osm/service",
-        "bboxSR": 3034
+        height: 549,
-    }, {
+        bboxSR: 3857,
-        "width": 407,
+        type: "wms"
-        "url": "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/export",
+    },
-        "height": 549,
+    {
-        "bboxSR": 3034
+        width: 405,
+        url: "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/export",
+        height: 549, //509
+        bboxSR: 3034,
+        type: "esri"
     }
     ];
 
@@ -84,10 +90,15 @@ export class DemLayer extends Layer {
                         image.texture = THREE.ImageUtils._loadTexture(image.src);
                     }
                     else {
-                        // image.texture = this._loadTextureData(image.data);
+                        if (image.type == "esri") {
-                        let data = await this.requestImage(image.url, image);
+                            // image.texture = this._loadTextureData(image.data);
-                        // image.texture = await new TextureLoader().load(data.href);
+                            let data = await this.requestImage(image.url, image);
-                        image.texture = await this.loadTexture(data.href);
+
+                            // image.texture = await new TextureLoader().load(data.href);
+                            image.texture = await this.loadTexture(data.href);
+                        } else if (image.type == "wms") {
+                            image.texture = await this.loadTextureWms(image.url, image);
+                        }
                     }
                 }
                 opt.map = image.texture;
@@ -145,14 +156,12 @@ export class DemLayer extends Layer {
     }
 
     scaleZ(z) {
-        // this.mainMesh.scale.z = z;
         this.objectGroup.scale.z = z;
     }
 
     setVisible(visible) {
         this.visible = visible;
         this.objectGroup.visible = visible;
-        // this.mainMesh.visible = visible;
         //Q3D.application.queryObjNeedsUpdate = true;
         this.emit('visibility-change');
     }
@@ -177,12 +186,15 @@ export class DemLayer extends Layer {
         //this.mainMesh.material.map = THREE.ImageUtils.loadTexture(src);
         let image = this.images[i];
         if (image.texture === undefined) {
-            // image.texture = this._loadTextureData(image.data);
+            if (image.type == "esri") {
+                // image.texture = this._loadTextureData(image.data);
+                let data = await this.requestImage(image.url, image);
 
-            //image.texture = await this.loadTextureData(image.data);
+                // image.texture = await new TextureLoader().load(data.href);
-            let data = await this.requestImage(image.url, image);
+                image.texture = await this.loadTexture(data.href);
-            // image.texture = new TextureLoader().load(data.href);           
+            } else if (image.type == "wms") {
-            image.texture = await this.loadTexture(data.href);
+                image.texture = await this.loadTextureWms(image.url, image);
+            }
         }
         //configure the material now that we have all of the data
         this.mainMesh.material.map = image.texture;
@@ -206,6 +218,51 @@ export class DemLayer extends Layer {
         });
     }
 
+    async loadTextureWms(url, imageParameter) {
+        let dest = new proj4.Proj("EPSG:3857");
+        let source = new proj4.Proj("EPSG:3034");
+        let p1 = new proj4.toPoint([this.baseExtent.x.min, this.baseExtent.y.min]);
+        let p2 = new proj4.toPoint([this.baseExtent.x.max, this.baseExtent.y.max]);
+
+        proj4.transform(source, dest, p1);
+        proj4.transform(source, dest, p2);
+
+        // let bbox = this.baseExtent.x.min + "," + this.baseExtent.y.min + "," + this.baseExtent.x.max + "," + this.baseExtent.y.max;
+        let bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y;
+
+        let params = {
+            version: "1.3.0",
+            service: "WMS",
+            request: "GetMap",
+            "width": imageParameter.width,
+            "height": imageParameter.height,
+            // "size": imageParameter.width + "," + imageParameter.height,
+            "crs": "EPSG:3857", //  + imageParameter.bboxSR,
+            // "bboxSR": imageParameter.bboxSR,
+            // "bbox": "3955850,2183470.1545778836,4527300,2502829.8454221168",
+            "bbox": bbox,
+            "styles": "",
+            // "format": "png",
+            "format": "image/png",
+            "layers": "OSM-WMS"
+            // "f": "pjson"
+        };
+        let query = Object.keys(params)
+            .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+            .join('&');
+        let texturePath = url + '?' + query;
+
+        const textureLoader = new TextureLoader();
+        return new Promise((resolve, reject) => {
+            textureLoader.load(
+                texturePath,
+                (texture) => resolve(texture),
+                undefined,
+                err => reject(err)
+            );
+        });
+    }
+
 
     async onAdd(map) {
         //this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation;
@@ -291,12 +348,22 @@ export class DemLayer extends Layer {
     }
 
     async requestImage(url, imageParameter) {
-        let bbox = this.baseExtent.x.min + "," + this.baseExtent.y.min + "," + this.baseExtent.x.max + "," + this.baseExtent.y.max;
+        let dest = new proj4.Proj("EPSG:3857");
+        let source = new proj4.Proj("EPSG:3034");
+        let p1 = new proj4.toPoint([this.baseExtent.x.min, this.baseExtent.y.min]);
+        let p2 = new proj4.toPoint([this.baseExtent.x.max, this.baseExtent.y.max]);
+
+        proj4.transform(source, dest, p1);
+        proj4.transform(source, dest, p2);
+
+        // let bbox = this.baseExtent.x.min + "," + this.baseExtent.y.min + "," + this.baseExtent.x.max + "," + this.baseExtent.y.max;
+        let bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y;
+
         let params = {
             // "width": imageParameter.width,
             // "height": imageParameter.height,
             "size": imageParameter.width + "," + imageParameter.height,
-            "bboxSR": imageParameter.bboxSR,
+            "bboxSR": "3857", // imageParameter.bboxSR,
             // "bbox": "3955850,2183470.1545778836,4527300,2502829.8454221168",
             "bbox": bbox,
             "format": "png",

src/js/main.js

@@ -1,7 +1,6 @@
 import { DirectionalLight } from 'three/src/lights/DirectionalLight';
 import { AmbientLight } from 'three/src/lights/AmbientLight';
 import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
-// import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
 import { Scene } from 'three/src/scenes/Scene';
 import { Vector3 } from 'three/src/math/Vector3';
 import { GridLayer } from './layer/GridLayer';
@@ -199,7 +198,7 @@ class Application {
                 "materialtypee": 0,
                 "ds": 1,
                 "bottomZ": 3000,
-                "o": 0.8
+                "o": 0.7
             }]
         });
         demLayer.addBlock({