- async loading data layers in Map.js class
This commit is contained in:
Arno Kaimbacher
parent
1302f5d135
commit
bec7c4776d
8 changed files with 619 additions and 242 deletions
|
|
@ -116,6 +116,10 @@ export class Picking {
|
|||
}
|
||||
|
||||
beginDrag(event) {
|
||||
// exit drag method, if not left mouse button was clicked
|
||||
if (this.touchCapable == false && event.which != 1) {
|
||||
return;
|
||||
}
|
||||
// this.mouse.setToNormalizedDeviceCoordinates(event, window);
|
||||
let point = this._getCanvasPoint(event);
|
||||
let width = this.simulation.renderer.domElement.clientWidth;
|
||||
|
|
|
|||
|
|
@ -124,22 +124,16 @@ export class Selection {
|
|||
setUniforms() {
|
||||
let unif = uniforms.clipping;
|
||||
unif.clippingLow.value.copy(this.limitLow);
|
||||
unif.clippingHigh.value.copy(this.limitHigh);
|
||||
// let test = this.map.layers[20];
|
||||
|
||||
|
||||
unif.clippingHigh.value.copy(this.limitHigh);
|
||||
|
||||
|
||||
if ( this.map.layers){
|
||||
for (const [key, layer] of Object.entries(this.map.layers)) {
|
||||
if (layer.uniforms) {
|
||||
layer.uniforms.clipping.clippingLow.value.copy(this.limitLow);
|
||||
layer.uniforms.clipping.clippingHigh.value.copy(this.limitHigh);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (this.map.layers) {
|
||||
for (const [key, layer] of Object.entries(this.map.layers)) {
|
||||
if (layer.uniforms) {
|
||||
layer.uniforms.clipping.clippingLow.value.copy(this.limitLow);
|
||||
layer.uniforms.clipping.clippingHigh.value.copy(this.limitHigh);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setValue(axis, value) {
|
||||
|
|
|
|||
|
|
@ -1,150 +1,153 @@
|
|||
import { OrbitControls } from '../lib/OrbitControls';
|
||||
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 {
|
||||
|
||||
container;
|
||||
_layers;
|
||||
_controlCorners;
|
||||
_controlContainer;
|
||||
_controls;
|
||||
camera;
|
||||
length;
|
||||
width;
|
||||
height;
|
||||
x; y; z;
|
||||
title;
|
||||
serviceUrl;
|
||||
basemaps;
|
||||
title;
|
||||
|
||||
constructor(x, y, z, center, camera, scene, container) {
|
||||
let size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);
|
||||
// call parent constructor of OrbitControls
|
||||
super(size, center, camera, scene, container);
|
||||
|
||||
this.size = size;
|
||||
this.camera = camera;
|
||||
this.container = container;
|
||||
this.length = x.max - x.min;
|
||||
this.width = y.max - y.min;
|
||||
this.height = z.max - z.min;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.z = z;
|
||||
this.center = center;
|
||||
|
||||
//init the control corners
|
||||
if (this._initControlPos) {
|
||||
this._initControlPos();
|
||||
}
|
||||
|
||||
// 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();
|
||||
|
||||
this.basemaps = {
|
||||
"currentVersion": 10.01,
|
||||
"services": [
|
||||
{ "name": "esri:topograhy", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'ESRI Topograhy' },
|
||||
{ "name": "esri:imagery", "type": "MapServer", 'image': 'background_esri_world_imagery.png', 'title': 'ESRI Imagery' },
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
static async build(x, y, z, 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, center, camera, scene, container);
|
||||
map._initDataLayers(modelData.mappedfeatures);
|
||||
map.title = modelData.model.model_name;
|
||||
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.preview.legend_text, //layerData.legend_description,
|
||||
description: "test",
|
||||
color: layerData.preview.legend_color //layerData.color
|
||||
});
|
||||
this.addLayer(dxfLayer);
|
||||
}
|
||||
}
|
||||
|
||||
_initControlPos() {
|
||||
//var test = document.getElementById("webgl");
|
||||
|
||||
var corners = this._controlCorners = {};
|
||||
var l = 'gba-';
|
||||
var container = this._controlContainer =
|
||||
//util.create('div', l + 'control-container', this.domElement);
|
||||
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 }, container);
|
||||
}
|
||||
|
||||
createCorner('top', 'left');
|
||||
createCorner('top', 'right');
|
||||
createCorner('bottom', 'left');
|
||||
createCorner('bottom', 'right');
|
||||
}
|
||||
|
||||
initControls() {
|
||||
this._controls = this._controls || {};
|
||||
// this._controls.homeControl = (new HomeButton()).addTo(this);
|
||||
let homeControl = this._controls.homeControl = new HomeButton();
|
||||
homeControl.addTo(this);
|
||||
|
||||
let zoomControl = this._controls.zoomControl = new ZoomControl();
|
||||
zoomControl.addTo(this);
|
||||
}
|
||||
|
||||
addLayer(layer) {
|
||||
var id = util.stamp(layer);
|
||||
if (this._layers[id]) {
|
||||
return this;
|
||||
}
|
||||
this._layers[id] = layer;
|
||||
|
||||
//layer._mapToAdd = this;
|
||||
layer.index = id;
|
||||
|
||||
//if (layer.beforeAdd) {
|
||||
// layer.beforeAdd(this);
|
||||
//}
|
||||
//this.whenReady(layer._layerAdd, layer);
|
||||
layer._layerAdd(this);
|
||||
this.emit("change");
|
||||
return this;
|
||||
}
|
||||
|
||||
hasLayer(layer) {
|
||||
return !!layer && (util.stamp(layer) in this._layers);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
import { OrbitControls } from '../lib/OrbitControls';
|
||||
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 {
|
||||
|
||||
container;
|
||||
_layers;
|
||||
_controlCorners;
|
||||
_controlContainer;
|
||||
_controls;
|
||||
camera;
|
||||
length;
|
||||
width;
|
||||
height;
|
||||
x; y; z;
|
||||
title;
|
||||
serviceUrl;
|
||||
basemaps;
|
||||
title;
|
||||
|
||||
constructor(x, y, z, center, camera, scene, container) {
|
||||
let size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);
|
||||
// call parent constructor of OrbitControls
|
||||
super(size, center, camera, scene, container);
|
||||
|
||||
this.size = size;
|
||||
this.camera = camera;
|
||||
this.container = container;
|
||||
this.length = x.max - x.min;
|
||||
this.width = y.max - y.min;
|
||||
this.height = z.max - z.min;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.z = z;
|
||||
this.center = center;
|
||||
|
||||
//init the control corners
|
||||
if (this._initControlPos) {
|
||||
this._initControlPos();
|
||||
}
|
||||
|
||||
// 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();
|
||||
|
||||
this.basemaps = {
|
||||
"currentVersion": 10.01,
|
||||
"services": [
|
||||
{ "name": "esri:topograhy", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'ESRI Topograhy' },
|
||||
{ "name": "esri:imagery", "type": "MapServer", 'image': 'background_esri_world_imagery.png', 'title': 'ESRI Imagery' },
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
static async build(x, y, z, 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, center, camera, scene, container);
|
||||
map._initDataLayers(modelData.mappedfeatures);
|
||||
map.title = modelData.model.model_name;
|
||||
return map;
|
||||
}
|
||||
|
||||
get layers() {
|
||||
return this._layers;
|
||||
}
|
||||
|
||||
async _initDataLayers(mappedFeatures) {
|
||||
const callStack = [];
|
||||
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.preview.legend_text, //layerData.legend_description,
|
||||
description: "test",
|
||||
color: layerData.preview.legend_color //layerData.color
|
||||
});
|
||||
callStack.push(this.addLayer(dxfLayer))
|
||||
}
|
||||
await Promise.all(callStack);
|
||||
this.emit("ready");
|
||||
}
|
||||
|
||||
_initControlPos() {
|
||||
//var test = document.getElementById("webgl");
|
||||
|
||||
var corners = this._controlCorners = {};
|
||||
var l = 'gba-';
|
||||
var container = this._controlContainer =
|
||||
//util.create('div', l + 'control-container', this.domElement);
|
||||
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 }, container);
|
||||
}
|
||||
|
||||
createCorner('top', 'left');
|
||||
createCorner('top', 'right');
|
||||
createCorner('bottom', 'left');
|
||||
createCorner('bottom', 'right');
|
||||
}
|
||||
|
||||
initControls() {
|
||||
this._controls = this._controls || {};
|
||||
// this._controls.homeControl = (new HomeButton()).addTo(this);
|
||||
let homeControl = this._controls.homeControl = new HomeButton();
|
||||
homeControl.addTo(this);
|
||||
|
||||
let zoomControl = this._controls.zoomControl = new ZoomControl();
|
||||
zoomControl.addTo(this);
|
||||
}
|
||||
|
||||
async addLayer(layer) {
|
||||
var id = util.stamp(layer);
|
||||
if (this._layers[id]) {
|
||||
return this;
|
||||
}
|
||||
this._layers[id] = layer;
|
||||
|
||||
//layer._mapToAdd = this;
|
||||
layer.index = id;
|
||||
|
||||
//if (layer.beforeAdd) {
|
||||
// layer.beforeAdd(this);
|
||||
//}
|
||||
//this.whenReady(layer._layerAdd, layer);
|
||||
await layer._layerAdd(this);
|
||||
this.emit("change");
|
||||
return this;
|
||||
}
|
||||
|
||||
hasLayer(layer) {
|
||||
return !!layer && (util.stamp(layer) in this._layers);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { Map };
|
||||
|
|
@ -16,7 +16,7 @@ class Layer extends EventEmitter {
|
|||
return this;
|
||||
}
|
||||
|
||||
_layerAdd(e) {
|
||||
async _layerAdd(e) {
|
||||
var map = e;//.target;
|
||||
|
||||
// check in case layer gets added and then removed before the map is ready
|
||||
|
|
@ -29,7 +29,7 @@ class Layer extends EventEmitter {
|
|||
// map.on(this.getEvents(), this);
|
||||
//}
|
||||
|
||||
this.onAdd(map);
|
||||
await this.onAdd(map);
|
||||
|
||||
//if (this.getAttribution && this._map.attributionControl) {
|
||||
// this._map.attributionControl.addAttribution(this.getAttribution());
|
||||
|
|
|
|||
|
|
@ -111,6 +111,9 @@ class TinLayer extends Layer {
|
|||
};
|
||||
|
||||
this.material = new ShaderMaterial( {
|
||||
clipIntersection: true,
|
||||
clipShadows: true,
|
||||
flatShading: true,
|
||||
uniforms: uniforms.clipping,
|
||||
vertexShader: shader.vertexClipping,
|
||||
fragmentShader: shader.fragmentClippingFront,
|
||||
|
|
|
|||
|
|
@ -106,8 +106,8 @@ class Application {
|
|||
/* Scene: that will hold all our elements such as objects, cameras and lights. */
|
||||
this.scene = new Scene();
|
||||
this.capsScene = new Scene();
|
||||
this.backStencil = new Scene();
|
||||
this.frontStencil = new Scene();
|
||||
// this.backStencil = new Scene();
|
||||
// this.frontStencil = new Scene();
|
||||
this._buildDefaultLights(this.scene);
|
||||
//app.scene.autoUpdate = false;
|
||||
//// show axes in the screen
|
||||
|
|
@ -179,17 +179,21 @@ class Application {
|
|||
let map = this.map = await Map.build(x, y, z, center, this.camera, 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', () => {
|
||||
this.selection.setUniforms();
|
||||
}, this);
|
||||
|
||||
this.selection = new Selection(
|
||||
// new Vector3(-7, -14, -14),
|
||||
// new Vector3(14, 9, 3)
|
||||
new Vector3(x.min, y.min, z.min),
|
||||
new Vector3(x.max, y.max, z.max),
|
||||
map
|
||||
map
|
||||
);
|
||||
|
||||
|
||||
new Picking(size, center, this);
|
||||
|
||||
|
||||
|
||||
// let boxLayer = new BoxLayer({
|
||||
// width: 10000, height: 10000, depth: 10000, name: 'center-box', color: 800080 , center: center
|
||||
// });
|
||||
|
|
@ -261,7 +265,6 @@ class Application {
|
|||
this.capsScene.add(this.selection.boxMesh);
|
||||
this.scene.add(this.selection.displayMeshes);
|
||||
this.scene.add(this.selection.touchMeshes);
|
||||
this.selection.setUniforms();
|
||||
|
||||
// domEvent.on(window, 'resize', this.onWindowResize, this);
|
||||
// domEvent.on(window, 'keydown', this.keydown, this);
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue