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

- npm updates

Browse source 
- dynamic BarChart inside BoreholePopup.js
This commit is contained in:
Arno Kaimbacher 2021-04-14 17:58:54 +02:00
parent a1aa0cda97
commit c9bdf02ead
6 changed files with 93 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/js/controls/BoreholePopup.js
View file

@ -58,7 +58,7 @@ export class BoreholePopup extends Control {
//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._contenLable = dom.createDom('lable', { innerHTML: "Virtual borehole profile <br /> (Heights in m)" },
this._body);
/* hier kommt nach dem Identify das Bohrprofil hinein */
@ -117,14 +117,14 @@ export class BoreholePopup extends Control {
setChartContent(data) {
this._contentPane.innerHTML = "";
var valTextColor = "ffffff";
let valTextColor = "ffffff";
this.barChart = new BarChart("d17100",
320, valTextColor, 'full',
400);
300);
this.barChart.draw(data);
this._contentPane.appendChild(this.barChart._container);
var table = this.barChart.getStatTable(data);
let table = this.barChart.getStatTable(data);
this._contentPane.appendChild(table);
this._hasContent = true;
}
@ -163,7 +163,7 @@ export class BoreholePopup extends Control {
maxButtonVisible = this._hasContent;
}
// $(this._maxButton).css("visibility", maxButtonVisible ? "visible" : "hidden");
this._maxButton.style.visibility = addOrRemove ? "visible" : "hidden";
this._maxButton.style.visibility = maxButtonVisible ? "visible" : "hidden";
}
onRemove() {

2
src/js/controls/NorthArrow.css
View file

@ -5,7 +5,7 @@
border: none;
width: 100px;
height: 100px;
z-index: 9999999;
z-index: 999;
margin-bottom: 0;
}

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

