- test overlay on TinLayer
This commit is contained in:
Arno Kaimbacher
parent
452b9f028f
commit
063dfc2609
|
|
@ -15,7 +15,6 @@ interface BoreholePopupOptions {
|
|||
|
||||
export class BoreholePopup extends Control {
|
||||
|
||||
// default options
|
||||
options: BoreholePopupOptions = {
|
||||
position: 'topleft',
|
||||
width: '300px',
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import { Mesh } from 'three/src/objects/Mesh';
|
|||
|
||||
export class DemBlock {
|
||||
|
||||
layer;
|
||||
|
||||
constructor(params) {
|
||||
//properties
|
||||
for (var k in params) {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import { DemBlock } from './DemBlock';
|
|||
// import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
|
||||
import { DoubleSide, FlatShading, LinearFilter } from 'three/src/constants';
|
||||
import * as browser from '../core/browser';
|
||||
import { Texture } from 'three/src/textures/Texture';
|
||||
|
||||
|
||||
import { TextureLoader } from 'three/src/loaders/TextureLoader';
|
||||
|
||||
import { Vector3 } from 'three/src/math/Vector3';
|
||||
|
|
@ -31,10 +32,23 @@ export class DemLayer extends Layer {
|
|||
type: "esri"
|
||||
}
|
||||
];
|
||||
|
||||
q;
|
||||
objectGroup;
|
||||
visible;
|
||||
opacity;
|
||||
materialParameter;
|
||||
materialsArray;
|
||||
material;
|
||||
queryableObjects;
|
||||
borderVisible;
|
||||
mainMesh;
|
||||
uniforms;
|
||||
blocks;
|
||||
baseExtent = {
|
||||
min: { x: 0, y: 0 },
|
||||
max: { x: 0, y: 0 }
|
||||
};
|
||||
index;
|
||||
|
||||
constructor(params) {
|
||||
super();
|
||||
|
|
@ -42,7 +56,7 @@ export class DemLayer extends Layer {
|
|||
this.opacity = 1;
|
||||
this.material;
|
||||
this.materialParameter = [];
|
||||
this.materials = [];
|
||||
this.materialsArray = [];
|
||||
for (var k in params) {
|
||||
this[k] = params[k];
|
||||
}
|
||||
|
|
@ -66,25 +80,29 @@ export class DemLayer extends Layer {
|
|||
|
||||
async initMaterials() {
|
||||
if (this.materialParameter.length === 0) return;
|
||||
// this.xMaxLocalPlane = new Plane(new Vector3(-1, 0, 0), this._map.x.max);
|
||||
// this.yMaxLocalPlane = new Plane(new Vector3(0, -1, 0), this._map.y.max);
|
||||
|
||||
let sum_opacity = 0;
|
||||
this.material;
|
||||
for (let i = 0, l = this.materialParameter.length; i < l; i++) {
|
||||
let m = this.materialParameter[i];
|
||||
|
||||
let opt = {};
|
||||
//if (m.ds && !Gba3D.isIE) opt.side = THREE.DoubleSide;
|
||||
let opt = {
|
||||
opacity: null,
|
||||
side: null,
|
||||
// shading: null,
|
||||
transparent: null,
|
||||
wireframe: null,
|
||||
uniforms: null,
|
||||
vertexShader: null,
|
||||
fragmentShader: null
|
||||
};
|
||||
if (m.ds && !browser.ie) opt.side = DoubleSide;
|
||||
if (m.flat) opt.shading = FlatShading;
|
||||
// if (m.flat) opt.shading = FlatShading;
|
||||
//m.i = 1;
|
||||
let image;
|
||||
if (m.i !== undefined) {
|
||||
image = this.images[m.i];
|
||||
if (image.texture === undefined) {
|
||||
if (image.src !== undefined) {
|
||||
image.texture = THREE.ImageUtils._loadTexture(image.src);
|
||||
// image.texture = THREE.ImageUtils._loadTexture(image.src);
|
||||
}
|
||||
else {
|
||||
if (image.type == "esri") {
|
||||
|
|
@ -106,12 +124,6 @@ export class DemLayer extends Layer {
|
|||
}
|
||||
if (m.t) opt.transparent = true;
|
||||
if (m.w) opt.wireframe = true;
|
||||
//opt.wireframe = true;
|
||||
|
||||
// // Clipping setup:
|
||||
// opt.clippingPlanes = this.clippingPlanes = [this.xMinLocalPlane, this.xMaxLocalPlane, this.yMaxLocalPlane];
|
||||
// opt.clipIntersection = false;
|
||||
// opt.clipShadows = true;
|
||||
|
||||
// let color = parseInt("ffffff", 16);
|
||||
// // opt.color = color;
|
||||
|
|
@ -131,35 +143,20 @@ export class DemLayer extends Layer {
|
|||
//if (m.color !== undefined) opt.color = opt.ambient = m.color;
|
||||
if (m.color !== undefined) opt.color = m.color;
|
||||
//opt.skinning = true;
|
||||
opt.uniforms = this.uniforms.clipping;
|
||||
opt.uniforms = uniforms.clipping;
|
||||
opt.vertexShader = shader.vertexClipping;
|
||||
opt.fragmentShader = shader.fragmentClippingFront;
|
||||
this.material = new ShaderMaterial(opt);
|
||||
// this.material = new MeshStandardMaterial(opt);
|
||||
}
|
||||
// else if (m.materialtype === MaterialType.MeshPhong) {
|
||||
// if (m.color !== undefined) opt.color = opt.ambient = m.color;
|
||||
// mat = new THREE.MeshPhongMaterial(opt);
|
||||
// }
|
||||
// else if (m.materialtype === MaterialType.LineBasic) {
|
||||
// opt.color = m.color;
|
||||
// mat = new THREE.LineBasicMaterial(opt);
|
||||
// }
|
||||
else {
|
||||
if (m.color !== undefined) opt.color = m.color;
|
||||
this.material = new MeshStandardMaterial(opt);
|
||||
}
|
||||
|
||||
m.mat = this.material;
|
||||
//if (m.side !== undefined) {
|
||||
// m.
|
||||
//}
|
||||
this.materials.push(this.material);
|
||||
this.materialsArray.push(this.material);
|
||||
sum_opacity += this.material.opacity;
|
||||
}
|
||||
|
||||
// layer opacity is the average opacity of materials
|
||||
this.opacity = sum_opacity / this.materials.length;
|
||||
this.opacity = sum_opacity / this.materialsArray.length;
|
||||
}
|
||||
|
||||
scaleZ(z) {
|
||||
|
|
@ -174,15 +171,15 @@ export class DemLayer extends Layer {
|
|||
}
|
||||
|
||||
addBlock(params, clipped = false) {
|
||||
let BlockClass = clipped ? ClippedDEMBlock : DemBlock;
|
||||
var block = new BlockClass(params);
|
||||
// let BlockClass = clipped ? ClippedDEMBlock : DemBlock;
|
||||
let block = new DemBlock(params);
|
||||
block.layer = this;
|
||||
this.blocks.push(block);
|
||||
return block;
|
||||
}
|
||||
|
||||
setWireframeMode(wireframe) {
|
||||
this.materials.forEach(function (mat) {
|
||||
this.materialsArray.forEach(function (mat) {
|
||||
//if (m.w) return;
|
||||
//m.mat.wireframe = wireframe;
|
||||
mat.wireframe = wireframe;
|
||||
|
|
@ -229,13 +226,11 @@ export class DemLayer extends Layer {
|
|||
async loadTextureWms(url, imageParameter) {
|
||||
let dest = new proj4.Proj("EPSG:3857");
|
||||
let source = new proj4.Proj("EPSG:3034");
|
||||
let p1 = new proj4.toPoint([this.baseExtent.x.min, this.baseExtent.y.min]);
|
||||
let p2 = new proj4.toPoint([this.baseExtent.x.max, this.baseExtent.y.max]);
|
||||
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 = {
|
||||
|
|
@ -272,6 +267,10 @@ export class DemLayer extends Layer {
|
|||
}
|
||||
|
||||
async onAdd(map) {
|
||||
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());
|
||||
|
|
@ -279,6 +278,10 @@ export class DemLayer extends Layer {
|
|||
this.emit('add');
|
||||
}
|
||||
|
||||
onRemove(map) {
|
||||
map.scene.remove(this.objectGroup);
|
||||
}
|
||||
|
||||
build(app_scene) {
|
||||
//var opt = Gba3D.Options;
|
||||
this.blocks.forEach(function (block) {
|
||||
|
|
@ -356,8 +359,8 @@ export class DemLayer extends Layer {
|
|||
async requestImage(url, imageParameter) {
|
||||
let dest = new proj4.Proj("EPSG:3857");
|
||||
let source = new proj4.Proj("EPSG:3034");
|
||||
let p1 = new proj4.toPoint([this.baseExtent.x.min, this.baseExtent.y.min]);
|
||||
let p2 = new proj4.toPoint([this.baseExtent.x.max, this.baseExtent.y.max]);
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -13,12 +13,17 @@ import { Group } from 'three/src/objects/Group';
|
|||
// 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';
|
||||
|
||||
const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
|
||||
const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
|
||||
|
||||
class TinLayer extends Layer {
|
||||
|
||||
name: string;
|
||||
q: boolean;
|
||||
queryableObjects;
|
||||
borderVisible;
|
||||
|
|
@ -28,16 +33,36 @@ class TinLayer extends Layer {
|
|||
opacity: number;
|
||||
materialParameter: Array<string>;
|
||||
materialsArray: Array<any>;
|
||||
material: MyMeshStandardMaterial;
|
||||
material: Material;
|
||||
featuregeom_id: number;
|
||||
color: string;
|
||||
mainMesh;
|
||||
uniforms: Object;
|
||||
uniforms = {
|
||||
clipping: {}
|
||||
};
|
||||
public baseExtent = {
|
||||
min: { x: 0, y: 0 },
|
||||
max: { x: 0, y: 0 }
|
||||
};
|
||||
index: number;
|
||||
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",
|
||||
texture: undefined
|
||||
},
|
||||
{
|
||||
width: 405,
|
||||
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/export",
|
||||
height: 549, //509
|
||||
bboxSR: 3034,
|
||||
type: "esri",
|
||||
texture: undefined
|
||||
}
|
||||
];
|
||||
|
||||
constructor(params) {
|
||||
super();
|
||||
|
|
@ -85,10 +110,23 @@ class TinLayer extends Layer {
|
|||
map.scene.remove(this.objectGroup);
|
||||
}
|
||||
|
||||
async initMaterials() {
|
||||
}
|
||||
|
||||
async build(app_scene) {
|
||||
let geometry = new BufferGeometry();
|
||||
let posArray = await (this.points(this.featuregeom_id));
|
||||
let positions = new Float32BufferAttribute(posArray, 3);
|
||||
let vertices = await (this.points(this.featuregeom_id));
|
||||
// const positions = [];
|
||||
// const normals = [];
|
||||
// const uvs = [];
|
||||
// for (let i = 0; i < vertices.length; i = i +3) {
|
||||
// // positions.push(...vertex.pos);
|
||||
// // normals.push(...vertex.norm);
|
||||
// uvs.push([0,0]);
|
||||
// uvs.push([1, 0]);
|
||||
// uvs.push([0, 1]);
|
||||
// }
|
||||
let positions = new Float32BufferAttribute(vertices, 3);
|
||||
geometry.setAttribute('position', positions);
|
||||
|
||||
//var TypeArray = this.idx.length > 65535 ? Uint32Array : Uint16Array;
|
||||
|
|
@ -98,6 +136,11 @@ class TinLayer extends Layer {
|
|||
let indices = new Uint16BufferAttribute(indexArray, 1);//.setDynamic(true);
|
||||
geometry.setIndex(indices);
|
||||
|
||||
// const uvNumComponents = 2;
|
||||
// geometry.setAttribute(
|
||||
// 'uv',
|
||||
// new Float32BufferAttribute(new Float32Array(uvs), uvNumComponents));
|
||||
|
||||
geometry.scale(1, 1, 1);
|
||||
geometry.computeBoundingSphere();
|
||||
geometry.computeVertexNormals();// computed vertex normals are orthogonal to the face f
|
||||
|
|
@ -121,24 +164,66 @@ class TinLayer extends Layer {
|
|||
// });
|
||||
// this.materialsArray.push(this.material);
|
||||
|
||||
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) }
|
||||
|
||||
|
||||
if (this.name == "test") {
|
||||
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);
|
||||
|
||||
// // 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.material = new MyMeshStandardMaterial({
|
||||
color: color,
|
||||
metalness: 0.1,
|
||||
roughness: 0.75,
|
||||
flatShading: true,
|
||||
side: DoubleSide,
|
||||
// clippingPlanes: [this.xLocalPlane, this.yLocalPlane],
|
||||
// clipIntersection: false,
|
||||
// clipShadows: true,
|
||||
}, uniforms.clipping);
|
||||
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.material = new MeshLambertMaterial({
|
||||
// map: image.texture,
|
||||
// transparent: true,
|
||||
// side: DoubleSide,
|
||||
// });
|
||||
this.material = new ShaderMaterial({
|
||||
transparent: true,
|
||||
side: DoubleSide,
|
||||
uniforms: this.uniforms.clipping,
|
||||
vertexShader: shader.vertexClipping,
|
||||
fragmentShader: shader.fragmentClippingFront,
|
||||
});
|
||||
|
||||
} 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) }
|
||||
}
|
||||
};
|
||||
|
||||
this.material = new MyMeshStandardMaterial({
|
||||
color: color,
|
||||
metalness: 0.1,
|
||||
roughness: 0.75,
|
||||
flatShading: true,
|
||||
side: DoubleSide
|
||||
}, uniforms.clipping);
|
||||
}
|
||||
|
||||
this.materialsArray.push(this.material);
|
||||
let mesh = this.mainMesh = new Mesh(geometry, this.material);
|
||||
mesh.userData.layerId = this.index;
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@ class Application {
|
|||
this.northArrow = new NorthArrow({ headLength: 1, headWidth: 1 }).addTo(this.map);
|
||||
|
||||
let demLayer = new DemLayer({
|
||||
q: 0, shading: true, type: 'dem', name: 'DEM Layer', color: 16382457, "baseExtent": this.map.baseExtent,
|
||||
q: 0, shading: true, type: 'dem', name: 'DEM Layer', color: 16382457,
|
||||
"materialParameter": [{
|
||||
"i": 0,
|
||||
"materialtypee": 0,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user