- 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 * as util from './utilities';
|
||||
import { TinLayer } from '../layer/TinLayer';
|
||||
import { DemLayer } from '../layer/DemLayer';
|
||||
import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
|
||||
import { Vector3 } from 'three/src/math/Vector3';
|
||||
import { Group } from 'three';
|
||||
import { Layer } from '../layer/Layer';
|
||||
import { LayerService } from '../services/layer.service';
|
||||
|
||||
class Map extends OrbitControls {
|
||||
|
||||
|
|
@ -22,18 +25,19 @@ class Map extends OrbitControls {
|
|||
public length: number;
|
||||
public width: number;
|
||||
public height: number;
|
||||
public x: number; public y: number; public z: number;
|
||||
public x; public y; public z;
|
||||
public title: string;
|
||||
public serviceUrl: string;
|
||||
public basemaps: Object;
|
||||
public baseExtent: Object;
|
||||
public currentBasemap;
|
||||
public currentBasemap: Layer;
|
||||
public contact: string;
|
||||
public model_id: number;
|
||||
private _modelNode: Group;
|
||||
private _stencilNode: 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 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
|
||||
super(size, center, camera, scene, container);
|
||||
|
||||
this.model_id = model_id;
|
||||
this.size = size;
|
||||
this.camera = camera;
|
||||
this.container = container;
|
||||
|
|
@ -95,19 +100,20 @@ class Map extends OrbitControls {
|
|||
"currentVersion": 10.01,
|
||||
"services": [
|
||||
{ "name": "osm:wms", "type": "MapServer", 'image': 'background_osm_world_topography.png', 'title': 'OSM WMS' },
|
||||
{ "name": "esri:topograhy", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'ESRI Topography' },
|
||||
{ "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) {
|
||||
const modelData = await util.getMetadata(serviceUrl);
|
||||
static async build(scene, container, serviceUrl, model_id) {
|
||||
const modelData = await util.getMetadata(serviceUrl + model_id);
|
||||
let modelarea = modelData.modelarea;
|
||||
|
||||
// do your async stuff here
|
||||
// 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._initControls();
|
||||
|
||||
|
|
@ -151,10 +157,17 @@ 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;
|
||||
// }
|
||||
}
|
||||
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);
|
||||
this.emit("ready");
|
||||
}
|
||||
|
|
@ -165,12 +178,6 @@ class Map extends OrbitControls {
|
|||
this._controlContainer =
|
||||
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 className = l + vSide + ' ' + l + hSide;
|
||||
corners[vSide + hSide] = dom.createDom("div", { "class": className }, this._controlContainer);
|
||||
|
|
@ -196,7 +203,7 @@ class Map extends OrbitControls {
|
|||
this._controls.boreholePopup.addTo(this);
|
||||
}
|
||||
|
||||
async addLayer(layer) {
|
||||
public async addLayer(layer) {
|
||||
let id = util.stamp(layer);
|
||||
if (this._layers[id]) {
|
||||
return this;
|
||||
|
|
@ -215,7 +222,7 @@ class Map extends OrbitControls {
|
|||
return this;
|
||||
}
|
||||
|
||||
removeLayer(layer) {
|
||||
public removeLayer(layer) {
|
||||
let id = util.stamp(layer);
|
||||
|
||||
if (!this._layers[id]) { return this; }
|
||||
|
|
@ -246,11 +253,11 @@ class Map extends OrbitControls {
|
|||
return this;
|
||||
}
|
||||
|
||||
hasLayer(layer) {
|
||||
public hasLayer(layer) {
|
||||
return !!layer && (util.stamp(layer) in this._layers);
|
||||
}
|
||||
|
||||
getCenter() { // (Boolean) -> LatLng
|
||||
public getCenter() { // (Boolean) -> LatLng
|
||||
return this.target;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,73 +9,67 @@ import * as browser from '../core/browser';
|
|||
|
||||
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 { ShaderMaterial } from 'three/src/materials/ShaderMaterial';
|
||||
import { shader } from '../clip/shader';
|
||||
import { uniforms } from '../clip/uniforms';
|
||||
|
||||
export class DemLayer extends Layer {
|
||||
|
||||
images = [{
|
||||
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"
|
||||
}
|
||||
];
|
||||
q;
|
||||
objectGroup;
|
||||
visible;
|
||||
opacity;
|
||||
materialParameter;
|
||||
materialsArray;
|
||||
material;
|
||||
queryableObjects;
|
||||
borderVisible;
|
||||
mainMesh;
|
||||
uniforms;
|
||||
blocks;
|
||||
baseExtent = {
|
||||
public q: boolean;
|
||||
public type: string;
|
||||
public name: string;
|
||||
// public color: number;
|
||||
public visible: boolean;
|
||||
public opacity: number;
|
||||
public images: Array<any>;
|
||||
public materialParameter: Array<any>;
|
||||
public baseExtent = {
|
||||
min: { 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();
|
||||
this.visible = true;
|
||||
this.opacity = 1;
|
||||
this.q = q;
|
||||
this.type = type;
|
||||
this.name = name;
|
||||
this.opacity = opacity;
|
||||
|
||||
this.visible = visible;
|
||||
this.color = color;
|
||||
this.images = images;
|
||||
this.baseExtent = baseExtent;
|
||||
this.material;
|
||||
this.materialParameter = [];
|
||||
this.materialParameter = materialParameter;
|
||||
this.materialsArray = [];
|
||||
for (var k in params) {
|
||||
this[k] = params[k];
|
||||
}
|
||||
// for (var k in params) {
|
||||
// this[k] = params[k];
|
||||
// }
|
||||
|
||||
this.objectGroup = new Group();
|
||||
this.queryableObjects = [];
|
||||
this.borderVisible = false;
|
||||
// this.borderVisible = false;
|
||||
this.blocks = [];
|
||||
|
||||
|
||||
// this.material = new MeshStandardMaterial({
|
||||
// color: 16382457,
|
||||
// metalness: 0.1,
|
||||
// roughness: 0.75,
|
||||
// flatShading: true,
|
||||
// side: DoubleSide
|
||||
// });
|
||||
// this.materialsArray.push(this.material);
|
||||
// this.initMaterials();
|
||||
this.uniforms = uniforms;
|
||||
}
|
||||
|
||||
async initMaterials() {
|
||||
|
|
@ -125,23 +119,25 @@ export class DemLayer extends Layer {
|
|||
if (m.t) opt.transparent = true;
|
||||
if (m.w) opt.wireframe = true;
|
||||
|
||||
// let color = parseInt("ffffff", 16);
|
||||
// // opt.color = color;
|
||||
let uniforms = 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 },
|
||||
}
|
||||
};
|
||||
// // let color = parseInt("ffffff", 16);
|
||||
// // // opt.color = color;
|
||||
// let uniforms = 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.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 };
|
||||
|
||||
if (m.materialtypee === MaterialType.MeshLambert) {
|
||||
//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.uniforms = uniforms.clipping;
|
||||
opt.vertexShader = shader.vertexClipping;
|
||||
|
|
@ -170,7 +166,7 @@ export class DemLayer extends Layer {
|
|||
this.emit('visibility-change');
|
||||
}
|
||||
|
||||
addBlock(params, clipped = false) {
|
||||
public addBlock(params, clipped = false) {
|
||||
// let BlockClass = clipped ? ClippedDEMBlock : DemBlock;
|
||||
let block = new DemBlock(params);
|
||||
block.layer = this;
|
||||
|
|
@ -237,8 +233,8 @@ export class DemLayer extends Layer {
|
|||
version: "1.3.0",
|
||||
service: "WMS",
|
||||
request: "GetMap",
|
||||
"width": imageParameter.width,
|
||||
"height": imageParameter.height,
|
||||
"width": this._map.domElement.clientWidth, // distWidth, //imageParameter.width,
|
||||
"height": this._map.domElement.clientHeight, //istHeight, //imageParameter.height,
|
||||
// "size": imageParameter.width + "," + imageParameter.height,
|
||||
"crs": "EPSG:3857", // + imageParameter.bboxSR,
|
||||
// "bboxSR": imageParameter.bboxSR,
|
||||
|
|
@ -267,13 +263,20 @@ export class DemLayer 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");
|
||||
// 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.y = map.baseExtent.y.min;
|
||||
this.baseExtent.max.x = map.baseExtent.x.max;
|
||||
this.baseExtent.max.y = map.baseExtent.y.max;
|
||||
//this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation;
|
||||
await this.initMaterials();
|
||||
this.build(this.getScene());
|
||||
await this.build(this.getModelNode());
|
||||
// this.build(this.getScene());
|
||||
map.update();
|
||||
this.emit('add');
|
||||
}
|
||||
|
|
@ -282,42 +285,10 @@ export class DemLayer extends Layer {
|
|||
map.scene.remove(this.objectGroup);
|
||||
}
|
||||
|
||||
build(app_scene) {
|
||||
async build(app_scene) {
|
||||
//var opt = Gba3D.Options;
|
||||
this.blocks.forEach(function (block) {
|
||||
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);
|
||||
|
||||
if (app_scene) {
|
||||
|
|
@ -369,15 +340,22 @@ export class DemLayer extends Layer {
|
|||
let bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y;
|
||||
|
||||
let params = {
|
||||
// "width": imageParameter.width,
|
||||
// "height": imageParameter.height,
|
||||
"size": imageParameter.width + "," + imageParameter.height,
|
||||
"size": imageParameter.width + ",500",//+ imageParameter.height,
|
||||
// "size": this._map.domElement.clientWidth + "," +this._map.domElement.clientHeight,
|
||||
"bboxSR": "3857", // imageParameter.bboxSR,
|
||||
// "bbox": "3955850,2183470.1545778836,4527300,2502829.8454221168",
|
||||
"bbox": bbox,
|
||||
"format": "png",
|
||||
"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)
|
||||
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
|
||||
.join('&');
|
||||
|
|
@ -390,35 +368,35 @@ export class DemLayer extends Layer {
|
|||
}
|
||||
}
|
||||
|
||||
async loadTextureData(imageData) {
|
||||
let texture;
|
||||
let elem = document.createElement('img');
|
||||
return new Promise((resolve, reject) => {
|
||||
elem.onload = () => {
|
||||
console.log('image completely read');
|
||||
// resolve(elem);
|
||||
texture = new Texture(elem);
|
||||
texture.minFilter = LinearFilter;
|
||||
texture.needsUpdate = true;
|
||||
resolve(texture);
|
||||
}
|
||||
elem.onerror = reject;
|
||||
elem.src = imageData;
|
||||
});
|
||||
}
|
||||
// async loadTextureData(imageData) {
|
||||
// let texture;
|
||||
// let elem = document.createElement('img');
|
||||
// return new Promise((resolve, reject) => {
|
||||
// elem.onload = () => {
|
||||
// console.log('image completely read');
|
||||
// // resolve(elem);
|
||||
// texture = new Texture(elem);
|
||||
// texture.minFilter = LinearFilter;
|
||||
// texture.needsUpdate = true;
|
||||
// resolve(texture);
|
||||
// }
|
||||
// elem.onerror = reject;
|
||||
// elem.src = imageData;
|
||||
// });
|
||||
// }
|
||||
|
||||
_loadTextureData(imageData) {
|
||||
let texture;
|
||||
let image = document.createElement('img');
|
||||
image.src = imageData;
|
||||
image.onload = () => {
|
||||
console.log('file completely read');
|
||||
texture.needsUpdate = true;
|
||||
};
|
||||
// image.src = imageData;
|
||||
texture = new Texture(image);
|
||||
texture.minFilter = LinearFilter;
|
||||
return texture;
|
||||
}
|
||||
// _loadTextureData(imageData) {
|
||||
// let texture;
|
||||
// let image = document.createElement('img');
|
||||
// image.src = imageData;
|
||||
// image.onload = () => {
|
||||
// console.log('file completely read');
|
||||
// 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);
|
||||
|
||||
if (this.name == "Topography") {
|
||||
// //add bounding box of layer:
|
||||
// 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);
|
||||
// if (this.name == "Topography") {
|
||||
// // //add bounding box of layer:
|
||||
// // 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);
|
||||
|
||||
// load image:
|
||||
let image = this.images[0];
|
||||
if (image.texture === undefined) {
|
||||
// // load image:
|
||||
// let image = this.images[0];
|
||||
// if (image.texture === undefined) {
|
||||
|
||||
// if (image.type == "esri") {
|
||||
// // image.texture = this._loadTextureData(image.data);
|
||||
// let data = await this.requestImage(image.url, image);
|
||||
// // 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);
|
||||
// }
|
||||
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.map = { type: 't', value: image.texture };
|
||||
this.uniforms.clipping.percent = { type: "f", value: 0.7 };
|
||||
// // // image.texture = await new TextureLoader().load(data.href);
|
||||
// // image.texture = await this.loadTexture(data.href);
|
||||
// // }
|
||||
// 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.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
|
||||
// https://jsfiddle.net/mmalex/pcjbysn1/
|
||||
// https://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate
|
||||
this.applyBoxUV(geometry, new Matrix4());
|
||||
//let three.js know
|
||||
geometry.attributes.uv.needsUpdate = true;
|
||||
// //calculate UV coordinates for projecting image, if uv attribute is not present, it will be added
|
||||
// // https://jsfiddle.net/mmalex/pcjbysn1/
|
||||
// // https://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate
|
||||
// this.applyBoxUV(geometry, new Matrix4());
|
||||
// //let three.js know
|
||||
// geometry.attributes.uv.needsUpdate = true;
|
||||
|
||||
// this.material = new MeshLambertMaterial({
|
||||
// map: image.texture,
|
||||
// transparent: true,
|
||||
// side: DoubleSide,
|
||||
// opacity: 0.7
|
||||
// });
|
||||
this.material = new ShaderMaterial({
|
||||
transparent: true,
|
||||
// side: DoubleSide,
|
||||
uniforms: this.uniforms.clipping,
|
||||
vertexShader: shader.vertexClipping,
|
||||
fragmentShader: shader.fragmentClippingFront,
|
||||
});
|
||||
// // this.material = new MeshLambertMaterial({
|
||||
// // map: image.texture,
|
||||
// // transparent: true,
|
||||
// // side: DoubleSide,
|
||||
// // opacity: 0.7
|
||||
// // });
|
||||
// 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.color = { type: "c", value: new Color(color) };
|
||||
// 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);
|
||||
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, 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 params = {
|
||||
version: "1.3.0",
|
||||
service: "WMS",
|
||||
request: "GetMap",
|
||||
"width": distWidth, //imageParameter.width,
|
||||
"height": distHeight, //imageParameter.height,
|
||||
"width": this._map.domElement.clientWidth, // distWidth, //imageParameter.width,
|
||||
"height": this._map.domElement.clientHeight, //istHeight, //imageParameter.height,
|
||||
// "size": imageParameter.width + "," + imageParameter.height,
|
||||
"crs": "EPSG:3857", // + imageParameter.bboxSR,
|
||||
// "bboxSR": imageParameter.bboxSR,
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@ class Application {
|
|||
let map = this.map = await Map.build(
|
||||
this.scene,
|
||||
this.container,
|
||||
serviceUrl + modelid
|
||||
serviceUrl, modelid
|
||||
);
|
||||
this.mapTitle = document.querySelector('#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: {
|
||||
colors: true
|
||||
},
|
||||
// devtool: 'inline-source-map',
|
||||
devtool: 'inline-source-map',
|
||||
|
||||
optimization: {
|
||||
minimize: isProduction,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user