From c60220d08d8d2e02cfca675eb194b53a3cd2b3c1 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Thu, 2 Sep 2021 13:20:56 +0200 Subject: [PATCH] - LayerControl: topogrphy default of - performance optimization for vendor file (only importing specific classes from three.js - not the whole library) --- src/js/clip/SelectionBoxLine.js | 2 +- .../{LayerControl.js => LayerControl.ts} | 41 ++++++++-- src/js/controls/NorthArrow.js | 2 +- src/js/core/Map.ts | 4 +- src/js/layer/DemBlock.js | 18 ++--- src/js/layer/Layer.ts | 2 +- src/js/layer/TinLayer.ts | 1 - src/js/main.js | 16 ++-- src/js/tasks/BoreholeIdentify.js | 74 +++++++++---------- src/js/tools/BoreholeTool.js | 2 +- 10 files changed, 98 insertions(+), 64 deletions(-) rename src/js/controls/{LayerControl.js => LayerControl.ts} (87%) diff --git a/src/js/clip/SelectionBoxLine.js b/src/js/clip/SelectionBoxLine.js index 42909a8..0e36b4d 100644 --- a/src/js/clip/SelectionBoxLine.js +++ b/src/js/clip/SelectionBoxLine.js @@ -5,7 +5,7 @@ import { BufferGeometry } from 'three/src/core/BufferGeometry'; export class SelectionBoxLine { constructor(v0, v1, f0, f1, selection) { - // var lineGeometry = new THREE.Geometry(); + // var lineGeometry = new Geometry(); // lineGeometry.vertices.push(v0, v1); // lineGeometry.computeLineDistances(); // lineGeometry.dynamic = true; diff --git a/src/js/controls/LayerControl.js b/src/js/controls/LayerControl.ts similarity index 87% rename from src/js/controls/LayerControl.js rename to src/js/controls/LayerControl.ts index 40b1f19..2a8a84b 100644 --- a/src/js/controls/LayerControl.js +++ b/src/js/controls/LayerControl.ts @@ -14,7 +14,8 @@ export class LayerControl extends Control { options = { collapsed: true, position: 'topright', - autoZIndex: true + autoZIndex: true, + parentDiv: '', }; // private class fields: @@ -29,6 +30,7 @@ export class LayerControl extends Control { _layers; _handlingClick; _dialog; + _layerContainer; constructor(overlayLayers, options) { super(options); @@ -101,6 +103,10 @@ export class LayerControl extends Control { } } + onRemove(){ + //to do + } + _addLayer(layer, name, overlay) { let id = util.stamp(layer); @@ -110,6 +116,10 @@ export class LayerControl extends Control { overlay: overlay }; layer.addListener('visibility-change', this._updateLayerList, this); + layer.addListener('visibility-change',(args) => { + let visible = args[0]; + this._onVisibilityChange(id, visible); + }, this); } _updateLayerList() { @@ -135,15 +145,14 @@ export class LayerControl extends Control { } _addLegendEntry(obj) { - var checked = obj.layer.visible;//this._map.hasLayer(obj.layer); - var container = obj.overlay ? this._overlaysList : this._baseLayersList; + let container = obj.overlay ? this._overlaysList : this._baseLayersList; //container.appendChild(legendEntryRow); - var legendEntryRow = dom.createDom("tr", { style: "display: row-table; height: 20px;" }, container); + let legendEntryRow = dom.createDom("tr", { style: "display: row-table; height: 20px;" }, container); //domStyle.set(legendEntryRow, 'display', rowVisibility); //dom.setProperties(legendEntryRow, { style: "display: row-table;" }); - var legendDataCell = dom.createDom("td", { "style": "width:25px;vertical-align: top;" }, legendEntryRow); + let legendDataCell = dom.createDom("td", { "style": "width:25px;vertical-align: top;" }, legendEntryRow); let legendDiv = dom.createDom("div", { "style": "width:20px; height:20px;" }, legendDataCell); legendDiv.style.backgroundColor = "#" + obj.layer.color; @@ -216,6 +225,28 @@ export class LayerControl extends Control { return legendEntryRow; } + _onVisibilityChange(layerId, visible) { + if (! this._layerContainer) { + return; + } + let inputs = this._layerContainer.getElementsByTagName('input'); + // this._handlingClick = true; + + for (let i = 0; i < inputs.length; i++) { + let input = inputs[i]; + if (input.type == 'checkbox' && layerId === input.layerId) { + // let objLayer = this._layers[input.layerId]; + // var isChecked = input.checked; + // obj.layer.setVisible(isChecked); + input.checked = visible; + } + } + + // this._handlingClick = false; + this._map.update(); + //this._refocusOnMap(); + } + _onInputClick(layerId) { let inputs = this._layerContainer.getElementsByTagName('input'); this._handlingClick = true; diff --git a/src/js/controls/NorthArrow.js b/src/js/controls/NorthArrow.js index 2ca9fc2..f683e5c 100644 --- a/src/js/controls/NorthArrow.js +++ b/src/js/controls/NorthArrow.js @@ -170,7 +170,7 @@ export class NorthArrow extends Control { ]; this.boxGeometry = new UpdatableBoxGeometry(vertices); this.boxMesh = new Mesh(this.boxGeometry, - [southMaterial, material.BoxBackFace, eastMaterial, westMaterial, northMaterial, topMaterial]); + [southMaterial, material.BoxBackFace, westMaterial, eastMaterial, northMaterial, topMaterial]); // this.boxGeometry = new BoxGeometry(5, 5, 5); // this.boxMesh = new Mesh(this.boxGeometry, diff --git a/src/js/core/Map.ts b/src/js/core/Map.ts index 7911bcf..abf116d 100644 --- a/src/js/core/Map.ts +++ b/src/js/core/Map.ts @@ -9,7 +9,7 @@ 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 { Group } from 'three/src/objects/Group'; import { Layer } from '../layer/Layer'; import { LayerService } from '../services/layer.service'; @@ -100,7 +100,7 @@ class Map extends OrbitControls { "currentVersion": 10.01, "services": [ { "name": "osm:wms", "type": "MapServer", 'image': 'background_osm_world_topography.png', 'title': 'OSM WMS' }, - { "name": "osm:gray-wms", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'OSM Gray WMS' }, + { "name": "osm:gray-wms", "type": "MapServer", 'image': 'background_osm_gray_world_topography.png', 'title': 'OSM Gray WMS' }, // { "name": "esri:topograhy", "type": "MapServer", 'image': 'background_esri_world_topography.png', 'title': 'ESRI Topography' }, ] diff --git a/src/js/layer/DemBlock.js b/src/js/layer/DemBlock.js index 698772a..1baa630 100644 --- a/src/js/layer/DemBlock.js +++ b/src/js/layer/DemBlock.js @@ -25,9 +25,9 @@ export class DemBlock { let heightSegments = yPixel - 1; //appSettings.Options.exportMode = true; - // let PlaneGeometry = (appSettings.Options.exportMode) ? THREE.PlaneGeometry : THREE.PlaneBufferGeometry; + // let PlaneGeometry = (appSettings.Options.exportMode) ? PlaneGeometry : PlaneBufferGeometry; //var geom = layer.mainGeometry = new PlaneGeometry(this.plane.width, this.plane.height, widthSegments, heightSegments); - let geom = layer.mainGeometry = this.buildPlaneBufferGeometry(this.plane.width, this.plane.height, widthSegments, heightSegments);// new THREE.PlaneBufferGeometry(this.plane.width, this.plane.height, 11, 7); + let geom = layer.mainGeometry = this.buildPlaneBufferGeometry(this.plane.width, this.plane.height, widthSegments, heightSegments);// new PlaneBufferGeometry(this.plane.width, this.plane.height, 11, 7); // let geom = layer.mainGeometry = new PlaneBufferGeometry( 10, 5, 20, 20 ); @@ -90,12 +90,12 @@ export class DemBlock { //} geom.computeBoundingBox();//for building border geometry - //var material = new THREE.MeshPhongMaterial({ color: 0x223322, wireframe: true }); - //var mesh = new THREE.Mesh(geom, material); + //var material = new MeshPhongMaterial({ color: 0x223322, wireframe: true }); + //var mesh = new Mesh(geom, material); - //var wireframe_material = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true, wireframe_linewidth: 10 }); + //var wireframe_material = new MeshBasicMaterial({ color: 0x000000, wireframe: true, wireframe_linewidth: 10 }); //var materials = [layer.materials[this.mIndex].mat, wireframe_material]; - //var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials); + //var mesh = SceneUtils.createMultiMaterialObject(geom, materials); var mesh = layer.mainMesh = new Mesh(geom, layer.material); //layer.materials[this.mIndex].mat); @@ -103,7 +103,7 @@ export class DemBlock { //mesh.matrixAutoUpdate = true; - //var egh = new THREE.EdgesHelper(mesh, 0x00ffff); + //var egh = new EdgesHelper(mesh, 0x00ffff); //egh.material.linewidth = 2; //layer.addObject(egh); @@ -194,8 +194,8 @@ export class DemBlock { } //geometry.attributes['index'] = { array: indices, itemSize: 1 }; - //geometry.setIndex(new THREE.BufferAttribute(indices, 1).setDynamic(true)); - //geometry.addAttribute('index', new THREE.BufferAttribute(indices, 1)); + //geometry.setIndex(new BufferAttribute(indices, 1).setDynamic(true)); + //geometry.addAttribute('index', new BufferAttribute(indices, 1)); let index = new BufferAttribute(indices, 1);//setDynamic(true); geometry.setIndex(index); diff --git a/src/js/layer/Layer.ts b/src/js/layer/Layer.ts index f456f1c..60d3b7e 100644 --- a/src/js/layer/Layer.ts +++ b/src/js/layer/Layer.ts @@ -2,7 +2,7 @@ import { EventEmitter } from '../core/EventEmitter'; import { BoreholePopup } from '../controls/BoreholePopup'; import { Map } from '../core/Map'; import { Scene } from 'three/src/scenes/Scene'; -import { Group } from 'three'; +import { Group } from 'three/src/objects/Group'; abstract class Layer extends EventEmitter { diff --git a/src/js/layer/TinLayer.ts b/src/js/layer/TinLayer.ts index ff14596..225668e 100644 --- a/src/js/layer/TinLayer.ts +++ b/src/js/layer/TinLayer.ts @@ -984,7 +984,6 @@ class TinLayer extends Layer { } async changeImage(i) { - //this.mainMesh.material.map = THREE.ImageUtils.loadTexture(src); let image = this.images[i]; // if (image.texture === undefined) { if (image.type == "esri") { diff --git a/src/js/main.js b/src/js/main.js index c970692..44dbba2 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -198,7 +198,13 @@ class Application { this.mapTitle.innerHTML += map.title; this.menuEmailButton.href = 'mailto:' + map.contact; + map.on('ready', () => { + this.layerControl = new LayerControl(this.map.layers, { + collapsed: true, + parentDiv: 'layer-control-parent-id' + }).addTo(this.map); + this.selectionBox.setUniforms(); // this.capsScene.add(this.selectionBox.boxMesh); @@ -210,6 +216,9 @@ class Application { for (const [i, layer] of Object.entries(this.map.layers)) { // let layer = map.layers[i]; + if (layer instanceof TinLayer & layer.name == "Topography") { + layer.setVisible(false); + } if (layer instanceof TinLayer && layer.name != "Topography") { // modelNode.add(layer.mainMesh); @@ -286,7 +295,7 @@ class Application { this.selectionBox = new Selection( { name: 'Slicing Box' }, new Vector3(this.map.x.min, this.map.y.min, this.map.z.min), - new Vector3(this.map.x.max, this.map.y.max, this.map.z.max) + new Vector3(this.map.x.max, this.map.y.max, this.map.z.max + 1000) ); // this.map.addLayer(this.selectionBox); this.map.picking = new PickingTool(this.map.size, this.map.center, this); @@ -314,11 +323,6 @@ class Application { this.gridlayer = new GridLayer({ center: this.map.center, name: "coordinate grid", appWidth: this.width, appHeight: this.height }); this.map.addLayer(this.gridlayer); - new LayerControl(this.map.layers, { - collapsed: true, - parentDiv: 'layer-control-parent-id' - }).addTo(this.map); - this.basemapControl = new BasemapControl('Baselayer', { position: 'topright' }).addTo(this.map); diff --git a/src/js/tasks/BoreholeIdentify.js b/src/js/tasks/BoreholeIdentify.js index 2191f48..c100642 100644 --- a/src/js/tasks/BoreholeIdentify.js +++ b/src/js/tasks/BoreholeIdentify.js @@ -62,9 +62,9 @@ export class BoreholeIdentify { vector.sub(this.camera.position); vector.normalize(); let raycaster = new Raycaster(this.camera.position, vector); - //var raycaster = new THREE.Raycaster(vector, new THREE.Vector3(0, 1, 0).normalize()); - //var direction = new THREE.Vector3(0, 0, 1); - //var raycaster = new THREE.Raycaster(); + //var raycaster = new Raycaster(vector, new Vector3(0, 1, 0).normalize()); + //var direction = new Vector3(0, 0, 1); + //var raycaster = new Raycaster(); //raycaster.set(vector, direction); let visibleMehses = this._getvisibleQueryableObjects();//only the visible layers @@ -114,46 +114,46 @@ export class BoreholeIdentify { }); } - _highlightFeature(layerId, featureId) { - //if (app.highlightObject) { - // // remove highlight object from the scene - // app.scene.remove(app.highlightObject); - // app.selectedLayerId = null; - // app.selectedFeatureId = null; - // app.highlightObject = null; - //} + // _highlightFeature(layerId, featureId) { + // //if (app.highlightObject) { + // // // remove highlight object from the scene + // // app.scene.remove(app.highlightObject); + // // app.selectedLayerId = null; + // // app.selectedFeatureId = null; + // // app.highlightObject = null; + // //} - if (layerId === null) return; - var layer = this.layers[layerId]; - if (layer === undefined) return; + // if (layerId === null) return; + // var layer = this.layers[layerId]; + // if (layer === undefined) return; - var f = layer.features[featureId]; - if (f === undefined) return; + // var f = layer.features[featureId]; + // if (f === undefined) return; - var high_mat = this.highlightMaterial; - //var setMaterial = function (obj) { - // obj.material = high_mat; - //}; + // var high_mat = this.highlightMaterial; + // //var setMaterial = function (obj) { + // // obj.material = high_mat; + // //}; - // create a highlight object (if layer type is Point, slightly bigger than the object) - // var highlightObject = new THREE.Group(); - //var clone; - //var s = (layer.type == Q3D.LayerType.Point) ? 1.01 : 1; + // // create a highlight object (if layer type is Point, slightly bigger than the object) + // // var highlightObject = new Group(); + // //var clone; + // //var s = (layer.type == Q3D.LayerType.Point) ? 1.01 : 1; - var geo = new THREE.Geometry(); - var v1 = new Vector3(f.Punkt0.x, f.Punkt0.y, f.Punkt0.z); - var v2 = new Vector3(f.Punkt1.x, f.Punkt1.y, f.Punkt1.z); - var v3 = new Vector3(f.Punkt2.x, f.Punkt2.y, f.Punkt2.z); - geo.vertices.push(v1); - geo.vertices.push(v2); - geo.vertices.push(v3); - var face = new THREE.Face3(0, 1, 2); - geo.faces.push(face); - //clone.traverse(setMaterial); - var clone = new THREE.Mesh(geo, high_mat); + // var geo = new Geometry(); + // var v1 = new Vector3(f.Punkt0.x, f.Punkt0.y, f.Punkt0.z); + // var v2 = new Vector3(f.Punkt1.x, f.Punkt1.y, f.Punkt1.z); + // var v3 = new Vector3(f.Punkt2.x, f.Punkt2.y, f.Punkt2.z); + // geo.vertices.push(v1); + // geo.vertices.push(v2); + // geo.vertices.push(v3); + // var face = new Face3(0, 1, 2); + // geo.faces.push(face); + // //clone.traverse(setMaterial); + // var clone = new Mesh(geo, high_mat); - return clone; - } + // return clone; + // } _getvisibleQueryableObjects() { let _queryableObjects = []; diff --git a/src/js/tools/BoreholeTool.js b/src/js/tools/BoreholeTool.js index 0b697f8..0f7fa3b 100644 --- a/src/js/tools/BoreholeTool.js +++ b/src/js/tools/BoreholeTool.js @@ -12,7 +12,7 @@ export class BoreholeTool extends EventEmitter { options = { zIndex: 1000, - markerClass: MarkerLayer,//THREE.CylinderGeometry, + markerClass: MarkerLayer,// CylinderGeometry, drawingCSSClass: 'gba-editable-drawing', drawingCursor: 'crosshair' };