geolba/GeotiefExplore
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Releases Wiki Activity

- topograhy overlay (other algorithms)

Browse Source 
- npm updates
This commit is contained in:
Arno Kaimbacher 2021-04-27 20:58:46 +02:00
parent d679f0350a
commit 9f78d77c39
9 changed files with 279 additions and 6990 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
package-lock.json generated
View File

@ -1452,9 +1452,9 @@
"peer": true
},
"node_modules/@types/node": {
"version": "14.14.41",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.41.tgz",
"integrity": "sha512-dueRKfaJL4RTtSa7bWeTK1M+VH+Gns73oCgzvYfHZywRCoPSd8EkXBL0mZ9unPTveBn+D9phZBaxuzpwjWkW0g==",
"version": "15.0.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.0.tgz",
"integrity": "sha512-YN1d+ae2MCb4U0mMa+Zlb5lWTdpFShbAj5nmte6lel27waMMBfivrm0prC16p/Di3DyTrmerrYUT8/145HXxVw==",
"dev": true
},
"node_modules/@types/normalize-package-data": {
@ -2068,9 +2068,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001216",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001216.tgz",
"integrity": "sha512-1uU+ww/n5WCJRwUcc9UH/W6925Se5aNnem/G5QaSDga2HzvjYMs8vRbekGUN/PnTZ7ezTHcxxTEb9fgiMYwH6Q==",
"version": "1.0.30001218",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001218.tgz",
"integrity": "sha512-0ASydOWSy3bB88FbDpJSTt+PfDwnMqrym3yRZfqG8EXSQ06OZhF+q5wgYP/EN+jJMERItNcDQUqMyNjzZ+r5+Q==",
"dev": true
},
"node_modules/caseless": {
@ -2666,9 +2666,9 @@
}
},
"node_modules/electron-to-chromium": {
"version": "1.3.720",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.720.tgz",
"integrity": "sha512-B6zLTxxaOFP4WZm6DrvgRk8kLFYWNhQ5TrHMC0l5WtkMXhU5UbnvWoTfeEwqOruUSlNMhVLfYak7REX6oC5Yfw==",
"version": "1.3.722",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.722.tgz",
"integrity": "sha512-aAsc906l0RBsVTsGTK+KirVfey9eNtxyejdkbNzkISGxb7AFna3Kf0qvsp8tMttzBt9Bz3HddtYQ+++/PZtRYA==",
"dev": true
},
"node_modules/emoji-regex": {
@ -4581,9 +4581,9 @@
}
},
"node_modules/postcss": {
"version": "8.2.12",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.12.tgz",
"integrity": "sha512-BJnGT5+0q2tzvs6oQfnY2NpEJ7rIXNfBnZtQOKCIsweeWXBXeDd5k31UgTdS3d/c02ouspufn37mTaHWkJyzMQ==",
"version": "8.2.13",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz",
"integrity": "sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==",
"dev": true,
"dependencies": {
"colorette": "^1.2.2",
@ -5881,9 +5881,9 @@
}
},
"node_modules/terser": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.6.1.tgz",
"integrity": "sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==",
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.7.0.tgz",
"integrity": "sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==",
"dev": true,
"dependencies": {
"commander": "^2.20.0",
@ -6252,9 +6252,9 @@
}
},
"node_modules/webpack": {
"version": "5.35.1",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.35.1.tgz",
"integrity": "sha512-uWKYStqJ23+N6/EnMEwUjPSSKUG1tFmcuKhALEh/QXoUxwN8eb3ATNIZB38A+fO6QZ0xfc7Cu7KNV9LXNhDCsw==",
"version": "5.36.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.36.0.tgz",
"integrity": "sha512-HdOhLXClUEwTnzQnzpSG9iL00ej23ojvfnGpF49ba0MkuAT2q+WhQilHFFJHOIVRBqbzakQ1vCWQV2K+QLX0Qw==",
"dev": true,
"dependencies": {
"@types/eslint-scope": "^3.7.0",
@ -6262,7 +6262,7 @@
"@webassemblyjs/ast": "1.11.0",
"@webassemblyjs/wasm-edit": "1.11.0",
"@webassemblyjs/wasm-parser": "1.11.0",
"acorn": "^8.0.4",
"acorn": "^8.2.1",
"browserslist": "^4.14.5",
"chrome-trace-event": "^1.0.2",
"enhanced-resolve": "^5.8.0",
@ -7831,9 +7831,9 @@
"peer": true
},
"@types/node": {
"version": "14.14.41",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.41.tgz",
"integrity": "sha512-dueRKfaJL4RTtSa7bWeTK1M+VH+Gns73oCgzvYfHZywRCoPSd8EkXBL0mZ9unPTveBn+D9phZBaxuzpwjWkW0g==",
"version": "15.0.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.0.tgz",
"integrity": "sha512-YN1d+ae2MCb4U0mMa+Zlb5lWTdpFShbAj5nmte6lel27waMMBfivrm0prC16p/Di3DyTrmerrYUT8/145HXxVw==",
"dev": true
},
"@types/normalize-package-data": {
@ -8340,9 +8340,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001216",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001216.tgz",
"integrity": "sha512-1uU+ww/n5WCJRwUcc9UH/W6925Se5aNnem/G5QaSDga2HzvjYMs8vRbekGUN/PnTZ7ezTHcxxTEb9fgiMYwH6Q==",
"version": "1.0.30001218",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001218.tgz",
"integrity": "sha512-0ASydOWSy3bB88FbDpJSTt+PfDwnMqrym3yRZfqG8EXSQ06OZhF+q5wgYP/EN+jJMERItNcDQUqMyNjzZ+r5+Q==",
"dev": true
},
"caseless": {
@ -8803,9 +8803,9 @@
}
},
"electron-to-chromium": {
"version": "1.3.720",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.720.tgz",
"integrity": "sha512-B6zLTxxaOFP4WZm6DrvgRk8kLFYWNhQ5TrHMC0l5WtkMXhU5UbnvWoTfeEwqOruUSlNMhVLfYak7REX6oC5Yfw==",
"version": "1.3.722",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.722.tgz",
"integrity": "sha512-aAsc906l0RBsVTsGTK+KirVfey9eNtxyejdkbNzkISGxb7AFna3Kf0qvsp8tMttzBt9Bz3HddtYQ+++/PZtRYA==",
"dev": true
},
"emoji-regex": {
@ -10276,9 +10276,9 @@
}
},
"postcss": {
"version": "8.2.12",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.12.tgz",
"integrity": "sha512-BJnGT5+0q2tzvs6oQfnY2NpEJ7rIXNfBnZtQOKCIsweeWXBXeDd5k31UgTdS3d/c02ouspufn37mTaHWkJyzMQ==",
"version": "8.2.13",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz",
"integrity": "sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==",
"dev": true,
"requires": {
"colorette": "^1.2.2",
@ -11289,9 +11289,9 @@
}
},
"terser": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.6.1.tgz",
"integrity": "sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==",
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.7.0.tgz",
"integrity": "sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==",
"dev": true,
"requires": {
"commander": "^2.20.0",
@ -11562,9 +11562,9 @@
}
},
"webpack": {
"version": "5.35.1",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.35.1.tgz",
"integrity": "sha512-uWKYStqJ23+N6/EnMEwUjPSSKUG1tFmcuKhALEh/QXoUxwN8eb3ATNIZB38A+fO6QZ0xfc7Cu7KNV9LXNhDCsw==",
"version": "5.36.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.36.0.tgz",
"integrity": "sha512-HdOhLXClUEwTnzQnzpSG9iL00ej23ojvfnGpF49ba0MkuAT2q+WhQilHFFJHOIVRBqbzakQ1vCWQV2K+QLX0Qw==",
"dev": true,
"requires": {
"@types/eslint-scope": "^3.7.0",
@ -11572,7 +11572,7 @@
"@webassemblyjs/ast": "1.11.0",
"@webassemblyjs/wasm-edit": "1.11.0",
"@webassemblyjs/wasm-parser": "1.11.0",
"acorn": "^8.0.4",
"acorn": "^8.2.1",
"browserslist": "^4.14.5",
"chrome-trace-event": "^1.0.2",
"enhanced-resolve": "^5.8.0",

4
src/js/core/Map.ts
View File

@ -126,7 +126,9 @@ class Map extends OrbitControls {
feature_type: layerData.geologicdescription !== null ? layerData.geologicdescription['feature type'] : null,
});
callStack.push(this.addLayer(dxfLayer));
if (dxfLayer.name == " Topography") this.currentBasemap = dxfLayer;
if (dxfLayer.name == "Topography") {
this.currentBasemap = dxfLayer;
}
}
await Promise.all(callStack);
this.emit("ready");

