- topograhy overlay (other algorithms)
- npm updates
This commit is contained in:
Arno Kaimbacher
parent
d679f0350a
commit
9f78d77c39
76
package-lock.json
generated
76
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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 };
|
||||
|
|
@ -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
6875
typings/globals/three/index.d.ts
vendored
File diff suppressed because it is too large
Load Diff
|
|
@ -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
1
typings/index.d.ts
vendored
|
|
@ -1 +0,0 @@
|
|||
/// <reference path="globals/three/index.d.ts" />
|
||||
Loading…
Reference in New Issue
Block a user