@ -97,8 +97,8 @@ export class BarChart {
// Update the dimensions of the canvas only if they have changed
if (ctx.canvas.width !== this.width || ctx.canvas.height !== this.height) {
ctx.canvas.width = this.width;
ctx.canvas.height = this.height;
ctx.canvas.width = this.width; //300
ctx.canvas.height = this.height; //400
}
//// Draw the background color white
//ctx.fillStyle = this.backgroundColor;
@ -115,11 +115,19 @@ export class BarChart {
// Determine the largest value in the bar array
// let largestValue = 0;
for (i = 0; i < arr.length; i += 1) {
if (arr[i].dist > largestValue) {
largestValue = arr[i].dist;
}
}
// for (i = 0; i < arr.length; i += 1) {
// if (arr[i].dist > largestValue) {
// largestValue = arr[i].dist;
// }
// }
largestValue = Math.max.apply(Math, arr.map(o => o.dist));
let maxValue = Math.max.apply(Math, arr.map(o => o.max));
this.maxValue = Math.round(maxValue);
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;
//// Draw grey bar background
//ctx.fillStyle = "lightgray";
@ -146,9 +154,11 @@ export class BarChart {
//} else {
// ratio = arr[i].dist / largestValue;
//}
ratio = arr[i].dist / totalHeight;
//barHeight = arr[i].dist;// ratio * maxBarHeight;
barHeight = parseInt((maxBarHeight / 6000) * arr[i].dist);
// //barHeight = arr[i].dist;// ratio * maxBarHeight;
// barHeight = parseInt((maxBarHeight / 6000) * arr[i].dist);
barHeight = parseInt(ratio * maxBarHeight);
let x = this.margin;// this.margin + i * this.width / numOfBars
let y = graphAreaHeight - barHeight;
if (i == 0) {
@ -174,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("Mächtigkeit " + arr[i].name + ": " + Math.round(arr[i].dist),//.toFixed(2),
ctx.fillText("thickness " + arr[i].name + ": " + Math.round(arr[i].dist),//.toFixed(2),
//i * this.width / numOfBars + (this.width / numOfBars) / 2,
x + 30,
y + (barHeight / 2) + 4.5);
@ -189,24 +199,27 @@ export class BarChart {
}
graphAreaHeight = graphAreaHeight - (barHeight - (border / 2));
}//for-loop
}//end for-loop
if (this.startPointY) {
ctx.beginPath();
ctx.moveTo(20, this.startPointY);
ctx.lineTo(20, this.startPointY - maxBarHeight);
var startPoint = this.startPointY;
var iwas = [-5500, -5000, -4500, -4000, -3500, -3000, -2500, -2000, -1500, -1000, -500, 0, 500];
iwas.forEach(function (item) {
var dist = (maxBarHeight / 6000) * 500;
let startPoint = this.startPointY;
let stepSize = this.totalHeight/arr.length;
let item = this.minValue;
do {
let dist = (maxBarHeight / this.totalHeight) * stepSize;
ctx.moveTo(20, startPoint);
ctx.lineTo(40, startPoint);
ctx.font = "10px Arial";
ctx.strokeText(item, 55, startPoint + 2.5);
ctx.strokeText(Math.round(item), 55, startPoint + 2.5);
startPoint = startPoint - dist;
item += stepSize;
// console.log(item);
} while (item < this.maxValue + 1);
});
//ctx.lineTo(70, 100);
ctx.stroke();
}
@ -219,12 +232,12 @@ export class BarChart {
let _lableHeaderColumn = dom.createDom("th", {}, _headerRow);
let _minHeaderColumn = dom.createDom("th", {}, _headerRow);
dom.createDom("div", {
innerHTML: "UNTERKANTE <br /> (m Seehöhe)",
innerHTML: "bottom <br /> (m)",
style: "width:75px;"
}, _minHeaderColumn);
let _maxHeaderColumn = dom.createDom("th", {}, _headerRow);
dom.createDom("div", {
innerHTML: "OBERKANTE <br /> (m Seehöhe)",
innerHTML: "top <br /> (m)",
style: "width:75px;"
}, _maxHeaderColumn);

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

@ -116,7 +116,7 @@ export class BaseEditor {
}
handleQueryResults() {
let results = arguments;
let results = arguments;
let features = results[0].features;
let aufschlag = results[0].aufschlag;
// set the borhole marker
@ -148,14 +148,16 @@ export class BaseEditor {
let realHeight = point.z - previousPoint.z;
//var dist = parseInt((300 / 6000) * realHeight);
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);
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);
}
}
}

8
src/js/tasks/BoreholeIdentify.js
View file

@ -75,7 +75,7 @@ export class BoreholeIdentify {
//raycaster.set(vector, direction);
//raycaster.setFromCamera(mouse, this.camera);
let visibleMehses = this._getQueryableObjects();//nur die sichtbar sind
let visibleMehses = this._getvisibleQueryableObjects();//nur die sichtbar sind
let allMeshes = this._getQueryableObjects2();//alle
let intersects = [];
let intersects1 = raycaster.intersectObjects(visibleMehses, true);
@ -167,11 +167,11 @@ export class BoreholeIdentify {
return clone;
}
_getQueryableObjects() {
_getvisibleQueryableObjects() {
let _queryableObjects = [];
// this.layers.forEach(function (layer) {
Object.values(this.layers).forEach(layer => {
if (layer.visible && layer.queryableObjects.length && layer.name !== "DEM_EGDI") {
if (layer.visible && layer.queryableObjects.length && layer.name !== "Topography") {
_queryableObjects = _queryableObjects.concat(layer.queryableObjects);
}
});
@ -183,7 +183,7 @@ export class BoreholeIdentify {
// this.layers.forEach(function (layer) {
Object.values(this.layers).forEach(layer => {
//if (layer.visible && layer.queryableObjects.length) {
if (layer.queryableObjects.length && layer.name !== "DEM_EGDI") {
if (layer.queryableObjects.length && layer.name !== "Topography") {
_queryableObjects = _queryableObjects.concat(layer.queryableObjects);
}
});