From 721a9cdacad6b52518f8fba687b2f1ac45a3bb3d Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Thu, 25 Mar 2021 17:44:51 +0100 Subject: [PATCH] - add BoreholePopup.s and BoreholePopup.cs - add LayerGroup.js for adding marker layer - correct BoreholeIdentify.js --- package-lock.json | 60 +++++----- src/js/controls/BoreholePopup.css | 115 +++++++++++++++++++ src/js/controls/BoreholePopup.js | 184 ++++++++++++++++++++++++++++++ src/js/core/BaseEditor.js | 44 +++++-- src/js/core/Map.js | 43 ++++++- src/js/layer/DemLayer.js | 3 + src/js/layer/Layer.js | 5 + src/js/layer/LayerGroup.js | 99 ++++++++++++++++ src/js/layer/MarkerLayer.js | 37 +++--- src/js/layer/TinLayer.js | 43 ++++--- src/js/tasks/BoreholeIdentify.js | 39 +++++-- src/js/tools/BoreholeTool.js | 33 +++++- 12 files changed, 623 insertions(+), 82 deletions(-) create mode 100644 src/js/controls/BoreholePopup.css create mode 100644 src/js/controls/BoreholePopup.js create mode 100644 src/js/layer/LayerGroup.js diff --git a/package-lock.json b/package-lock.json index d70a4d6..b8f9559 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1405,9 +1405,9 @@ "dev": true }, "node_modules/@types/minimatch": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", - "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==", "dev": true, "peer": true }, @@ -2386,9 +2386,9 @@ } }, "node_modules/css-loader": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.3.tgz", - "integrity": "sha512-CoPZvyh8sLiGARK3gqczpfdedbM74klGWurF2CsNZ2lhNaXdLIUks+3Mfax3WBeRuHoglU+m7KG/+7gY6G4aag==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.0.tgz", + "integrity": "sha512-MfRo2MjEeLXMlUkeUwN71Vx5oc6EJnx5UQ4Yi9iUtYQvrPtwLUucYptz0hc6n++kdNcyF5olYBS4vPjJDAcLkw==", "dev": true, "dependencies": { "camelcase": "^6.2.0", @@ -2625,9 +2625,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.3.695", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.695.tgz", - "integrity": "sha512-lz66RliUqLHU1Ojxx1A4QUxKydjiQ79Y4dZyPobs2Dmxj5aVL2TM3KoQ2Gs7HS703Bfny+ukI3KOxwAB0xceHQ==", + "version": "1.3.699", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.699.tgz", + "integrity": "sha512-fjt43CPXdPYwD9ybmKbNeLwZBmCVdLY2J5fGZub7/eMPuiqQznOGNXv/wurnpXIlE7ScHnvG9Zi+H4/i6uMKmw==", "dev": true }, "node_modules/emoji-regex": { @@ -4905,9 +4905,9 @@ "dev": true }, "node_modules/regjsparser": { - "version": "0.6.8", - "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.8.tgz", - "integrity": "sha512-3weFrFQREJhJ2PW+iCGaG6TenyzNSZgsBKZ/oEf6Trme31COSeIWhHw9O6FPkuXktfx+b6Hf/5e6dKPHaROq2g==", + "version": "0.6.9", + "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz", + "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==", "dev": true, "dependencies": { "jsesc": "~0.5.0" @@ -6225,9 +6225,9 @@ } }, "node_modules/webpack": { - "version": "5.27.2", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.27.2.tgz", - "integrity": "sha512-brNF3N/EdvMzkaZ/Xzb8sqPn5Si3iw6meqCnmNFtcnkorZsFZCBFMa2ElpIMjx6sKWYsnUpBO2dnX+7xgj+mjg==", + "version": "5.28.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.28.0.tgz", + "integrity": "sha512-1xllYVmA4dIvRjHzwELgW4KjIU1fW4PEuEnjsylz7k7H5HgPOctIq7W1jrt3sKH9yG5d72//XWzsHhfoWvsQVg==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.0", @@ -7772,9 +7772,9 @@ "dev": true }, "@types/minimatch": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", - "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==", "dev": true, "peer": true }, @@ -8589,9 +8589,9 @@ } }, "css-loader": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.3.tgz", - "integrity": "sha512-CoPZvyh8sLiGARK3gqczpfdedbM74klGWurF2CsNZ2lhNaXdLIUks+3Mfax3WBeRuHoglU+m7KG/+7gY6G4aag==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.0.tgz", + "integrity": "sha512-MfRo2MjEeLXMlUkeUwN71Vx5oc6EJnx5UQ4Yi9iUtYQvrPtwLUucYptz0hc6n++kdNcyF5olYBS4vPjJDAcLkw==", "dev": true, "requires": { "camelcase": "^6.2.0", @@ -8750,9 +8750,9 @@ } }, "electron-to-chromium": { - "version": "1.3.695", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.695.tgz", - "integrity": "sha512-lz66RliUqLHU1Ojxx1A4QUxKydjiQ79Y4dZyPobs2Dmxj5aVL2TM3KoQ2Gs7HS703Bfny+ukI3KOxwAB0xceHQ==", + "version": "1.3.699", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.699.tgz", + "integrity": "sha512-fjt43CPXdPYwD9ybmKbNeLwZBmCVdLY2J5fGZub7/eMPuiqQznOGNXv/wurnpXIlE7ScHnvG9Zi+H4/i6uMKmw==", "dev": true }, "emoji-regex": { @@ -10506,9 +10506,9 @@ "dev": true }, "regjsparser": { - "version": "0.6.8", - "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.8.tgz", - "integrity": "sha512-3weFrFQREJhJ2PW+iCGaG6TenyzNSZgsBKZ/oEf6Trme31COSeIWhHw9O6FPkuXktfx+b6Hf/5e6dKPHaROq2g==", + "version": "0.6.9", + "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz", + "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==", "dev": true, "requires": { "jsesc": "~0.5.0" @@ -11523,9 +11523,9 @@ } }, "webpack": { - "version": "5.27.2", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.27.2.tgz", - "integrity": "sha512-brNF3N/EdvMzkaZ/Xzb8sqPn5Si3iw6meqCnmNFtcnkorZsFZCBFMa2ElpIMjx6sKWYsnUpBO2dnX+7xgj+mjg==", + "version": "5.28.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.28.0.tgz", + "integrity": "sha512-1xllYVmA4dIvRjHzwELgW4KjIU1fW4PEuEnjsylz7k7H5HgPOctIq7W1jrt3sKH9yG5d72//XWzsHhfoWvsQVg==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", diff --git a/src/js/controls/BoreholePopup.css b/src/js/controls/BoreholePopup.css new file mode 100644 index 0000000..8004590 --- /dev/null +++ b/src/js/controls/BoreholePopup.css @@ -0,0 +1,115 @@ +.gba-control-borehole { + cursor: pointer; +} + +.gba-control-borehole .maximize.hidden { + display: none; +} + +.gba-control-borehole .maximize { + color: rgb(220, 220, 220); + background: gray; + border: 1px solid #000000; + border-radius: 4px; + font-size: 16px; + font-weight: bold; + width: 20px; + height: 20px; + text-align: center; + float: left; + cursor: pointer; +} + +/*side-menu zumachen*/ +.gba-menu .close { + color: rgb(220, 220, 220); + background: gray; + border: 1px solid #000000; + border-radius: 4px; + font-size: 16px; + font-weight: bold; + width: 20px; + height: 20px; + text-align: center; + float: right; + cursor: pointer; +} +.gba-close-icon { + background-repeat: no-repeat; + /* background-image: url("img/16.png"); */ + background-position: -52px -9px; + display: inline; + padding: 0 10px; +} +.toolbox { + list-style-image: none; + list-style-position: inside; + list-style-type: none; +} +.gba-menu .toolbox li { + color: #464646; + line-height: 46px; + cursor: pointer; + float: right; + padding: 0 5px; +} +.gba-menu .body { + clear: both; + height: calc(100% - 46px); +} + +.gba-menu { + /*width: 400px;*/ + position: absolute; + top: 0; + left: 0; + /*bottom: 0;*/ + /*right: 0;*/ + padding: 0 20px 2px 20px; + border-right: 1px solid #ddd; + border-left: 1px solid #ddd; + /*display: none;*/ + overflow-y: auto; + z-index: 1000; + background-color: #fff; + opacity: 0.93; +} + +.gba-menu::-webkit-scrollbar { + width: 7px; + height: 7px; + background: #f2f2f2; +} + +.gba-menu::-webkit-scrollbar-thumb { + border-radius: 2px; + background: #777; +} + +.chartTable { + margin-left: 20px; + border-width: 0; + border-spacing: 0; /* Removes the cell spacing via CSS */ + border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */ +} + +.chartTable div { + font: 10px sans-serif; + /*background-color: steelblue;*/ + text-align: left; + /*padding: 3px; + margin: 1px;*/ + color: #464646; + /*width:75px;*/ +} + +.chartTable td { + vertical-align: central; + text-align: center; + padding: 0; + overflow: visible; +} + +.chartTable td img { + display: block; +} diff --git a/src/js/controls/BoreholePopup.js b/src/js/controls/BoreholePopup.js new file mode 100644 index 0000000..77c866a --- /dev/null +++ b/src/js/controls/BoreholePopup.js @@ -0,0 +1,184 @@ +import { Control } from "./Control"; +import * as util from '../core/utilities'; +import * as domEvent from '../core/domEvent'; +import * as dom from '../core/domUtil'; + +import './BoreholePopup.css'; + +export class BoreholePopup extends Control { + + options = { + position: 'topleft', + width: '300px', + height: '100%', + delay: '10' + }; + + constructor (options) { + super(); + this._innerHTML = "Es wurde noch keine Bohrloch ausgewählt!"; + util.setOptions(this, options); + //this._startPosition = -(parseInt(this.options.width, 10)); + //this._isLeftPosition = true; + this._hasContent = false; + } + + // happens after added to map + onAdd(map) { + if (!map) { + this.destroy(); + //logger.warning('HomeButton::map required', true); + return; + } + // var b = this._nls = util.mixin({}, N.widgets.boreholepopup); + let container = this._container = dom.createDom("div", { "class": "gba-control-borehole" }); + + //button: + this._maxButton = dom.createDom('div', { + "class": "maximize", innerHTML: ">", title: "b.NLS_maximize" + }, this._container); + //link.title = 'Menu'; + //dom.createDom('span', { "class": "close", innerHtml: '?' }, link); + + //this._menu = dom.createDom('div', { "class": "gba-menu" }, document.getElementsByClassName('mapDesktop')[0]); + this._menu = dom.createDom('div', { "class": "gba-menu" }, dom.byId("webgl")); + this._menu.style.width = this.options.width; + this._menu.style.height = this.options.height; + this._menu.style.left = 0;// '-' + this.options.width; + this._menu.style.top = 0; + + let toolboxList = dom.createDom('ul', { "class": "toolbox" }, this._menu); + this._clearButton = dom.createDom('li', { "class": "gba-close-link" }, toolboxList); + dom.createDom('i', { "class": "gba-close-icon" }, this._clearButton); + dom.createDom('span', { title: "b.NLS_close", innerHTML: "Close" }, this._clearButton); + + this._body = dom.createDom('div', { "class": "body" }, this._menu); + + //this._minimizeButton = dom.createDom('div', { + // "class": "close", innerHTML: "<", title: b.NLS_minimize + //}, this._menu); + this._contenLable = dom.createDom('lable', { innerHTML: "Virtuelles Bohrprofil laut Modell
(Höhenangaben in m Seehöhe)" }, + this._body); + + /* hier kommt nach dem Identify das Bohrprofil hinein */ + this._contentPane = dom.createDom('div', { "class": "gba-menu-contents" }, this._body); + this._contentPane.innerHTML = this._innerHTML; + this._contentPane.style.clear = 'both'; + + domEvent + //.on(this._maxButton, 'click', domEvent.stopPropagation) + .on(this._maxButton, 'click', + this.show, + this); + //domEvent.on(this._minimizeButton, 'click', domEvent.stopPropagation) + // .on(this._minimizeButton, 'click', + // this.hide, + // this); + domEvent + //.on(this._clearButton, 'click', domEvent.stopPropagation) + .on(this._clearButton, 'click', + this._close, + this); + + this._toggleVisibility(false); + return container; + } + + show(a) { + //this._clearContent(); + this._toggleVisibility(true); + //this._animate(true); + } + + hide(e) { + //var test = this.isShowing; + if (this.isShowing) { + (this._toggleVisibility(false)); + } + //if (e) { + // domEvent.stop(e); + //} + } + + _setContent(innerHTML) { + if (innerHTML instanceof HTMLElement) { + this._contentPane.innerHTML = ""; + this._contentPane.appendChild(innerHTML); + } + else { + this._contentPane.innerHTML = innerHTML; + } + this._contentPane.style.display = "block"; + //this._contentPane.innerHTML = innerHTML; + //this._contentPane.style.display = "block"; + } + + setChartContent(data) { + this._contentPane.innerHTML = ""; + + var valTextColor = "ffffff"; + // this.barChart = new BarChart("d17100", + // 320, valTextColor, 'full', + // 400); + // this.barChart.draw(data); + // this._contentPane.appendChild(this.barChart._container); + + // var table = this.barChart.getStatTable(data); + // this._contentPane.appendChild(table); + this._hasContent = true; + } + + _close() { + this._clearContent(); + this._toggleVisibility(false); + this.emit("closed"); + } + + _clearContent() { + // $(this._contentPane).html(''); + this._contentPane.innerHTML = ''; + this._hasContent = false; + } + + _toggleVisibility(visible) { + this._setVisibility(visible); + this.isShowing = visible; + } + + _setVisibility(addOrRemove) { + //n.set(this.domNode, "visibility", addOrRemove ? "visible" : "hidden"); + // $(this._menu).css("visibility", addOrRemove ? "visible" : "hidden"); + this._menu.style.visibility = addOrRemove ? "visible" : "hidden"; + + //e.toggle(this.domNode, "esriPopupVisible", addOrRemove) + + var maxButtonVisible = false; + //if add, max Button not visible + if (addOrRemove == true) { + maxButtonVisible = !addOrRemove; + } + //if remove , then max Button only visible if popup has content + else if (addOrRemove == false) { + maxButtonVisible = this._hasContent; + } + // $(this._maxButton).css("visibility", maxButtonVisible ? "visible" : "hidden"); + this._maxButton.style.visibility = addOrRemove ? "visible" : "hidden"; + } + + onRemove() { + //this.cleanup(); + this.isShowing && this.hide(); + //for (var i = 0; i < this._eventConnections.length; i ++) + //{ + // var f = this._eventConnections[i]; + // f.remove(); + //} + domEvent.off(this._clearButton, 'click', this._close, this); + domEvent.off(this._maxButton, 'click', this.show, this); + //this.map.off('mouse-pan', this.hide, this); + //C.destroy(this.domNode); + //this.getContainer().parentNode.removeChild(this.getContainer()); + this._innerHTML = this._hasContent = this._nls = this._menu = this._body = this._contenLable = this._contentPane = this._maxButton = this._clearButton = null; + } + +} \ No newline at end of file diff --git a/src/js/core/BaseEditor.js b/src/js/core/BaseEditor.js index 93848ea..55defa2 100644 --- a/src/js/core/BaseEditor.js +++ b/src/js/core/BaseEditor.js @@ -24,7 +24,7 @@ export class BaseEditor { //this.editLayer = new LayerGroup(); this.mapTool = map.mapTool; //this.options.editTools || map.mapTool; - // this.marker.bindPopup(map._controls.boreholePopup); + this.marker.bindPopup(map._controls.boreholePopup); } enable() { @@ -101,18 +101,48 @@ export class BaseEditor { if (e._cancelled) return; //if (!this.isConnected()) { // this.connect(e); - //} - var dxfIdentifyParams = {}; - dxfIdentifyParams.clientX = e.clientX; - dxfIdentifyParams.clientY = e.clientY; + //} + let eventX = (e.clientX !== undefined) ? e.clientX : (e.touches && e.touches[0].clientX); + let eventY = (e.clientY !== undefined) ? e.clientY : (e.touches && e.touches[0].clientY); + let dxfIdentifyParams = {}; + dxfIdentifyParams.clientX = eventX; + dxfIdentifyParams.clientY = eventY; dxfIdentifyParams.width = this.map.container.clientWidth; dxfIdentifyParams.height = this.map.container.clientHeight; - // var deferred = this.mapTool.drillTask.execute(dxfIdentifyParams); - // deferred.then(this.handleQueryResults3.bind(this)); + let deferred = this.mapTool.drillTask.execute(dxfIdentifyParams); + deferred.then(this.handleQueryResults.bind(this)); this._processDrawingClick(e); } + handleQueryResults() { + let results = arguments; + //var content = []; + let features = results[0].features; + let aufschlag = results[0].aufschlag; + if (!this.isConnected()) { + this.connect(aufschlag); + } + else { + this.marker.setLatLng(aufschlag); + } + this.marker.setPopupChartData("test"); + this.marker.openPopup(); + + } + + connect(e) { + // On touch, the latlng has not been updated because there is + // no mousemove. + if (e) this.marker._latlng = { x: e.x, y: e.y, z: e.z }; //e.latlng; + //this.marker.update(); + + //L.Editable.BaseEditor.prototype.connect.call(this, e); + this.mapTool.connectCreatedToMap(this.marker); + //this.mapTool.editLayer.addLayer(this.editLayer); + } + + _processDrawingClick(e) { this.fireAndForward('editable:drawing:clicked', e); this._commitDrawing(e); diff --git a/src/js/core/Map.js b/src/js/core/Map.js index ecbab4b..8e64fcd 100644 --- a/src/js/core/Map.js +++ b/src/js/core/Map.js @@ -3,6 +3,7 @@ import * as dom from './domUtil'; import { HomeButton } from '../controls/HomeButton'; import { ZoomControl } from '../controls/ZoomControl'; import { BoreholeControl } from '../controls/BoreholeControl'; +import { BoreholePopup } from '../controls/BoreholePopup'; import * as util from './utilities'; import { TinLayer } from '../layer/TinLayer'; @@ -28,7 +29,7 @@ class Map extends OrbitControls { // call parent constructor of OrbitControls super(size, center, camera, scene, container); - this.size = size; + this.size = size; this.camera = camera; this.container = container; this.length = x.max - x.min; @@ -50,7 +51,6 @@ class Map extends OrbitControls { // to do: initialize layers via serviceUrl: // this.serviceUrl = serviceUrl; this._layers = {}; - this.initControls(); this.basemaps = { "currentVersion": 10.01, @@ -68,6 +68,8 @@ class Map extends OrbitControls { // now instantiate and return a class let map = new Map(x, y, z, center, camera, scene, container); map._initDataLayers(modelData.mappedfeatures); + map._initControls(); + map.title = modelData.model.model_name; return map; } @@ -118,7 +120,7 @@ class Map extends OrbitControls { createCorner('bottom', 'right'); } - initControls() { + _initControls() { this._controls = this._controls || {}; // this._controls.homeControl = (new HomeButton()).addTo(this); let homeControl = this._controls.homeControl = new HomeButton(); @@ -128,6 +130,8 @@ class Map extends OrbitControls { zoomControl.addTo(this); this._controls.maptoolControl = new BoreholeControl().addTo(this); + this._controls.boreholePopup = new BoreholePopup({}); + this._controls.boreholePopup.addTo(this); } async addLayer(layer) { @@ -149,11 +153,42 @@ class Map extends OrbitControls { return this; } + removeLayer(layer) { + let id = util.stamp(layer); + + if (!this._layers[id]) { return this; } + + //if (this._loaded) { + // layer.onRemove(this); + //} + layer.onRemove(this); + this.emit("change"); + //if (layer.getAttribution && this.attributionControl) { + // this.attributionControl.removeAttribution(layer.getAttribution()); + + //} + + //if (layer.getEvents) { + // this.off(layer.getEvents(), layer); + //} + + delete this._layers[id]; + + //if (this._loaded) { + // this.emit('layerremove', { layer: layer }); + // layer.emit('remove'); + //} + + layer._map = layer._mapToAdd = null; + + return this; + } + hasLayer(layer) { return !!layer && (util.stamp(layer) in this._layers); } - getCenter () { // (Boolean) -> LatLng + getCenter() { // (Boolean) -> LatLng return this.target; } diff --git a/src/js/layer/DemLayer.js b/src/js/layer/DemLayer.js index 4723a0d..445ad34 100644 --- a/src/js/layer/DemLayer.js +++ b/src/js/layer/DemLayer.js @@ -28,6 +28,9 @@ export class DemLayer extends Layer { } ]; + queryableObjects; + borderVisible; + constructor(params) { super(); diff --git a/src/js/layer/Layer.js b/src/js/layer/Layer.js index 5026537..93c3e3a 100644 --- a/src/js/layer/Layer.js +++ b/src/js/layer/Layer.js @@ -1,4 +1,5 @@ import { EventEmitter } from '../core/EventEmitter'; +import { BoreholePopup } from '../controls/BoreholePopup'; class Layer extends EventEmitter { @@ -38,6 +39,10 @@ class Layer extends EventEmitter { //map.fire('layeradd', { layer: this }); } + setWireframeMode(wireframe) { + return; + } + getScene() { return this._map.scene; } diff --git a/src/js/layer/LayerGroup.js b/src/js/layer/LayerGroup.js new file mode 100644 index 0000000..ab1d802 --- /dev/null +++ b/src/js/layer/LayerGroup.js @@ -0,0 +1,99 @@ +import { Layer } from './Layer'; +import * as util from '../core/utilities'; + + export class LayerGroup extends Layer { + + _layers; + + constructor (layers) { + super(); + this._layers = {}; + let i, len; + + if (layers) { + for (i = 0, len = layers.length; i < len; i++) { + this.addLayer(layers[i]); + } + } + } + + addLayer (layer) { + var id = this.getLayerId(layer); + + this._layers[id] = layer; + + if (this._map) { + this._map.addLayer(layer); + } + + return this; + } + + removeLayer (layer) { + var id = layer in this._layers ? layer : this.getLayerId(layer); + + if (this._map && this._layers[id]) { + this._map.removeLayer(this._layers[id]); + } + + delete this._layers[id]; + + return this; + } + + hasLayer(layer) { + return !!layer && (layer in this._layers || this.getLayerId(layer) in this._layers); + } + + clearLayers () { + for (var i in this._layers) { + this.removeLayer(this._layers[i]); + } + return this; + } + + onAdd (map) { + for (var i in this._layers) { + map.addLayer(this._layers[i]); + } + } + + onRemove(map) { + for (var i in this._layers) { + map.removeLayer(this._layers[i]); + } + } + + eachLayer(method, context) { + for (var i in this._layers) { + method.call(context, this._layers[i]); + } + return this; + } + + getLayer(id) { + return this._layers[id]; + } + + getLayers() { + var layers = []; + + for (var i in this._layers) { + layers.push(this._layers[i]); + } + return layers; + } + + //setZIndex: function (zIndex) { + // return this.invoke('setZIndex', zIndex); + //}, + + scaleZ(z) { + return; + } + + getLayerId(layer) { + return util.stamp(layer); + } +} + diff --git a/src/js/layer/MarkerLayer.js b/src/js/layer/MarkerLayer.js index 5404f88..16d9f8a 100644 --- a/src/js/layer/MarkerLayer.js +++ b/src/js/layer/MarkerLayer.js @@ -1,9 +1,20 @@ import { Layer } from './Layer'; import * as util from '../core/utilities'; import { BaseEditor } from '../core/BaseEditor'; +import { CylinderGeometry } from 'three/src/geometries/CylinderGeometry'; +import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial'; +import { MathUtils } from 'three/src/math/MathUtils'; +import { Mesh } from 'three/src/objects/Mesh'; export class MarkerLayer extends Layer { + constructor(latlng, options) { + super(); + util.setOptions(this, options); + this._latlng = latlng; + + } + createEditor(map) { map = map || this._map; var Klass = this.options.editorClass || this.getEditorClass(map); @@ -29,16 +40,11 @@ export class MarkerLayer extends Layer { clickable: true, }; - constructor(latlng, options) { - super(); - util.setOptions(this, options); - this._latlng = latlng; - } onAdd(map) { //this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation; - + this.map = map; this._initIcon(); this.update(); this.emit('add'); @@ -71,13 +77,13 @@ export class MarkerLayer extends Layer { _initIcon() { //create default icon - var opt = { r: 0.25, c: 0xffff00, o: 0.8 }; - var icon = new THREE.Mesh(new THREE.CylinderGeometry(0, 0.5, 2), - new THREE.MeshLambertMaterial({ color: 0x38eeff, opacity: opt.o, transparent: (opt.o < 1) })); - icon.rotation.x = THREE.Math.degToRad(-90); + let options = { r: 0.25, c: 0xffff00, o: 0.8 }; + let icon = new Mesh(new CylinderGeometry(0, 500, 1500), + new MeshLambertMaterial({ color: 0x38eeff, opacity: options.o, transparent: (options.o < 1) })); + icon.rotation.x = MathUtils.degToRad(-90); icon.visible = true; //app.scene.add(app.boreholeMarker); - var addIcon = false; + let addIcon = false; // if we're not reusing the icon, remove the old one and init new one if (icon !== this._icon) { @@ -98,10 +104,15 @@ export class MarkerLayer extends Layer { //this._initInteraction(); if (addIcon === true) { - this.getPane().add(this._icon); + this.getScene().add(this._icon); } } + scaleZ(z) { + // this._icon.scale.z = z; + return; + } + _removeIcon() { //if (this.options.riseOnHover) { // this.off({ @@ -111,7 +122,7 @@ export class MarkerLayer extends Layer { //} //L.DomUtil.remove(this._icon); - this.getPane().remove(this._icon); + this.getScene().remove(this._icon); //this.removeInteractiveTarget(this._icon); this._icon = null; diff --git a/src/js/layer/TinLayer.js b/src/js/layer/TinLayer.js index 12ce2ab..6df08f2 100644 --- a/src/js/layer/TinLayer.js +++ b/src/js/layer/TinLayer.js @@ -8,7 +8,7 @@ import { Plane } from 'three/src/math/Plane'; import { Vector3 } from 'three/src/math/Vector3'; import { Color } from 'three/src/math/Color'; import { MyMeshStandardMaterial } from '../clip/MyMeshStandardMaterial'; -import { Object3D } from 'three/src/core/Object3D'; +import { Group } from 'three/src/objects/Group'; const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/'; @@ -16,6 +16,11 @@ const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/'; class TinLayer extends Layer { + queryableObjects; + borderVisible; + scale; + objectGroup; + constructor(params) { super(); @@ -31,6 +36,7 @@ class TinLayer extends Layer { this.queryableObjects = []; this.borderVisible = false; this.scale = 1; + this.objectGroup = new Group(); } setWireframeMode(wireframe) { @@ -43,22 +49,30 @@ class TinLayer extends Layer { setVisible(visible) { this.visible = visible; - this.mainMesh.visible = visible; + this.objectGroup.visible = visible; this.emit('visibility-change'); } + addObject (object, queryable) { + if (queryable === undefined) { + queryable = this.q; + } + this.objectGroup.add(object); + if (queryable) { + this._addQueryableObject(object); + } + } + + _addQueryableObject (object) { + this.queryableObjects.push(object); + //for (var i = 0, l = object.children.length; i < l; i++) { + // this._addQueryableObject(object.children[i]); + //} + } + scaleZ(z) { this.scale = z; - this.mainMesh.scale.z = z; - // let highObject = new Object3D(); - // highObject.position.copy(this.uniforms.clipping.clippingHigh.value); - // let lowObject = new Object3D(); - // lowObject.position.copy(this.uniforms.clipping.clippingLow.value); - // highObject.scale.z =z; - // lowObject.scale.z = z; - // this.uniforms.clipping.clippingHigh.value.z = highObject.position.z; - // this.uniforms.clipping.clippingLow.value.z = lowObject.position.z; - // this.uniforms.clipping.scale.value = z; + this.objectGroup.scale.z = z; } async onAdd(map) { @@ -125,9 +139,10 @@ class TinLayer extends Layer { }, uniforms.clipping); this.materialsArray.push(this.material); let mesh = this.mainMesh = new Mesh(geometry, this.material); - // mesh.userData.layerId = this.index; + mesh.userData.layerId = this.index; + this.addObject(mesh, true); if (app_scene) { - app_scene.add(mesh); + app_scene.add(this.objectGroup); } } diff --git a/src/js/tasks/BoreholeIdentify.js b/src/js/tasks/BoreholeIdentify.js index d77470b..11a0f27 100644 --- a/src/js/tasks/BoreholeIdentify.js +++ b/src/js/tasks/BoreholeIdentify.js @@ -20,10 +20,25 @@ export class BoreholeIdentify { this.layers = defaults.layers; } + _getOffset(element) { + if (!element.getClientRects().length) { + return { top: 0, left: 0 }; + } + + let rect = element.getBoundingClientRect(); + let win = element.ownerDocument.defaultView; + return ( + { + top: rect.top + win.pageYOffset, + left: rect.left + win.pageXOffset + }); + } + execute(params) { - let canvasOffset = $(this.domElement).offset(); + // let canvasOffset = $(this.domElement).offset(); + let canvasOffset = this._getOffset(this.domElement); let xClickedOnCanvas = params.clientX - canvasOffset.left; - let yClickedonCanvas = params.clientY - canvasOffset.top; + let yClickedonCanvas = params.clientY - canvasOffset.top; //this.camera = params.camera; let eventsResponse = this._intersectObjects(xClickedOnCanvas, yClickedonCanvas, params.width, params.height); @@ -47,7 +62,7 @@ export class BoreholeIdentify { // calculate mouse position in normalized device coordinates let mouseXForRay = (offsetX / width) * 2 - 1; let mouseYForRay = -(offsetY / height) * 2 + 1; - let z = 0.5; + let z = 0; let vector = new Vector3(mouseXForRay, mouseYForRay, z); vector.unproject(this.camera); @@ -60,17 +75,17 @@ export class BoreholeIdentify { //raycaster.set(vector, direction); //raycaster.setFromCamera(mouse, this.camera); - let a = this._getQueryableObjects();//nur die sichtbar sind - let b = this._getQueryableObjects2();//alle + let visibleMehses = this._getQueryableObjects();//nur die sichtbar sind + let allMeshes = this._getQueryableObjects2();//alle let intersects = []; - let intersects1 = raycaster.intersectObjects(a, true); + let intersects1 = raycaster.intersectObjects(visibleMehses, true); if (intersects1.length > 0) { this.start = intersects1[0].point.clone(); let startPosition = intersects1[0].point; - startPosition.z = 60;// += 0.5; + startPosition.z += 0.5; let direction = new Vector3(0, 0, -1); let raycaster = new Raycaster(startPosition, direction); - intersects = raycaster.intersectObjects(b, false); + intersects = raycaster.intersectObjects(allMeshes, false); } let resultObjects = []; @@ -85,7 +100,7 @@ export class BoreholeIdentify { let layer = obj.object; let layerId = layer.userData.layerId; let objectGroup = layer.parent; - let featureId = obj.index;// obj.faceIndex; + let featureId = obj.faceIndex;// obj.faceIndex; let scaleFactor = parseFloat(objectGroup.scale.z); if (scaleFactor > 1) { @@ -154,7 +169,8 @@ export class BoreholeIdentify { _getQueryableObjects() { let _queryableObjects = []; - this.layers.forEach(function (layer) { + // this.layers.forEach(function (layer) { + Object.values(this.layers).forEach(layer => { if (layer.visible && layer.queryableObjects.length) { _queryableObjects = _queryableObjects.concat(layer.queryableObjects); } @@ -164,7 +180,8 @@ export class BoreholeIdentify { _getQueryableObjects2() { let _queryableObjects = []; - this.layers.forEach(function (layer) { + // this.layers.forEach(function (layer) { + Object.values(this.layers).forEach(layer => { //if (layer.visible && layer.queryableObjects.length) { if (layer.queryableObjects.length) { _queryableObjects = _queryableObjects.concat(layer.queryableObjects); diff --git a/src/js/tools/BoreholeTool.js b/src/js/tools/BoreholeTool.js index ab73a57..6611457 100644 --- a/src/js/tools/BoreholeTool.js +++ b/src/js/tools/BoreholeTool.js @@ -4,6 +4,10 @@ import * as domEvent from '../core/domEvent'; import { MarkerLayer } from '../layer/MarkerLayer'; import * as dom from '../core/domUtil'; import * as util from '../core/utilities'; +import { BoreholeIdentify } from '../tasks/BoreholeIdentify'; +import { TinLayer } from '../layer/TinLayer'; +import { DemLayer } from '../layer/DemLayer'; +import { LayerGroup } from '../layer/LayerGroup'; export class BoreholeTool extends EventEmitter { @@ -31,6 +35,21 @@ export class BoreholeTool extends EventEmitter { let highlightMaterial = new MeshLambertMaterial({ emissive: 0x999900, transparent: true, opacity: 0.5 }); this.defaultMapCursor = this.map.domElement.style.cursor; + this.featuresLayer = this._createFeaturesLayer(); + + let dataLayer = []; + Object.values(this.map.layers).forEach(layer => { + //if (layer.visible && layer.queryableObjects.length) { + if (layer instanceof DemLayer || layer instanceof TinLayer) { + dataLayer.push(layer); + } + }); + this.drillTask = new BoreholeIdentify({ + camera: this.map.object, + domElement: this.map.domElement, //layer: layer, + highlightMaterial: highlightMaterial, + layers: dataLayer + }); } // _createFeaturesLayer () { @@ -60,7 +79,7 @@ export class BoreholeTool extends EventEmitter { disable() { //if (this.map.mapTool) this.map.mapTool.off('editable:drawing:start', this.disable.bind(this)); dom.removeClass(this.map.container, 'measure-enabled'); - // this.featuresLayer.clearLayers(); + this.featuresLayer.clearLayers(); //this.fireAndForward('hidemeasure'); if (this._drawingEditor) { this._drawingEditor.cancelDrawing(); @@ -74,6 +93,14 @@ export class BoreholeTool extends EventEmitter { this.map.emit(type, e); } + connectCreatedToMap(layer) { + return this.featuresLayer.addLayer(layer); + } + + _createFeaturesLayer() { + return new LayerGroup().addTo(this.map); + } + _startMarker(latlng, options) { latlng = latlng || this.map.getCenter().clone(); let markerLayer = this._createMarker(latlng, options);//.addTo(this.map); @@ -165,8 +192,8 @@ export class BoreholeTool extends EventEmitter { //var xClickedOnCanvas = e.clientX - canvasOffset.left; //var yClickedonCanvas = e.clientY - canvasOffset.top; //var event = { x: xClickedOnCanvas, y: yClickedonCanvas }; - this.mapTool._mouseDown = e; - this.mapTool._drawingEditor.onDrawingMouseDown(e); + this.mapTool._mouseDown = e[0]; + this.mapTool._drawingEditor.onDrawingMouseDown(e[0]); } _onMouseup(e) {