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

- bug: correct borehole profiles

Browse source 
- npm updates
- beginning with typescript: BoreholePopup.ts
This commit is contained in:
Arno Kaimbacher 2021-04-20 16:17:45 +02:00
parent 4f34cc6ab2
commit e007bcf9fa
9 changed files with 233 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/js/controls/BoreholeControl.js
View file

@ -1,6 +1,5 @@
import { Control } from "./Control";
import * as dom from '../core/domUtil';
import * as util from '../core/utilities';
import * as domEvent from '../core/domEvent';
import { BoreholeTool } from '../tools/BoreholeTool';
@ -11,7 +10,8 @@ export class BoreholeControl extends Control {
options = {
position: 'topright',
};
onAdd (map) {
onAdd(map) {
this.map = map;
// var b = this._nls = util.mixin({}, N.widgets.boreholetool);
@ -24,8 +24,8 @@ export class BoreholeControl extends Control {
//this.addUnit(inputDiv, 'mi', 'mi', 'miles');
////this.addUnit(inputDiv, 'nm', 'NM', 'nautical miles');
let toggle = dom.createDom('a', { "class": "gba-maptool-toggle", href: "#", title: "b.title" }, this._container);
domEvent.disableClickPropagation(this._container);
domEvent.disableClickPropagation(this._container);
domEvent
// .on(toggle, 'click', domEvent.stop)
// .on(toggle, 'click', domEvent.preventDefault)

54
src/js/controls/BoreholePopup.css
View file

@ -1,10 +1,11 @@
.gba-borehole-popup {
cursor: pointer;
color: green;
}
/* .gba-borehole-popup .maximize.hidden {
display: none;
}
}*/
.gba-borehole-popup .maximize {
color: rgb(220, 220, 220);
@ -18,28 +19,17 @@
text-align: center;
float: left;
cursor: pointer;
} */
}
/*side-menu zumachen*/
.gba-borehole-menu .close {
color: rgb(220, 220, 220);
background: gray;
border: 1px solid #000000;
border-radius: 4px;
font-size: 16px;
font-weight: bold;
.gba-borehole-menu .gba-close-link {
width: 20px;
height: 20px;
text-align: center;
float: right;
cursor: pointer;
}
/* .gba-close-icon {
background-repeat: no-repeat;
background-position: -52px -9px;
display: inline;
padding: 0 10px;
} */
.toolbox {
list-style-image: none;
list-style-position: inside;
@ -55,19 +45,19 @@
.gba-borehole-menu .body {
clear: both;
height: calc(100% - 46px);
border: 1px solid #777;
/* padding: 5px; */
}
.gba-borehole-menu .body .header {
text-align: center;
border-bottom: 1px solid #000000;
}
.gba-borehole-menu {
/* position: absolute;
top: 0;
left: 0;
padding: 0 20px 2px 20px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd; */
.gba-borehole-menu {
overflow-y: auto;
z-index: 1000;
background-color: #fff;
opacity: 0.93;
opacity: 0.93;
}
.gba-borehole-menu::-webkit-scrollbar {
@ -81,6 +71,14 @@
background: #777;
}
/* .chartCanvas {
border-top: 1px solid #000000;
} */
.chartContainer {
border-top: 1px solid #000000;
}
.chartTable {
margin-left: 20px;
border-width: 0;
@ -97,8 +95,14 @@
.chartTable td {
vertical-align: central;
text-align: center;
padding: 0;
overflow: visible;
padding: 0;
}
.layerNameColumn {
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
max-width: 85%;
}
.chartTable td img {

87
src/js/controls/BoreholePopup.ts
View file

@ -7,7 +7,7 @@ import { BarChart } from '../core/BarChart';
import './BoreholePopup.css';
interface BoreholePopupOptions {
position?: string
position: string
width?: string
height?: string
parentDiv?: string
@ -19,31 +19,25 @@ export class BoreholePopup extends Control {
options: BoreholePopupOptions = {
position: 'topleft',
width: '300px',
height: '100%',
height: '100%',
parentDiv: null
};
// private class fields:
//#region private class fields:
private _innerHTML;
private _clearButton;
private _body;
private _contentPane;
private _contenLable;
_container;
private _mainMap;
private _scene;
private _hasContent;
private _contentLabel;
private _menu;
private _isShowing;
barChart;
private _barChart;
//#endregion
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
@ -53,7 +47,6 @@ export class BoreholePopup extends Control {
//logger.warning('HomeButton::map required', true);
return;
}
this._mainMap = map;
let container;
// var b = this._nls = util.mixin({}, N.widgets.boreholepopup);
// let container = this._container = dom.createDom("div", { "class": "gba-borehole-popup" });
@ -66,30 +59,38 @@ export class BoreholePopup extends Control {
container = this._container = dom.createDom("div", { "class": "gba-borehole-popup" }, dom.byId("webgl"));
}
//button:
// this._maxButton = dom.createDom('div', {
// "class": "maximize", innerHTML: ">", title: "b.NLS_maximize"
// }, this._container);
let className = "gba-borehole-menu";
this._menu = dom.createDom('div', { "class": className }, container); //dom.byId("webgl"));
this._menu.style.width = this.options.width;
// 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;
this._body = dom.createDom('div', { "class": "body" }, this._menu);
this._contenLable = dom.createDom('lable', { innerHTML: "Virtual borehole profile <br /> (Heights in m)" },
//button:
this._clearButton = dom.createDom('div', {
"class": "gba-close-link", innerHTML: "<i class='fas fa-window-close'></i>", title: "b.NLS_maximize"
}, this._body);
// dom.createDom('span', { title: "b.NLS_close", innerHTML: "Close" }, this._clearButton);
this._contentLabel = dom.createDom('div', { class: "header", innerHTML: "<label>VIRTUAL PROFILE <br /> (sealevel [m])</label>" },
this._body);
/* place holder for borehole profile after Identify */
this._contentPane = dom.createDom('div', { "class": "gba-menu-contents" }, this._body);
this._contentPane.innerHTML = this._innerHTML;
this._contentPane.style.clear = 'both';
// close button
let toolboxList = dom.createDom('ul', { "class": "toolbox" }, this._menu);
this._clearButton = dom.createDom('button', { "class": "gba-close-link button is-dark" }, toolboxList);
// dom.createDom('i', { "class": "gba-close-icon" }, this._clearButton);
dom.createDom('span', { title: "b.NLS_close", innerHTML: "Close" }, this._clearButton);
// let toolboxList = dom.createDom('ul', { "class": "toolbox" }, this._menu);
// this._clearButton = dom.createDom('button', { "class": "gba-close-link button is-dark" }, toolboxList);
// dom.createDom('span', { title: "b.NLS_close", innerHTML: "Close" }, this._clearButton);
// events:
// don't let double clicks and mousedown get to the map
@ -123,7 +124,7 @@ export class BoreholePopup extends Control {
//}
}
_setContent(innerHTML) {
setContent(innerHTML) {
if (innerHTML instanceof HTMLElement) {
this._contentPane.innerHTML = "";
this._contentPane.appendChild(innerHTML);
@ -132,39 +133,33 @@ export class BoreholePopup extends Control {
this._contentPane.innerHTML = innerHTML;
}
this._contentPane.style.display = "block";
//this._contentPane.innerHTML = innerHTML;
//this._contentPane.style.display = "block";
}
setChartContent(data) {
this._contentPane.innerHTML = "";
let valTextColor = "ffffff";
this.barChart = new BarChart("d17100",
this._barChart = new BarChart("d17100",
320, valTextColor, 'full',
300);
this.barChart.draw(data);
this._contentPane.appendChild(this.barChart._container);
this._barChart.draw(data);
this._contentPane.appendChild(this._barChart._container);
let table = this.barChart.getStatTable(data);
let table = this._barChart.getStatTable(data);
this._contentPane.appendChild(table);
this._hasContent = true;
}
_close(e) {
private _close(e) {
this._clearContent();
this._toggleVisibility(false);
this.emit("closed");
}
_clearContent() {
// $(this._contentPane).html('');
private _clearContent() {
this._contentPane.innerHTML = '';
this._hasContent = false;
}
_toggleVisibility(visible) {
private _toggleVisibility(visible) {
this._setVisibility(visible);
this._isShowing = visible;
@ -184,20 +179,8 @@ export class BoreholePopup extends Control {
}
}
_setVisibility(addOrRemove) {
// $(this._menu).css("visibility", addOrRemove ? "visible" : "hidden");
private _setVisibility(addOrRemove) {
this._menu.style.visibility = addOrRemove ? "visible" : "hidden";
// 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.style.visibility = maxButtonVisible ? "visible" : "hidden";
}
onRemove() {
@ -209,11 +192,9 @@ export class BoreholePopup extends Control {
// f.remove();
//}
domEvent.off(this._clearButton, 'click', this._close);
// 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._menu = this._body = this._contenLable = this._contentPane = this._clearButton = null;
this._innerHTML = this._menu = this._body = this._contentLabel = this._contentPane = this._clearButton = null;
}
}

26
src/js/controls/Control.js → src/js/controls/Control.ts
View file

@ -1,26 +1,21 @@
// import { Class } from '../core/Class';
import * as util from '../core/utilities';
// import * as dom from '../core/domUtil';
import { EventEmitter } from '../core/EventEmitter';
// export var Control = Class.extend({
class Control extends EventEmitter {
abstract class Control extends EventEmitter {
// @section
// @aka Control options
options = {
// position: 'topright',
abstract options = {
position: 'topright',
};
_map;
_container;
protected _map;
protected _container;
constructor(defaults) {
constructor(defaults?) {
super();
if (!(this instanceof Control)) {
throw new TypeError("Control constructor cannot be called as a function.");
}
// this.options = defaults;
}
// properties
util.setOptions(this, defaults);
}
@ -32,10 +27,10 @@ class Control extends EventEmitter {
getContainer() {
return this._container;
}
// abstract onRemove(map) : void;
// abstract onAdd(map) : HTMLElement;
abstract onRemove(map): void;
abstract onAdd(map) : HTMLElement;
addTo(map) {
this._map = map;
@ -57,7 +52,6 @@ class Control extends EventEmitter {
return this;
}
removeFrom(map) {
var pos = this.getPosition(),

25
src/js/core/BarChart.js
View file

@ -127,7 +127,7 @@ export class BarChart {
let minValue = Math.min.apply(Math, arr.map(o => o.min));
this.minValue = Math.round(minValue);
// let smallestValue = Math.min.apply(Math, arr.map(o => o.dist));
let totalHeight = this.totalHeight = this.maxValue - this.minValue; //6000;
let totalHeight = this.totalHeight = this.maxValue - this.minValue; //6000;
//// Draw grey bar background
//ctx.fillStyle = "lightgray";
@ -184,7 +184,7 @@ export class BarChart {
// Use try / catch to stop IE 8 from going to error town
try {
if (arr[i].name !== "Basement") {
ctx.fillText("thickness " + arr[i].name + ": " + Math.round(arr[i].dist),//.toFixed(2),
ctx.fillText(arr[i].name + ": " + Math.round(arr[i].dist) + " m", //.toFixed(2),
//i * this.width / numOfBars + (this.width / numOfBars) / 2,
x + 30,
y + (barHeight / 2) + 4.5);
@ -207,7 +207,7 @@ export class BarChart {
ctx.lineTo(20, this.startPointY - maxBarHeight);
let startPoint = this.startPointY;
let stepSize = this.totalHeight/arr.length;
let stepSize = this.totalHeight / 10; // arr.length;
let item = this.minValue;
do {
let dist = (maxBarHeight / this.totalHeight) * stepSize;
@ -218,7 +218,7 @@ export class BarChart {
startPoint = startPoint - dist;
item += stepSize;
// console.log(item);
} while (item < this.maxValue + 1);
} while (item < this.maxValue + 1);
//ctx.lineTo(70, 100);
ctx.stroke();
@ -226,7 +226,8 @@ export class BarChart {
}
getStatTable(arr) {
let statTable = dom.createDom("table", { "class": "chartTable" });
let chartContainer = dom.createDom("div", { class: "chartContainer"});
let statTable = dom.createDom("table", { "class": "chartTable" }, chartContainer);
let _headerRow = dom.createDom("tr", { style: "width:100px;" }, statTable);
let _profileHeaderColumn = dom.createDom("th", {}, _headerRow);
let _lableHeaderColumn = dom.createDom("th", {}, _headerRow);
@ -262,9 +263,11 @@ export class BarChart {
}, _profileColumn);
let _lableColumn = dom.createDom("td", {}, _tr);
let lable = dom.createDom("div", {
innerHTML: arr[i].name,
style: "width:75px;"
let lable = arr[i].name.replace("_"," ");
dom.createDom("div", {
innerHTML: lable,
// style: "width:75px;",
class: "layerNameColumn"
}, _lableColumn);
let _minColumn = dom.createDom("td", {}, _tr);
@ -290,7 +293,7 @@ export class BarChart {
}, _maxColumn);
}
return statTable;
return chartContainer;
}
_zfill(num, len) {
@ -322,10 +325,6 @@ export class BarChart {
if (this.hasLabel) {
this.labelobj.visible = false;
}
//// Hides HTML Label if set - uses jquery for DOM manipulation
//if ( this.hasHTMLLabel ) {
// this.hasHTMLLabel.hide();
//}
}
}

66
src/js/core/BaseEditor.js
View file

@ -101,14 +101,14 @@ export class BaseEditor {
if (e._cancelled) return;
//if (!this.isConnected()) {
// this.connect(e);
//}
//}
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;
dxfIdentifyParams.clientX = eventX; //351
dxfIdentifyParams.clientY = eventY; //554;
dxfIdentifyParams.width = this.map.container.clientWidth; //712;
dxfIdentifyParams.height = this.map.container.clientHeight; //715;
let deferred = this.mapTool.drillTask.execute(dxfIdentifyParams);
deferred.then(this.handleQueryResults.bind(this));
@ -119,6 +119,39 @@ export class BaseEditor {
let results = arguments;
let features = results[0].features;
let aufschlag = results[0].aufschlag;
// features.sort(function (point1, point2) {
// // Sort by votes
// // If the first item has a hwigher number, move it up
// // If the first item has a lower number, move it down
// if (point1.distance > point2.distance) return -1;
// if (point1.distance < point2.distance) return 1;
// });
// features.sort(function (point1, point2) {
// // Sort by votes
// // If the first item has a higher number, move it up
// // If the first item has a lower number, move it down
// if (point1.layerId > point2.layerId) return 1;
// if (point1.layerId < point2.layerId) return -1;
// });
// let newFeatures = [];
let featuresCopy = Array.from(features);
for (let i = 0; i < features.length; i ++) {
let p1 = features[i];
let p2;
if (features[i+2] != null){
if (util.round(features[i+1].distance, 4) == util.round(features[i+2].distance, 4)){
if (features[i+2].layerId == p1.layerId) {
p2 = features[i+2];
util.swap(features, i + 1, i +2);
}
}
}
// newFeatures.push(p1, p2);
}
// set the borhole marker
if (!this.isConnected()) {
this.connect(aufschlag);
@ -129,7 +162,7 @@ export class BaseEditor {
// calculate heights vor bar chart
let data = [];
for (let j = features.length - 1; j >= 0; j--) {
for (let j = features.length - 2; j >= 0; j--) {
let feature = features[j];
let point = feature.point;
// // clicked coordinates: skalierung wieder wegrechnen:
@ -140,6 +173,10 @@ export class BaseEditor {
let layer = this.map._layers[layerId];
let nextPoint;
if (j !== features.length - 1) {
let previousFeature = features[j + 1];
// if (feature.distance == previousFeature.distance) {
// continue;
// }
let previousPoint = { x: features[j + 1].point.x, y: features[j + 1].point.y, z: features[j + 1].point.z };
// let previousPt = this.map.dataservice.toMapCoordinates(previousPoint.x, previousPoint.y, previousPoint.z);
@ -149,14 +186,14 @@ export class BaseEditor {
//var dist = parseInt((300 / 6000) * realHeight);
if (Math.round(realHeight) > 0) {
data.push({
dist: realHeight,//dist,
max: point.z,
min: previousPoint.z,
color: layer.color,
name: layer.name
});
//app.barChart.addBar(dist, layer.materialParameter[0].color, layer.name);
data.push({
dist: realHeight,//dist,
max: point.z,
min: previousPoint.z,
color: layer.color,
name: layer.name
});
//app.barChart.addBar(dist, layer.materialParameter[0].color, layer.name);
}
}
}
@ -166,6 +203,7 @@ export class BaseEditor {
}
connect(e) {
// On touch, the latlng has not been updated because there is
// no mousemove.

22
src/js/core/utilities.js
View file

@ -126,6 +126,28 @@ export async function getMetadata(serviceUrl) {
// return await response.json();
}
export function swap(arr, i1, i2) {
// keep in a provisional the value of the first index
let aux = arr[i1];
// insert the value of the second index in the place of the first index
arr[i1] = arr[i2];
// By doing this I lose the original value but I have it stored in aux by
// so I just need to match the second index to aux to complete
arr[i2] = aux;
return arr;
}
export function round(wert, dez) {
wert = parseFloat(wert);
if (!wert) return 0;
dez = parseInt(dez);
if (!dez) dez = 0;
var umrechnungsfaktor = Math.pow(10, dez);
return Math.round(wert * umrechnungsfaktor) / umrechnungsfaktor;
}
// @function create(proto: Object, properties?: Object): Object
// Compatibility polyfill for [Object.create](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
export var create = Object.create || (function () {

1
src/js/tools/BoreholeTool.js
View file

@ -1,6 +1,5 @@
import { EventEmitter } from '../core/EventEmitter';
import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
import * as domEvent from '../core/domEvent';
import { MarkerLayer } from '../layer/MarkerLayer';
import * as dom from '../core/domUtil';
import * as util from '../core/utilities';