- add BoreholePopup.s and BoreholePopup.cs
- add LayerGroup.js for adding marker layer - correct BoreholeIdentify.js
This commit is contained in:
Arno Kaimbacher
parent
a4e86f3939
commit
721a9cdaca
60
package-lock.json
generated
60
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
115
src/js/controls/BoreholePopup.css
Normal file
115
src/js/controls/BoreholePopup.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
184
src/js/controls/BoreholePopup.js
Normal file
184
src/js/controls/BoreholePopup.js
Normal file
|
|
@ -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 <br /> (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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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() {
|
||||
|
|
@ -102,17 +102,47 @@ export class BaseEditor {
|
|||
//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);
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,9 @@ export class DemLayer extends Layer {
|
|||
}
|
||||
];
|
||||
|
||||
queryableObjects;
|
||||
borderVisible;
|
||||
|
||||
constructor(params) {
|
||||
super();
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
99
src/js/layer/LayerGroup.js
Normal file
99
src/js/layer/LayerGroup.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,8 +20,23 @@ 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;
|
||||
//this.camera = params.camera;
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user