- reactivate DemLayer class for laoding basemaps
- DemLayer.js to DemLayer.ts
This commit is contained in:
Arno Kaimbacher
parent
fa64fa904b
commit
da5437da7c
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
BIN
images/basemap/background_osm_gray_world_topography.png
Normal file
BIN
images/basemap/background_osm_gray_world_topography.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -6,9 +6,12 @@ import { BoreholeControl } from '../controls/BoreholeControl';
|
||||||
import { BoreholePopup } from '../controls/BoreholePopup';
|
import { BoreholePopup } from '../controls/BoreholePopup';
|
||||||
import * as util from './utilities';
|
import * as util from './utilities';
|
||||||
import { TinLayer } from '../layer/TinLayer';
|
import { TinLayer } from '../layer/TinLayer';
|
||||||
|
import { DemLayer } from '../layer/DemLayer';
|
||||||
import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
|
import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
|
||||||
import { Vector3 } from 'three/src/math/Vector3';
|
import { Vector3 } from 'three/src/math/Vector3';
|
||||||
import { Group } from 'three';
|
import { Group } from 'three';
|
||||||
|
import { Layer } from '../layer/Layer';
|
||||||
|
import { LayerService } from '../services/layer.service';
|
||||||
|
|
||||||
class Map extends OrbitControls {
|
class Map extends OrbitControls {
|
||||||
|
|
||||||
|
|
@ -22,18 +25,19 @@ class Map extends OrbitControls {
|
||||||
public length: number;
|
public length: number;
|
||||||
public width: number;
|
public width: number;
|
||||||
public height: number;
|
public height: number;
|
||||||
public x: number; public y: number; public z: number;
|
public x; public y; public z;
|
||||||
public title: string;
|
public title: string;
|
||||||
public serviceUrl: string;
|
public serviceUrl: string;
|
||||||
public basemaps: Object;
|
public basemaps: Object;
|
||||||
public baseExtent: Object;
|
public baseExtent: Object;
|
||||||
public currentBasemap;
|
public currentBasemap: Layer;
|
||||||
public contact: string;
|
public contact: string;
|
||||||
|
public model_id: number;
|
||||||
private _modelNode: Group;
|
private _modelNode: Group;
|
||||||
private _stencilNode: Group;
|
private _stencilNode: Group;
|
||||||
private _profileNode: Group;
|
private _profileNode: Group;
|
||||||
|
|
||||||
constructor(x, y, z, scene, container) {
|
constructor(x, y, z, scene, container, model_id) {
|
||||||
|
|
||||||
let size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);
|
let size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);
|
||||||
let center = new Vector3((x.min + x.max) / 2, (y.min + y.max) / 2, 0);
|
let center = new Vector3((x.min + x.max) / 2, (y.min + y.max) / 2, 0);
|
||||||
|
|
@ -59,6 +63,7 @@ class Map extends OrbitControls {
|
||||||
// call parent constructor of OrbitControls
|
// call parent constructor of OrbitControls
|
||||||
super(size, center, camera, scene, container);
|
super(size, center, camera, scene, container);
|
||||||
|
|
||||||
|
this.model_id = model_id;
|
||||||
this.size = size;
|
this.size = size;
|
||||||
this.camera = camera;
|
this.camera = camera;
|
||||||
this.container = container;
|
this.container = container;
|
||||||
|
|
@ -95,19 +100,20 @@ class Map extends OrbitControls {
|
||||||
"currentVersion": 10.01,
|
"currentVersion": 10.01,
|
||||||
"services": [
|
"services": [
|
||||||
{ "name": "osm:wms", "type": "MapServer", 'image': 'background_osm_world_topography.png', 'title': 'OSM WMS' },
|
{ "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' },
|
{ "name": "osm:gray-wms", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'OSM Gray WMS' },
|
||||||
|
// { "name": "esri:topograhy", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'ESRI Topography' },
|
||||||
|
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
static async build(scene, container, serviceUrl) {
|
static async build(scene, container, serviceUrl, model_id) {
|
||||||
const modelData = await util.getMetadata(serviceUrl);
|
const modelData = await util.getMetadata(serviceUrl + model_id);
|
||||||
let modelarea = modelData.modelarea;
|
let modelarea = modelData.modelarea;
|
||||||
|
|
||||||
// do your async stuff here
|
// do your async stuff here
|
||||||
// now instantiate and return a class
|
// now instantiate and return a class
|
||||||
let map = new Map(modelarea.x, modelarea.y, modelarea.z, scene, container);
|
let map = new Map(modelarea.x, modelarea.y, modelarea.z, scene, container, model_id);
|
||||||
map._initDataLayers(modelData.mappedfeatures);
|
map._initDataLayers(modelData.mappedfeatures);
|
||||||
map._initControls();
|
map._initControls();
|
||||||
|
|
||||||
|
|
@ -151,10 +157,17 @@ class Map extends OrbitControls {
|
||||||
feature_type: layerData.geologicdescription !== null ? layerData.geologicdescription['feature type'] : null,
|
feature_type: layerData.geologicdescription !== null ? layerData.geologicdescription['feature type'] : null,
|
||||||
});
|
});
|
||||||
callStack.push(this.addLayer(dxfLayer));
|
callStack.push(this.addLayer(dxfLayer));
|
||||||
if (dxfLayer.name == "Topography") {
|
// if (dxfLayer.name == "Topography") {
|
||||||
this.currentBasemap = dxfLayer;
|
// this.currentBasemap = dxfLayer;
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
if (this.model_id == 20) {
|
||||||
|
let layerService = new LayerService();
|
||||||
|
let demLayer = layerService.getDemLayer(this.center, this.baseExtent);
|
||||||
|
callStack.push(this.addLayer(demLayer));
|
||||||
|
this.currentBasemap = demLayer;
|
||||||
}
|
}
|
||||||
|
|
||||||
await Promise.all(callStack);
|
await Promise.all(callStack);
|
||||||
this.emit("ready");
|
this.emit("ready");
|
||||||
}
|
}
|
||||||
|
|
@ -165,12 +178,6 @@ class Map extends OrbitControls {
|
||||||
this._controlContainer =
|
this._controlContainer =
|
||||||
dom.createDom("div", { "class": l + 'control-container' }, this.container);
|
dom.createDom("div", { "class": l + 'control-container' }, this.container);
|
||||||
|
|
||||||
// function createCorner(vSide, hSide) {
|
|
||||||
// var className = l + vSide + ' ' + l + hSide;
|
|
||||||
|
|
||||||
// //corners[vSide + hSide] = util.create('div', className, container);
|
|
||||||
// corners[vSide + hSide] = dom.createDom("div", { "class": className }, this._controlContainer);
|
|
||||||
// }
|
|
||||||
let createCorner = (vSide: string, hSide: string): void => {
|
let createCorner = (vSide: string, hSide: string): void => {
|
||||||
let className = l + vSide + ' ' + l + hSide;
|
let className = l + vSide + ' ' + l + hSide;
|
||||||
corners[vSide + hSide] = dom.createDom("div", { "class": className }, this._controlContainer);
|
corners[vSide + hSide] = dom.createDom("div", { "class": className }, this._controlContainer);
|
||||||
|
|
@ -196,7 +203,7 @@ class Map extends OrbitControls {
|
||||||
this._controls.boreholePopup.addTo(this);
|
this._controls.boreholePopup.addTo(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
async addLayer(layer) {
|
public async addLayer(layer) {
|
||||||
let id = util.stamp(layer);
|
let id = util.stamp(layer);
|
||||||
if (this._layers[id]) {
|
if (this._layers[id]) {
|
||||||
return this;
|
return this;
|
||||||
|
|
@ -215,7 +222,7 @@ class Map extends OrbitControls {
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
removeLayer(layer) {
|
public removeLayer(layer) {
|
||||||
let id = util.stamp(layer);
|
let id = util.stamp(layer);
|
||||||
|
|
||||||
if (!this._layers[id]) { return this; }
|
if (!this._layers[id]) { return this; }
|
||||||
|
|
@ -246,11 +253,11 @@ class Map extends OrbitControls {
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
hasLayer(layer) {
|
public hasLayer(layer) {
|
||||||
return !!layer && (util.stamp(layer) in this._layers);
|
return !!layer && (util.stamp(layer) in this._layers);
|
||||||
}
|
}
|
||||||
|
|
||||||
getCenter() { // (Boolean) -> LatLng
|
public getCenter() { // (Boolean) -> LatLng
|
||||||
return this.target;
|
return this.target;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,73 +9,67 @@ import * as browser from '../core/browser';
|
||||||
|
|
||||||
import { TextureLoader } from 'three/src/loaders/TextureLoader';
|
import { TextureLoader } from 'three/src/loaders/TextureLoader';
|
||||||
|
|
||||||
import { Vector3 } from 'three/src/math/Vector3';
|
// import { Vector3 } from 'three/src/math/Vector3';
|
||||||
import proj4 from 'proj4/dist/proj4';
|
import proj4 from 'proj4/dist/proj4';
|
||||||
import { ShaderMaterial } from 'three/src/materials/ShaderMaterial';
|
import { ShaderMaterial } from 'three/src/materials/ShaderMaterial';
|
||||||
import { shader } from '../clip/shader';
|
import { shader } from '../clip/shader';
|
||||||
|
import { uniforms } from '../clip/uniforms';
|
||||||
|
|
||||||
export class DemLayer extends Layer {
|
export class DemLayer extends Layer {
|
||||||
|
|
||||||
images = [{
|
public q: boolean;
|
||||||
width: 405,
|
public type: string;
|
||||||
// "url": "https://sdi.noe.gv.at/at.gv.noe.geoserver/OGD/wms",
|
public name: string;
|
||||||
url: " https://ows.terrestris.de/osm/service",
|
// public color: number;
|
||||||
height: 549,
|
public visible: boolean;
|
||||||
bboxSR: 3857,
|
public opacity: number;
|
||||||
type: "wms"
|
public images: Array<any>;
|
||||||
},
|
public materialParameter: Array<any>;
|
||||||
{
|
public baseExtent = {
|
||||||
width: 405,
|
|
||||||
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/export",
|
|
||||||
height: 549, //509
|
|
||||||
bboxSR: 3034,
|
|
||||||
type: "esri"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
q;
|
|
||||||
objectGroup;
|
|
||||||
visible;
|
|
||||||
opacity;
|
|
||||||
materialParameter;
|
|
||||||
materialsArray;
|
|
||||||
material;
|
|
||||||
queryableObjects;
|
|
||||||
borderVisible;
|
|
||||||
mainMesh;
|
|
||||||
uniforms;
|
|
||||||
blocks;
|
|
||||||
baseExtent = {
|
|
||||||
min: { x: 0, y: 0 },
|
min: { x: 0, y: 0 },
|
||||||
max: { x: 0, y: 0 }
|
max: { x: 0, y: 0 }
|
||||||
};
|
};
|
||||||
index;
|
public color;
|
||||||
|
|
||||||
constructor(params) {
|
|
||||||
|
private objectGroup: Group;
|
||||||
|
private materialsArray: Array<any>;
|
||||||
|
|
||||||
|
// materialParameter;
|
||||||
|
|
||||||
|
private material;
|
||||||
|
private queryableObjects;
|
||||||
|
// private borderVisible;
|
||||||
|
private mainMesh;
|
||||||
|
// color: string;
|
||||||
|
public uniforms;
|
||||||
|
private blocks;
|
||||||
|
// private index;
|
||||||
|
|
||||||
|
|
||||||
|
constructor(q, type, name, opacity, visible, color, images, baseExtent, materialParameter) {
|
||||||
super();
|
super();
|
||||||
this.visible = true;
|
this.q = q;
|
||||||
this.opacity = 1;
|
this.type = type;
|
||||||
|
this.name = name;
|
||||||
|
this.opacity = opacity;
|
||||||
|
|
||||||
|
this.visible = visible;
|
||||||
|
this.color = color;
|
||||||
|
this.images = images;
|
||||||
|
this.baseExtent = baseExtent;
|
||||||
this.material;
|
this.material;
|
||||||
this.materialParameter = [];
|
this.materialParameter = materialParameter;
|
||||||
this.materialsArray = [];
|
this.materialsArray = [];
|
||||||
for (var k in params) {
|
// for (var k in params) {
|
||||||
this[k] = params[k];
|
// this[k] = params[k];
|
||||||
}
|
// }
|
||||||
|
|
||||||
this.objectGroup = new Group();
|
this.objectGroup = new Group();
|
||||||
this.queryableObjects = [];
|
this.queryableObjects = [];
|
||||||
this.borderVisible = false;
|
// this.borderVisible = false;
|
||||||
this.blocks = [];
|
this.blocks = [];
|
||||||
|
this.uniforms = uniforms;
|
||||||
|
|
||||||
// this.material = new MeshStandardMaterial({
|
|
||||||
// color: 16382457,
|
|
||||||
// metalness: 0.1,
|
|
||||||
// roughness: 0.75,
|
|
||||||
// flatShading: true,
|
|
||||||
// side: DoubleSide
|
|
||||||
// });
|
|
||||||
// this.materialsArray.push(this.material);
|
|
||||||
// this.initMaterials();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async initMaterials() {
|
async initMaterials() {
|
||||||
|
|
@ -125,23 +119,25 @@ export class DemLayer extends Layer {
|
||||||
if (m.t) opt.transparent = true;
|
if (m.t) opt.transparent = true;
|
||||||
if (m.w) opt.wireframe = true;
|
if (m.w) opt.wireframe = true;
|
||||||
|
|
||||||
// let color = parseInt("ffffff", 16);
|
// // let color = parseInt("ffffff", 16);
|
||||||
// // opt.color = color;
|
// // // opt.color = color;
|
||||||
let uniforms = this.uniforms = {
|
// let uniforms = this.uniforms = {
|
||||||
clipping: {
|
// clipping: {
|
||||||
clippingScale: { type: "f", value: 1.0 },
|
// clippingScale: { type: "f", value: 1.0 },
|
||||||
clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
|
// clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
|
||||||
clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) },
|
// clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) },
|
||||||
map: { type: 't', value: image.texture },
|
// map: { type: 't', value: image.texture },
|
||||||
percent: { type: "f", value: 0.7 },
|
// percent: { type: "f", value: 0.7 },
|
||||||
}
|
// }
|
||||||
};
|
// };
|
||||||
|
this.uniforms.clipping.map = { type: 't', value: image.texture };
|
||||||
|
this.uniforms.clipping.percent = { type: "f", value: 0.7 };
|
||||||
|
|
||||||
let MaterialType = { MeshLambert: 0, MeshPhong: 1, LineBasic: 2, Sprite: 3, Unknown: -1 };
|
let MaterialType = { MeshLambert: 0, MeshPhong: 1, LineBasic: 2, Sprite: 3, Unknown: -1 };
|
||||||
|
|
||||||
if (m.materialtypee === MaterialType.MeshLambert) {
|
if (m.materialtypee === MaterialType.MeshLambert) {
|
||||||
//if (m.color !== undefined) opt.color = opt.ambient = m.color;
|
//if (m.color !== undefined) opt.color = opt.ambient = m.color;
|
||||||
if (m.color !== undefined) opt.color = m.color;
|
// if (m.color !== undefined) opt.color = m.color;
|
||||||
//opt.skinning = true;
|
//opt.skinning = true;
|
||||||
opt.uniforms = uniforms.clipping;
|
opt.uniforms = uniforms.clipping;
|
||||||
opt.vertexShader = shader.vertexClipping;
|
opt.vertexShader = shader.vertexClipping;
|
||||||
|
|
@ -170,7 +166,7 @@ export class DemLayer extends Layer {
|
||||||
this.emit('visibility-change');
|
this.emit('visibility-change');
|
||||||
}
|
}
|
||||||
|
|
||||||
addBlock(params, clipped = false) {
|
public addBlock(params, clipped = false) {
|
||||||
// let BlockClass = clipped ? ClippedDEMBlock : DemBlock;
|
// let BlockClass = clipped ? ClippedDEMBlock : DemBlock;
|
||||||
let block = new DemBlock(params);
|
let block = new DemBlock(params);
|
||||||
block.layer = this;
|
block.layer = this;
|
||||||
|
|
@ -237,8 +233,8 @@ export class DemLayer extends Layer {
|
||||||
version: "1.3.0",
|
version: "1.3.0",
|
||||||
service: "WMS",
|
service: "WMS",
|
||||||
request: "GetMap",
|
request: "GetMap",
|
||||||
"width": imageParameter.width,
|
"width": this._map.domElement.clientWidth, // distWidth, //imageParameter.width,
|
||||||
"height": imageParameter.height,
|
"height": this._map.domElement.clientHeight, //istHeight, //imageParameter.height,
|
||||||
// "size": imageParameter.width + "," + imageParameter.height,
|
// "size": imageParameter.width + "," + imageParameter.height,
|
||||||
"crs": "EPSG:3857", // + imageParameter.bboxSR,
|
"crs": "EPSG:3857", // + imageParameter.bboxSR,
|
||||||
// "bboxSR": imageParameter.bboxSR,
|
// "bboxSR": imageParameter.bboxSR,
|
||||||
|
|
@ -267,13 +263,20 @@ export class DemLayer extends Layer {
|
||||||
}
|
}
|
||||||
|
|
||||||
async onAdd(map) {
|
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");
|
||||||
|
// this.baseExtent.x.min = map.baseExtent.x.min;
|
||||||
|
// this.baseExtent.y.min = map.baseExtent.y.min;
|
||||||
|
// this.baseExtent.x.max = map.baseExtent.x.max;
|
||||||
|
// this.baseExtent.y.max = map.baseExtent.y.max;
|
||||||
this.baseExtent.min.x = map.baseExtent.x.min;
|
this.baseExtent.min.x = map.baseExtent.x.min;
|
||||||
this.baseExtent.min.y = map.baseExtent.y.min;
|
this.baseExtent.min.y = map.baseExtent.y.min;
|
||||||
this.baseExtent.max.x = map.baseExtent.x.max;
|
this.baseExtent.max.x = map.baseExtent.x.max;
|
||||||
this.baseExtent.max.y = map.baseExtent.y.max;
|
this.baseExtent.max.y = map.baseExtent.y.max;
|
||||||
//this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation;
|
//this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation;
|
||||||
await this.initMaterials();
|
await this.initMaterials();
|
||||||
this.build(this.getScene());
|
await this.build(this.getModelNode());
|
||||||
|
// this.build(this.getScene());
|
||||||
map.update();
|
map.update();
|
||||||
this.emit('add');
|
this.emit('add');
|
||||||
}
|
}
|
||||||
|
|
@ -282,42 +285,10 @@ export class DemLayer extends Layer {
|
||||||
map.scene.remove(this.objectGroup);
|
map.scene.remove(this.objectGroup);
|
||||||
}
|
}
|
||||||
|
|
||||||
build(app_scene) {
|
async build(app_scene) {
|
||||||
//var opt = Gba3D.Options;
|
//var opt = Gba3D.Options;
|
||||||
this.blocks.forEach(function (block) {
|
this.blocks.forEach(function (block) {
|
||||||
block.build(this);
|
block.build(this);
|
||||||
|
|
||||||
//// build sides, bottom and frame
|
|
||||||
////if (block.sides) {
|
|
||||||
|
|
||||||
//// material
|
|
||||||
//var opacity = this.materials[block.mIndex].o;
|
|
||||||
//if (opacity === undefined) {
|
|
||||||
// opacity = 1;
|
|
||||||
//}
|
|
||||||
//var sidecolor = this.materials[block.mIndex].side.color;
|
|
||||||
|
|
||||||
//var mat = new THREE.MeshLambertMaterial({
|
|
||||||
// color: sidecolor, //opt.side.color,
|
|
||||||
// ambient: sidecolor,//opt.side.color,
|
|
||||||
// opacity: opacity,
|
|
||||||
// transparent: (opacity < 1),
|
|
||||||
// side: THREE.DoubleSide //neu dazu
|
|
||||||
//});
|
|
||||||
//this.materials.push({ type: Gba3D.MaterialType.MeshLambert, m: mat });
|
|
||||||
|
|
||||||
//if (block.bottomData) {
|
|
||||||
// //block.extrudePlane(this, mat, opt.side.bottomZ);
|
|
||||||
// block.extrudePlane(this, mat, opt.side.bottomZ);
|
|
||||||
//}
|
|
||||||
//else {
|
|
||||||
// //var sidecolor = this.materials[block.mIndex].side.color;
|
|
||||||
// var bottomZ = this.materials[block.mIndex].side.bottomZ;
|
|
||||||
// block.extrudeBottomPlane(this, mat, bottomZ);
|
|
||||||
//}
|
|
||||||
//this.sideVisible = true;
|
|
||||||
////}
|
|
||||||
|
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
if (app_scene) {
|
if (app_scene) {
|
||||||
|
|
@ -369,15 +340,22 @@ export class DemLayer extends Layer {
|
||||||
let bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y;
|
let bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y;
|
||||||
|
|
||||||
let params = {
|
let params = {
|
||||||
// "width": imageParameter.width,
|
"size": imageParameter.width + ",500",//+ imageParameter.height,
|
||||||
// "height": imageParameter.height,
|
// "size": this._map.domElement.clientWidth + "," +this._map.domElement.clientHeight,
|
||||||
"size": imageParameter.width + "," + imageParameter.height,
|
|
||||||
"bboxSR": "3857", // imageParameter.bboxSR,
|
"bboxSR": "3857", // imageParameter.bboxSR,
|
||||||
// "bbox": "3955850,2183470.1545778836,4527300,2502829.8454221168",
|
// "bbox": "3955850,2183470.1545778836,4527300,2502829.8454221168",
|
||||||
"bbox": bbox,
|
"bbox": bbox,
|
||||||
"format": "png",
|
"format": "png",
|
||||||
"f": "pjson"
|
"f": "pjson"
|
||||||
};
|
};
|
||||||
|
// let params = {
|
||||||
|
// "size": this._map.domElement.clientWidth + "," +this._map.domElement.clientHeight,
|
||||||
|
// // "size": distWidth + "," + distHeight,
|
||||||
|
// "bboxSR": "3857", // imageParameter.bboxSR,
|
||||||
|
// "bbox": bbox,
|
||||||
|
// "format": "png",
|
||||||
|
// "f": "pjson"
|
||||||
|
// };
|
||||||
let query = Object.keys(params)
|
let query = Object.keys(params)
|
||||||
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
|
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
|
||||||
.join('&');
|
.join('&');
|
||||||
|
|
@ -390,35 +368,35 @@ export class DemLayer extends Layer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async loadTextureData(imageData) {
|
// async loadTextureData(imageData) {
|
||||||
let texture;
|
// let texture;
|
||||||
let elem = document.createElement('img');
|
// let elem = document.createElement('img');
|
||||||
return new Promise((resolve, reject) => {
|
// return new Promise((resolve, reject) => {
|
||||||
elem.onload = () => {
|
// elem.onload = () => {
|
||||||
console.log('image completely read');
|
// console.log('image completely read');
|
||||||
// resolve(elem);
|
// // resolve(elem);
|
||||||
texture = new Texture(elem);
|
// texture = new Texture(elem);
|
||||||
texture.minFilter = LinearFilter;
|
// texture.minFilter = LinearFilter;
|
||||||
texture.needsUpdate = true;
|
// texture.needsUpdate = true;
|
||||||
resolve(texture);
|
// resolve(texture);
|
||||||
}
|
// }
|
||||||
elem.onerror = reject;
|
// elem.onerror = reject;
|
||||||
elem.src = imageData;
|
// elem.src = imageData;
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
_loadTextureData(imageData) {
|
// _loadTextureData(imageData) {
|
||||||
let texture;
|
// let texture;
|
||||||
let image = document.createElement('img');
|
// let image = document.createElement('img');
|
||||||
image.src = imageData;
|
|
||||||
image.onload = () => {
|
|
||||||
console.log('file completely read');
|
|
||||||
texture.needsUpdate = true;
|
|
||||||
};
|
|
||||||
// image.src = imageData;
|
// image.src = imageData;
|
||||||
texture = new Texture(image);
|
// image.onload = () => {
|
||||||
texture.minFilter = LinearFilter;
|
// console.log('file completely read');
|
||||||
return texture;
|
// texture.needsUpdate = true;
|
||||||
}
|
// };
|
||||||
|
// // image.src = imageData;
|
||||||
|
// texture = new Texture(image);
|
||||||
|
// texture.minFilter = LinearFilter;
|
||||||
|
// return texture;
|
||||||
|
// }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -714,62 +714,62 @@ class TinLayer extends Layer {
|
||||||
|
|
||||||
let color = parseInt(this.color, 16);
|
let color = parseInt(this.color, 16);
|
||||||
|
|
||||||
if (this.name == "Topography") {
|
// if (this.name == "Topography") {
|
||||||
// //add bounding box of layer:
|
// // //add bounding box of layer:
|
||||||
// let width = this.baseExtent.max.x - this.baseExtent.min.x;
|
// // let width = this.baseExtent.max.x - this.baseExtent.min.x;
|
||||||
// let height = this.baseExtent.max.y - this.baseExtent.min.y;
|
// // let height = this.baseExtent.max.y - this.baseExtent.min.y;
|
||||||
// let planeGeometry = new PlaneGeometry(width, height, 298, 134)
|
// // let planeGeometry = new PlaneGeometry(width, height, 298, 134)
|
||||||
// let planeMaterial = new MeshLambertMaterial({ color: 0xecf0f1, side: DoubleSide });
|
// // let planeMaterial = new MeshLambertMaterial({ color: 0xecf0f1, side: DoubleSide });
|
||||||
// let planeMesh = new Mesh(planeGeometry, planeMaterial);
|
// // 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);
|
// // 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.x = center.x;
|
||||||
// planeMesh.position.y = center.y;
|
// // planeMesh.position.y = center.y;
|
||||||
// this._addObject(planeMesh, false);
|
// // this._addObject(planeMesh, false);
|
||||||
|
|
||||||
// load image:
|
// // load image:
|
||||||
let image = this.images[0];
|
// let image = this.images[0];
|
||||||
if (image.texture === undefined) {
|
// if (image.texture === undefined) {
|
||||||
|
|
||||||
// if (image.type == "esri") {
|
// // if (image.type == "esri") {
|
||||||
// // image.texture = this._loadTextureData(image.data);
|
// // // image.texture = this._loadTextureData(image.data);
|
||||||
// let data = await this.requestImage(image.url, image);
|
// // let data = await this.requestImage(image.url, image);
|
||||||
|
|
||||||
// // image.texture = await new TextureLoader().load(data.href);
|
// // // image.texture = await new TextureLoader().load(data.href);
|
||||||
// image.texture = await this.loadTexture(data.href);
|
// // image.texture = await this.loadTexture(data.href);
|
||||||
|
// // }
|
||||||
|
// if (image.type == "wms") {
|
||||||
|
// image.texture = await this.loadTextureWms(image.url, image);
|
||||||
// }
|
// }
|
||||||
if (image.type == "wms") {
|
// }
|
||||||
image.texture = await this.loadTextureWms(image.url, image);
|
// // 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.clippingScale = { type: "f", value: 1.0 };
|
// this.uniforms.clipping.map = { type: 't', value: image.texture };
|
||||||
// this.uniforms.clipping.clippingLow = { type: "v3", value: new Vector3(0, 0, 0) };
|
// this.uniforms.clipping.percent = { type: "f", value: 0.7 };
|
||||||
// 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 for projecting image, if uv attribute is not present, it will be added
|
// //calculate UV coordinates for projecting image, if uv attribute is not present, it will be added
|
||||||
// https://jsfiddle.net/mmalex/pcjbysn1/
|
// // https://jsfiddle.net/mmalex/pcjbysn1/
|
||||||
// https://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate
|
// // https://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate
|
||||||
this.applyBoxUV(geometry, new Matrix4());
|
// this.applyBoxUV(geometry, new Matrix4());
|
||||||
//let three.js know
|
// //let three.js know
|
||||||
geometry.attributes.uv.needsUpdate = true;
|
// geometry.attributes.uv.needsUpdate = true;
|
||||||
|
|
||||||
// this.material = new MeshLambertMaterial({
|
// // this.material = new MeshLambertMaterial({
|
||||||
// map: image.texture,
|
// // map: image.texture,
|
||||||
|
// // transparent: true,
|
||||||
|
// // side: DoubleSide,
|
||||||
|
// // opacity: 0.7
|
||||||
|
// // });
|
||||||
|
// this.material = new ShaderMaterial({
|
||||||
// transparent: true,
|
// transparent: true,
|
||||||
// side: DoubleSide,
|
// // side: DoubleSide,
|
||||||
// opacity: 0.7
|
// uniforms: this.uniforms.clipping,
|
||||||
|
// vertexShader: shader.vertexClipping,
|
||||||
|
// fragmentShader: shader.fragmentClippingFront,
|
||||||
// });
|
// });
|
||||||
this.material = new ShaderMaterial({
|
|
||||||
transparent: true,
|
|
||||||
// side: DoubleSide,
|
|
||||||
uniforms: this.uniforms.clipping,
|
|
||||||
vertexShader: shader.vertexClipping,
|
|
||||||
fragmentShader: shader.fragmentClippingFront,
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
// } else {
|
||||||
// this.uniforms.clipping.clippingScale = { type: "f", value: 1.0 };
|
// this.uniforms.clipping.clippingScale = { type: "f", value: 1.0 };
|
||||||
// this.uniforms.clipping.color = { type: "c", value: new Color(color) };
|
// 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.clippingLow = { type: "v3", value: new Vector3(0, 0, 0) };
|
||||||
|
|
@ -794,7 +794,7 @@ class TinLayer extends Layer {
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
|
||||||
}
|
// }
|
||||||
|
|
||||||
this.materialsArray.push(this.material);
|
this.materialsArray.push(this.material);
|
||||||
let mesh = this.mainMesh = new Mesh(geometry, this.material);
|
let mesh = this.mainMesh = new Mesh(geometry, this.material);
|
||||||
|
|
@ -947,15 +947,15 @@ class TinLayer extends Layer {
|
||||||
proj4.transform(source, dest, p1);
|
proj4.transform(source, dest, p1);
|
||||||
proj4.transform(source, dest, p2);
|
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 = this.baseExtent.min.x + "," + this.baseExtent.min.y + "," + this.baseExtent.max.x + "," + this.baseExtent.max.y;
|
||||||
let bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y;
|
let bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y;
|
||||||
|
|
||||||
let params = {
|
let params = {
|
||||||
version: "1.3.0",
|
version: "1.3.0",
|
||||||
service: "WMS",
|
service: "WMS",
|
||||||
request: "GetMap",
|
request: "GetMap",
|
||||||
"width": distWidth, //imageParameter.width,
|
"width": this._map.domElement.clientWidth, // distWidth, //imageParameter.width,
|
||||||
"height": distHeight, //imageParameter.height,
|
"height": this._map.domElement.clientHeight, //istHeight, //imageParameter.height,
|
||||||
// "size": imageParameter.width + "," + imageParameter.height,
|
// "size": imageParameter.width + "," + imageParameter.height,
|
||||||
"crs": "EPSG:3857", // + imageParameter.bboxSR,
|
"crs": "EPSG:3857", // + imageParameter.bboxSR,
|
||||||
// "bboxSR": imageParameter.bboxSR,
|
// "bboxSR": imageParameter.bboxSR,
|
||||||
|
|
|
||||||
|
|
@ -192,7 +192,7 @@ class Application {
|
||||||
let map = this.map = await Map.build(
|
let map = this.map = await Map.build(
|
||||||
this.scene,
|
this.scene,
|
||||||
this.container,
|
this.container,
|
||||||
serviceUrl + modelid
|
serviceUrl, modelid
|
||||||
);
|
);
|
||||||
this.mapTitle = document.querySelector('#map-title');
|
this.mapTitle = document.querySelector('#map-title');
|
||||||
this.mapTitle.innerHTML += map.title;
|
this.mapTitle.innerHTML += map.title;
|
||||||
|
|
|
||||||
40405
src/js/services/layer.service.ts
Normal file
40405
src/js/services/layer.service.ts
Normal file
File diff suppressed because it is too large
Load Diff
40
src/js/services/mock-demlayer.ts
Normal file
40
src/js/services/mock-demlayer.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { DemLayer } from '../layer/DemLayer';
|
||||||
|
export const DEM_LAYER: DemLayer = new DemLayer(
|
||||||
|
|
||||||
|
true, 'dem', 'DEM Layer', 1, true, 16382457,//"baseExtent": this.baseExtent,
|
||||||
|
[{
|
||||||
|
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://sdi.noe.gv.at/at.gv.noe.geoserver/OGD/wms",
|
||||||
|
url: "https://ows.terrestris.de/osm-gray/service",
|
||||||
|
height: 549,
|
||||||
|
bboxSR: 3857,
|
||||||
|
type: "wms",
|
||||||
|
texture: undefined
|
||||||
|
}],
|
||||||
|
//"baseExtent": this.baseExtent,
|
||||||
|
{
|
||||||
|
min: { x: 0, y: 0 },
|
||||||
|
max: { x: 0, y: 0 }
|
||||||
|
},
|
||||||
|
[{
|
||||||
|
i: 0,
|
||||||
|
materialtypee: 0,
|
||||||
|
ds: 1,
|
||||||
|
bottomZ: 3000,
|
||||||
|
o: 0.7
|
||||||
|
}],
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -125,7 +125,7 @@ module.exports = {
|
||||||
stats: {
|
stats: {
|
||||||
colors: true
|
colors: true
|
||||||
},
|
},
|
||||||
// devtool: 'inline-source-map',
|
devtool: 'inline-source-map',
|
||||||
|
|
||||||
optimization: {
|
optimization: {
|
||||||
minimize: isProduction,
|
minimize: isProduction,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user