diff --git a/images/basemap/background_osm_world_topography.png b/images/basemap/background_osm_world_topography.png new file mode 100644 index 0000000..9e5ee42 Binary files /dev/null and b/images/basemap/background_osm_world_topography.png differ diff --git a/package-lock.json b/package-lock.json index 23553b9..a55e0a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,25 +56,24 @@ "dev": true }, "node_modules/@babel/core": { - "version": "7.13.13", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.13.tgz", - "integrity": "sha512-1xEs9jZAyKIouOoCmpsgk/I26PoKyvzQ2ixdRpRzfbcp1fL+ozw7TUgdDgwonbTovqRaTfRh50IXuw4QrWO0GA==", + "version": "7.13.14", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.14.tgz", + "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", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.12.tgz", - "integrity": "sha512-7zVQqMO3V+K4JOOj40kxiCrMf6xlQAkewBB0eu2b03OO/Q21ZutOzjpfD79A5gtE/2OWi1nv625MrDlGlkbknQ==", + "version": "7.13.14", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.14.tgz", + "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/types": "^7.13.12" + "@babel/traverse": "^7.13.13", + "@babel/types": "^7.13.14" } }, "node_modules/@babel/helper-optimise-call-expression": { @@ -1294,9 +1293,9 @@ } }, "node_modules/@babel/types": { - "version": "7.13.13", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.13.tgz", - "integrity": "sha512-kt+EpC6qDfIaqlP+DIbIJOclYy/A1YXs9dAf/ljbi+39Bcbc073H6jKVpXEr/EoIh5anGn5xq/yRVzKl+uIc9w==", + "version": "7.13.14", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.14.tgz", + "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", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.13.tgz", - "integrity": "sha512-1xEs9jZAyKIouOoCmpsgk/I26PoKyvzQ2ixdRpRzfbcp1fL+ozw7TUgdDgwonbTovqRaTfRh50IXuw4QrWO0GA==", + "version": "7.13.14", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.14.tgz", + "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", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.12.tgz", - "integrity": "sha512-7zVQqMO3V+K4JOOj40kxiCrMf6xlQAkewBB0eu2b03OO/Q21ZutOzjpfD79A5gtE/2OWi1nv625MrDlGlkbknQ==", + "version": "7.13.14", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.13.14.tgz", + "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/types": "^7.13.12" + "@babel/traverse": "^7.13.13", + "@babel/types": "^7.13.14" } }, "@babel/helper-optimise-call-expression": { @@ -7673,9 +7671,9 @@ } }, "@babel/types": { - "version": "7.13.13", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.13.tgz", - "integrity": "sha512-kt+EpC6qDfIaqlP+DIbIJOclYy/A1YXs9dAf/ljbi+39Bcbc073H6jKVpXEr/EoIh5anGn5xq/yRVzKl+uIc9w==", + "version": "7.13.14", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.14.tgz", + "integrity": "sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==", "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.12.11", diff --git a/src/js/core/Map.js b/src/js/core/Map.js index 7b0c1a0..3cde5f7 100644 --- a/src/js/core/Map.js +++ b/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": [ - { "name": "esri:topograhy", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'ESRI Topograhy' }, - { "name": "esri:imagery", "type": "MapServer", 'image': 'background_esri_world_imagery.png', 'title': 'ESRI Imagery' }, + "services": [ + { "name": "osm:wms", "type": "MapServer", 'image': 'background_osm_world_topography.png', 'title': 'OSM WMS' }, + { "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; } diff --git a/src/js/layer/DemLayer.js b/src/js/layer/DemLayer.js index 445ad34..84a64bb 100644 --- a/src/js/layer/DemLayer.js +++ b/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, - "url": "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/export", - "height": 549, //509 - "bboxSR": 3034 - }, { - "width": 407, - "url": "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/export", - "height": 549, - "bboxSR": 3034 + width: 405, + // "url": "https://sdi.noe.gv.at/at.gv.noe.geoserver/OGD/wms", + url: " https://ows.terrestris.de/osm/service", + height: 549, + bboxSR: 3857, + type: "wms" + }, + { + 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); - let data = await this.requestImage(image.url, image); - // image.texture = await new TextureLoader().load(data.href); - image.texture = await this.loadTexture(data.href); + if (image.type == "esri") { + // image.texture = this._loadTextureData(image.data); + let data = await this.requestImage(image.url, image); + + // 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); - let data = await this.requestImage(image.url, image); - // image.texture = new TextureLoader().load(data.href); - 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); + } } //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", diff --git a/src/js/main.js b/src/js/main.js index 2c7d8db..9ef9da9 100644 --- a/src/js/main.js +++ b/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({