2
src/js/layer/Layer.ts
View File

@ -24,7 +24,7 @@ abstract class Layer extends EventEmitter {
abstract onRemove(map): void;
abstract scaleZ(z): void;
abstract setVisible(visible): void;
abstract setWireframeMode(wireframe: boolean): void;
abstract setWireframeMode(wireframe?: boolean): void;
addTo(map: Map) {
map.addLayer(this);

46
src/js/layer/MarkerLayer.js → src/js/layer/MarkerLayer.ts
View File

@ -6,8 +6,31 @@ import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
import * as MathUtils from 'three/src/math/MathUtils';
import { Mesh } from 'three/src/objects/Mesh';
interface MarkerLayerOtions {
pane: string,
nonBubblingEvents: Array<string>,
opacity: number,
clickable: boolean,
editOptions?,
drawingCSSClass?: string,
drawingCursor?: string
}
export class MarkerLayer extends Layer {
_material;
_icon;
_latlng;
map;
editor;
options: MarkerLayerOtions = {
pane: 'markerPane',
nonBubblingEvents: ['click', 'dblclick', 'mouseover', 'mouseout', 'contextmenu'],
opacity: 1,
clickable: true
};
constructor(latlng, options) {
super();
util.setOptions(this, options);
@ -15,9 +38,18 @@ export class MarkerLayer extends Layer {
}
setVisible(visible: any): void {
this._icon
}
setWireframeMode(wireframe?: boolean): void {
return;
}
createEditor(map) {
map = map || this._map;
var Klass = this.options.editorClass || this.getEditorClass(map);
// var Klass = this.options.editorClass || this.getEditorClass(map);
let Klass = this.getEditorClass(map);
return new Klass(map, this, this.options.editOptions);
}
@ -32,13 +64,7 @@ export class MarkerLayer extends Layer {
return BaseEditor;
}
options = {
pane: 'markerPane',
nonBubblingEvents: ['click', 'dblclick', 'mouseover', 'mouseout', 'contextmenu'],
//icon: new L.Icon.Default(),
opacity: 1,
clickable: true,
};
@ -78,8 +104,8 @@ export class MarkerLayer extends Layer {
_initIcon() {
//create default icon
let options = { r: 0.25, c: 0xffff00, o: 0.8 };
let icon = new Mesh(new CylinderGeometry(0, 500, 1500),
new MeshLambertMaterial({ color: 0x38eeff, opacity: options.o, transparent: (options.o < 1) }));
this._material = new MeshLambertMaterial({ color: 0x38eeff, opacity: options.o, transparent: (options.o < 1) });
let icon = new Mesh(new CylinderGeometry(0, 500, 1500), this._material);
icon.rotation.x = MathUtils.degToRad(-90);
icon.visible = true;
//app.scene.add(app.boreholeMarker);

241
src/js/layer/TinLayer.ts
View File

@ -8,17 +8,16 @@ import { Vector3 } from 'three/src/math/Vector3';
import { Color } from 'three/src/math/Color';
import { MyMeshStandardMaterial } from '../clip/MyMeshStandardMaterial';
import { Group } from 'three/src/objects/Group';
// topography overlay
// import { Texture } from 'three/src/textures/Texture';
import { TextureLoader } from 'three/src/loaders/TextureLoader';
import proj4 from 'proj4/dist/proj4';
import { ShaderMaterial } from 'three/src/materials/ShaderMaterial';
import { shader } from '../clip/shader';
import { Material } from 'three/src/materials/Material';
// import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
import { Vector2 } from 'three/src/math/Vector2';
import { Matrix4 } from 'three/src/math/Matrix4';
import { Box3 } from 'three/src/math/Box3';
import { PlaneGeometry } from 'three/src/geometries/PlaneGeometry';
const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
@ -40,13 +39,21 @@ class TinLayer extends Layer {
color: string;
mainMesh;
uniforms = {
clipping: {}
clipping: {
clippingScale: { type: "f", value: 1.0 },
color: { type: "c", value: null },
clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) },
map: { type: 't', value: null },
percent: { type: "f", value: 1 }
}
};
public baseExtent = {
min: { x: 0, y: 0 },
max: { x: 0, y: 0 }
};
index: number;
boundingBox: Box3;
images = [{
width: 405,
// "url": "https://sdi.noe.gv.at/at.gv.noe.geoserver/OGD/wms",
@ -104,6 +111,8 @@ class TinLayer extends Layer {
}
async onAdd(map) {
proj4.defs("EPSG:4312", "+proj=longlat +ellps=bessel +towgs84=577.326,90.129,463.919,5.137,1.474,5.297,2.4232 +no_defs");
proj4.defs("EPSG:3034", "+proj=lcc +lat_1=35 +lat_2=65 +lat_0=52 +lon_0=10 +x_0=4000000 +y_0=2800000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
await this.build(this.getScene());
map.update();
}
@ -307,38 +316,45 @@ class TinLayer extends Layer {
geometry.scale(1, 1, 1);
geometry.computeBoundingSphere();
geometry.computeVertexNormals();// computed vertex normals are orthogonal to the face f
// geometry.computeBoundingBox();
//find out the dimensions, to let texture size 100% fit without stretching
geometry.computeBoundingBox();
// const center = new Vector3();
// let bboxSize = geometry.boundingBox.getSize(center);
// let uvMapSize = Math.min(bboxSize.x, bboxSize.y, bboxSize.z);
let boundingBox = geometry.boundingBox;
let boundingBox = this.boundingBox = geometry.boundingBox;
this.baseExtent.min.x = boundingBox.min.x;
this.baseExtent.min.y = boundingBox.min.y;
this.baseExtent.max.x = boundingBox.max.x;
this.baseExtent.max.y = boundingBox.max.y;
// const convexGeometry = new ConvexGeometry(points);
// let dest = new proj4.Proj("EPSG:3034");
// let source = new proj4.Proj("EPSG:4312");
// let p1 = proj4.toPoint([-34600.164063, 281125.718750]);
// let p2 = proj4.toPoint([51019.078125, 402863.976562]);
// proj4.transform(source, dest, p1);
// proj4.transform(source, dest, p2);
// this.baseExtent.min.x = p1.x;
// this.baseExtent.min.y = p1.y;
// this.baseExtent.max.x = p2.x;
// this.baseExtent.max.y = p2.y;
// this.baseExtent.min.x = -34600.164063;
// this.baseExtent.min.y = 281125.718750;
// this.baseExtent.max.x = 51019.078125;
// this.baseExtent.max.y = 402863.976562;
let color = parseInt(this.color, 16);
// this.material = new MeshStandardMaterial({
// color: color,
// metalness: 0.1,
// roughness: 0.75,
// flatShading: true,
// side: DoubleSide,
// clippingPlanes: [this.xLocalPlane, this.yLocalPlane],
// clipIntersection: false,
// clipShadows: true,
// });
// this.materialsArray.push(this.material);
if (this.name == "Topography") {
let width = this.baseExtent.max.x - this.baseExtent.min.x;
let height = this.baseExtent.max.y - this.baseExtent.min.y;
let planeGeometry = new PlaneGeometry(width, height, 298, 134)
let planeMaterial = new MeshLambertMaterial({ color: 0xecf0f1, side: DoubleSide });
let planeMesh = new Mesh(planeGeometry, planeMaterial);
let center = new Vector3((this.baseExtent.min.x + this.baseExtent.max.x) / 2, (this.baseExtent.min.y + this.baseExtent.max.y) / 2, 0);
planeMesh.position.x = center.x;
planeMesh.position.y = center.y;
this._addObject(planeMesh, false);
let image = this.images[0];
if (image.texture === undefined) {
@ -354,15 +370,12 @@ class TinLayer extends Layer {
}
}
this.uniforms = {
clipping: {
clippingScale: { type: "f", value: 1.0 },
clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) },
map: { type: 't', value: image.texture },
percent: { type: "f", value: 0.7 }
}
};
this.uniforms.clipping.clippingScale = { type: "f", value: 1.0 };
this.uniforms.clipping.clippingLow = { type: "v3", value: new Vector3(0, 0, 0) };
this.uniforms.clipping.clippingHigh = { type: "v3", value: new Vector3(0, 0, 0) };
this.uniforms.clipping.map = { type: 't', value: image.texture };
this.uniforms.clipping.percent = { type: "f", value: 0.7 };
//calculate UV coordinates, if uv attribute is not present, it will be added
// https://jsfiddle.net/mmalex/pcjbysn1/
@ -384,18 +397,19 @@ class TinLayer extends Layer {
vertexShader: shader.vertexClipping,
fragmentShader: shader.fragmentClippingFront,
});
// this.material.map.wrapS = RepeatWrapping;
// this.material.map.wrapT = RepeatWrapping;
} else {
let uniforms = this.uniforms = {
clipping: {
clippingScale: { type: "f", value: 1.0 },
color: { type: "c", value: new Color(color) },
clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) }
}
};
// let uniforms = this.uniforms.clipping = {
// clippingScale: { type: "f", value: 1.0 },
// color: { type: "c", value: new Color(color) },
// clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
// clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) }
// }
// };
this.uniforms.clipping.clippingScale = { type: "f", value: 1.0 };
this.uniforms.clipping.color = { type: "c", value: new Color(color) };
this.uniforms.clipping.clippingLow = { type: "v3", value: new Vector3(0, 0, 0) };
this.uniforms.clipping.clippingHigh = { type: "v3", value: new Vector3(0, 0, 0) };
this.material = new MyMeshStandardMaterial({
color: color,
@ -403,7 +417,7 @@ class TinLayer extends Layer {
roughness: 0.75,
flatShading: true,
side: DoubleSide
}, uniforms.clipping);
}, this.uniforms.clipping);
}
this.materialsArray.push(this.material);
@ -514,6 +528,35 @@ class TinLayer extends Layer {
}
async loadTextureWms(url, imageParameter) {
const vertexA = new Vector3(this.baseExtent.min.x, this.baseExtent.min.y); // set this from cube
const vertexB = new Vector3(this.baseExtent.min.x, this.baseExtent.max.y);
const vertexC = new Vector3(this.baseExtent.max.x, this.baseExtent.max.y);
// let screenSpaceVector = new Vector3().subVectors(vertexA.project(this._map.camera), vertexB.project(this._map.camera));
// screenSpaceVector.x *= this._map.container.clientWidth;
// screenSpaceVector.y *= this._map.container.clientWidth;
// screenSpaceVector.z = 0
// const pixelLength = screenSpaceVector.length();
vertexA.project(this._map.camera);
vertexB.project(this._map.camera);
vertexC.project(this._map.camera);
// let distWidth = vertexA.project(this._map.camera).distanceTo(vertexB.project(this._map.camera));
let width = this._map.container.clientWidth;
let height = this._map.container.clientHeight;
vertexA.x = (vertexA.x + 1) * width / 2;
vertexA.y = - (vertexA.y - 1) * height / 2;
vertexA.z = 0;
vertexB.x = (vertexB.x + 1) * width / 2;
vertexB.y = - (vertexB.y - 1) * height / 2;
vertexB.z = 0;
vertexC.x = (vertexC.x + 1) * width / 2;
vertexC.y = - (vertexC.y - 1) * height / 2;
vertexC.z = 0;
let distWidth = Math.round(vertexA.distanceTo(vertexB));
let distHeight = Math.round(vertexB.distanceTo(vertexC));
let dest = new proj4.Proj("EPSG:3857");
let source = new proj4.Proj("EPSG:3034");
let p1 = proj4.toPoint([this.baseExtent.min.x, this.baseExtent.min.y]);
@ -529,8 +572,8 @@ class TinLayer extends Layer {
version: "1.3.0",
service: "WMS",
request: "GetMap",
"width": imageParameter.width,
"height": imageParameter.height,
"width": distWidth, //imageParameter.width,
"height": distHeight, //imageParameter.height,
// "size": imageParameter.width + "," + imageParameter.height,
"crs": "EPSG:3857", // + imageParameter.bboxSR,
// "bboxSR": imageParameter.bboxSR,
@ -558,6 +601,104 @@ class TinLayer extends Layer {
});
}
async changeImage(i) {
//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);
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);
}
// }
//configure the material now that we have all of the data
// this.mainMesh.material.map = image.texture;
this.uniforms.clipping.map.value = image.texture;
this.mainMesh.material.needsUpdate = true;
if (this.visible === false) {
this.setVisible(true);
}
this._map.update();
}
async requestImage(url, imageParameter) {
const vertexA = new Vector3(this.boundingBox.min.x, this.boundingBox.min.y); // set this from cube
const vertexB = new Vector3(this.boundingBox.min.x, this.boundingBox.max.y);
const vertexC = new Vector3(this.boundingBox.max.x, this.boundingBox.max.y);
// let screenSpaceVector = new Vector3().subVectors(vertexA.project(this._map.camera), vertexB.project(this._map.camera));
// screenSpaceVector.x *= this._map.container.clientWidth;
// screenSpaceVector.y *= this._map.container.clientWidth;
// screenSpaceVector.z = 0
// const pixelLength = screenSpaceVector.length();
vertexA.project(this._map.camera);
vertexB.project(this._map.camera);
vertexC.project(this._map.camera);
// let distWidth = vertexA.project(this._map.camera).distanceTo(vertexB.project(this._map.camera));
let width = this._map.container.clientWidth;
let height = this._map.container.clientHeight;
vertexA.x = (vertexA.x + 1) * width / 2;
vertexA.y = - (vertexA.y - 1) * height / 2;
vertexA.z = 0;
vertexB.x = (vertexB.x + 1) * width / 2;
vertexB.y = - (vertexB.y - 1) * height / 2;
vertexB.z = 0;
vertexC.x = (vertexC.x + 1) * width / 2;
vertexC.y = - (vertexC.y - 1) * height / 2;
vertexC.z = 0;
let distWidth = Math.round(vertexA.distanceTo(vertexB));
let distHeight = Math.round(vertexB.distanceTo(vertexC));
let dest = new proj4.Proj("EPSG:3857");
let source = new proj4.Proj("EPSG:3034");
let p1 = proj4.toPoint([this.baseExtent.min.x, this.baseExtent.min.y]);
let p2 = proj4.toPoint([this.baseExtent.max.x, this.baseExtent.max.y]);
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 = {
// "size": imageParameter.width + "," + imageParameter.height,
"size": distWidth + "," + distHeight,
"bboxSR": "3857", // imageParameter.bboxSR,
"bbox": bbox,
"format": "png",
"f": "pjson"
};
let query = Object.keys(params)
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
.join('&');
url = url + '?' + query;
const response = await fetch(url);
if (response.ok) {
return response.json();
} else {
throw new Error("HTTP error, status = " + response.status);
}
}
//helper function to load in the texture
async loadTexture(texturePath) {
const textureLoader = new TextureLoader();
return new Promise((resolve, reject) => {
textureLoader.load(
texturePath,
(texture) => resolve(texture),
undefined,
err => reject(err)
);
});
}
}
export { TinLayer };

