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

- add TIN layer via metadata request in Map class

Browse Source 
- label in GridLayer are always scaled
- correct label positioning
- npm updates
This commit is contained in:
Arno Kaimbacher 2021-02-03 17:00:56 +01:00
parent cbe8a316eb
commit 25dbf20dee
7 changed files with 995 additions and 1117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1963
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
src/js/controls/BasemapControl.js
View File

@ -43,9 +43,9 @@ export class BasemapControl extends Control {
// }
onAdd(map) {
this._initLayout(map);
let container = this._initLayout(map);
this._map = map;
return this._container;
return container;
}
_initLayout() {
@ -73,6 +73,7 @@ export class BasemapControl extends Control {
this.dialog.show();
}, this);
return container;
}
@ -103,8 +104,7 @@ export class BasemapControl extends Control {
domEvent.on(btnLink, 'click', function (e) {
e.preventDefault();
let name = e.currentTarget.getAttribute('data-name');
this._setBasemap(name);
// this.hide();
this._setBasemap(name);
return false;
}, this);
}
@ -119,6 +119,7 @@ export class BasemapControl extends Control {
if (this._map.currentBasemap) {
//this.map.removeLayer(this.map.currentBasemap);
this._map.currentBasemap.changeImage(i);
this.dialog.hide();
}
//var curentBaseMap = this.map.currentBasemap = new esri.layers.ArcGISTiledMapServiceLayer(getBasemapUrl(basemaps.services[i]), {
// id: 'basemap'

43
src/js/core/Map.js
View File

@ -3,6 +3,7 @@ import * as dom from './domUtil';
import { HomeButton } from '../controls/HomeButton';
import { ZoomControl } from '../controls/ZoomControl';
import * as util from './utilities';
import { TinLayer } from '../layer/TinLayer';
class Map extends OrbitControls {
@ -11,14 +12,22 @@ class Map extends OrbitControls {
_controlCorners;
_controlContainer;
_controls;
camera;
length;
width;
height;
x; y; z;
title;
serviceUrl;
basemaps;
constructor(x, y, z, size, center, camera, scene, container, serviceUrl) {
constructor(x, y, z, size, center, camera, scene, container) {
// call parent constructor of OrbitControls
super(size, center, camera, scene, container);
this.camera = camera;
this.container = container;
this.length = x.max - x.min;
this.length = x.max - x.min;
this.width = y.max - y.min;
this.height = z.max - z.min;
this.x = x;
@ -31,10 +40,11 @@ class Map extends OrbitControls {
this._initControlPos();
}
// to do: initialize map title via serviceUrl:
this.title = "Geological 3D model of Austria";
// to do: initialize map title via serviceUrl:
this.title = "Geological 3D model of Vienna";
// to do: initialize layers via serviceUrl:
// this.serviceUrl = serviceUrl;
this._layers = {};
this.initControls();
@ -47,10 +57,35 @@ class Map extends OrbitControls {
};
}
static async build(x, y, z, size, center, camera, scene, container, serviceUrl) {
const modelData = await util.getMetadata(serviceUrl);
// do your async stuff here
// now instantiate and return a class
let map = new Map(x, y, z, size, center, camera, scene, container);
map._initDataLayers(modelData.mappedfeatures);
return map;
}
get layers() {
return this._layers;
}
_initDataLayers(mappedFeatures) {
for (let i = 0; i < mappedFeatures.length; i++) {
let layerData = mappedFeatures[i];
let dxfLayer = new TinLayer({
featuregeom_id: layerData.featuregeom_id,
q: true,
type: "3dface",
name: layerData.legend_description,
description: "test",
color: layerData.color
});
this.addLayer(dxfLayer);
}
}
_initControlPos() {
//var test = document.getElementById("webgl");

19
src/js/core/utilities.js
View File

@ -107,6 +107,25 @@ export function extend(dest) {
return dest;
}
export async function getMetadata(serviceUrl) {
// const BBOXURL = '//geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=' + modelid;
const response = await fetch(serviceUrl, {
method: 'GET',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
}
});
if (response.ok) {
return response.json();
} else {
throw new Error("HTTP error, status = " + response.status);
}
// return await response.json();
}
// @function create(proto: Object, properties?: Object): Object
// Compatibility polyfill for [Object.create](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
export var create = Object.create || (function () {

16
src/js/layer/GridLayer.js
View File

@ -307,7 +307,7 @@ export class GridLayer extends Layer {
//neu
// app.labels = app.controls.gridlayer.labels;
let scaleFactor = this.scale;
// let scaleFactor = this.scale;
// make a list of [label index, distance to camera]
let idx_dist = [];
@ -345,9 +345,9 @@ export class GridLayer extends Layer {
let proj = this.toScreenPosition(label.obj, label.pt, camera);
// set label position
labelDiv.style.display = "block";
labelDiv.style.left = proj.x + 'px';
labelDiv.style.top = proj.y + 'px';
labelDiv.style.display = "block";
labelDiv.style.left = (proj.x - (labelDiv.offsetWidth / 2)) + "px";
labelDiv.style.top = (proj.y - (labelDiv.offsetHeight / 2)) + "px";
labelDiv.style.zIndex = i + 1;
let minFontSize = 10;
// set font size
@ -368,9 +368,13 @@ export class GridLayer extends Layer {
let vector = new Vector3();
// calculate label position
vector.copy(pt);
let scaleFactor = parseFloat(this.labelConnectorGroup.scale.z);
if (scaleFactor > 1) {
vector.z = vector.z * scaleFactor;
}
// TODO: need to update this when resize window
let container = document.getElementById("webgl");
let container = this._map.container; //document.getElementById("webgl");
let widthHalf = 0.5 * container.clientWidth;
let heightHalf = 0.5 * container.clientHeight;
@ -380,7 +384,7 @@ export class GridLayer extends Layer {
vector.x = (vector.x * widthHalf) + widthHalf;
vector.y = - (vector.y * heightHalf) + heightHalf;
return {
x: vector.x,
y: vector.y

4
src/js/layer/TinLayer.js
View File

@ -60,7 +60,7 @@ class TinLayer extends Layer {
let geometry = new BufferGeometry();
// let positions = new Float32BufferAttribute(this.vertices, 3);
let posArray = await (this.points(this.geomId));
let posArray = await (this.points(this.featuregeom_id));
// console.log(posArray);
let positions = new Float32BufferAttribute(posArray, 3);
geometry.setAttribute('position', positions);
@ -69,7 +69,7 @@ class TinLayer extends Layer {
//var indices = this.indices = new TypeArray(this.idx);
// let indexArray = this.indices = new Uint16Array(this.idx);
let indexArray = await (this.edges(this.geomId));
let indexArray = await (this.edges(this.featuregeom_id));
let indices = new Uint16BufferAttribute(indexArray, 1);//.setDynamic(true);
geometry.setIndex(indices);

58
src/js/main.js
View File

@ -4,7 +4,6 @@ import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
import { Scene } from 'three/src/scenes/Scene';
import { Vector3 } from 'three/src/math/Vector3';
import { TinLayer } from './layer/TinLayer';
import { GridLayer } from './layer/GridLayer';
// import { BoxLayer } from './layer/BoxLayer';
import { DemLayer } from './layer/DemLayer';
@ -58,11 +57,15 @@ class Application {
this.mapIcon = document.querySelector('#menu-map-icon');
this.createScene();
// this.createScene();
// this.addEventListeners();
}
async build() {
await this.createScene();
this.addEventListeners();
}
createScene() {
async createScene() {
var dirNode = document.getElementsByTagName("body")[0];
if (browser.touch == true) {
@ -157,7 +160,9 @@ class Application {
// this.camera.lookAt(new Vector3(0, 0, 0));
// create map
let map = this.map = new Map(x, y, z, size, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=11');
// let map = this.map = new Map(x, y, z, size, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=20');
let map = this.map = await Map.build(x, y, z, size, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=20');
this.mapTitle = document.querySelector('#map-title');
this.mapTitle.innerHTML += map.title;
// this.map.minDistance = size*0.75;
@ -207,48 +212,6 @@ class Application {
this.map.addLayer(demLayer);
this.map.currentBasemap = demLayer;
let dxf170Layer = new TinLayer({
geomId: 170, q: true, type: "3dface", name: "DEM_EGDI", description: "test", color: "CE5364", "baseExtent": baseExtent
});
this.map.addLayer(dxf170Layer);
// this.map.currentBasemap = dxf170Layer;
let dxf171Layer = new TinLayer({
geomId: 171, q: true, type: "3dface", name: "Aderklaa_Untermiozän", description: "test", color: "4C9875"
});
this.map.addLayer(dxf171Layer);
let dxf172Layer = new TinLayer({
geomId: 172, q: true, type: "3dface", name: "Badenium", description: "test", color: "B288A4"
});
this.map.addLayer(dxf172Layer);
let dxf173Layer = new TinLayer({
geomId: 173, q: true, type: "3dface", name: "Frankenfels Lunz Decke", description: "test", color: "4C9875"
});
this.map.addLayer(dxf173Layer);
let dxf174Layer = new TinLayer({
geomId: 174, q: true, type: "3dface", name: "Göller Decke", description: "test", color: "B288A4"
});
this.map.addLayer(dxf174Layer);
let dxf175Layer = new TinLayer({
geomId: 175, q: true, type: "3dface", name: "Obere Gosau", description: "test", color: "4C9875"
});
this.map.addLayer(dxf175Layer);
let dxf176Layer = new TinLayer({
geomId: 176, q: true, type: "3dface", name: "Schneeberg Decke", description: "test", color: "B288A4"
});
this.map.addLayer(dxf176Layer);
let dxf177Layer = new TinLayer({
geomId: 177, q: true, type: "3dface", name: "Untere Gosau", description: "test", color: "FED012"
});
this.map.addLayer(dxf177Layer);
this.gridlayer = new GridLayer({ center: center, name: "coordinate grid", appWidth: this.width, appHeight: this.height });
this.map.addLayer(this.gridlayer);
@ -484,4 +447,5 @@ class Application {
}
let container = document.getElementById("webgl");
new Application(container);
let app = new Application(container);
app.build();