- Dem.Layer.js: add open WMS layer as basemap
- transformation problem with esri base layer
This commit is contained in:
Arno Kaimbacher
parent
0feef57300
commit
67d6b61ed6
BIN
images/basemap/background_osm_world_topography.png
Normal file
BIN
images/basemap/background_osm_world_topography.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
54
package-lock.json
generated
54
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@ class Map extends OrbitControls {
|
|||
_controlCorners;
|
||||
_controlContainer;
|
||||
_controls;
|
||||
size;
|
||||
camera;
|
||||
container;
|
||||
length;
|
||||
width;
|
||||
height;
|
||||
|
|
@ -82,8 +84,9 @@ 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' },
|
||||
{ "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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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) {
|
||||
if (image.type == "esri") {
|
||||
// image.texture = this._loadTextureData(image.data);
|
||||
|
||||
//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 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",
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user