16
src/js/main.js
View File

@ -154,7 +154,11 @@ class Application {
// this.camera.position.set(0, -0.1, 150);
// this.camera.lookAt(new Vector3(0, 0, 0));
let map = this.map = await Map.build(this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta_all?modelid=20');
let map = this.map = await Map.build(
this.scene,
this.container,
'https://geusegdi01.geus.dk/meta3d/rpc/model_meta_all?modelid=20'
);
this.mapTitle = document.querySelector('#map-title');
this.mapTitle.innerHTML += map.title;
map.on('ready', () => {
@ -396,11 +400,11 @@ class Application {
this.gridlayer.toggle();
}, this);
//toggle SlicingBox
let chkSlicingBox = document.getElementById("chkSlicingBox");
domEvent.on(chkSlicingBox, 'click', function (e) {
this.selectionBox.toggle();
}, this);
//toggle SlicingBox
let chkSlicingBox = document.getElementById("chkSlicingBox");
domEvent.on(chkSlicingBox, 'click', function (e) {
this.selectionBox.toggle();
}, this);
}

6875
typings/globals/three/index.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

8
typings/globals/three/typings.json
View File

@ -1,8 +0,0 @@
{
"resolution": "main",
"tree": {
"src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/index.d.ts",
"raw": "registry:dt/three#0.84.0+20170323144537",
"typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/index.d.ts"
}
}

1
typings/index.d.ts vendored
View File

@ -1 +0,0 @@
/// <reference path="globals/three/index.d.ts" />