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

- alsos slicing DEM layer

Browse Source 
- slicing box white background with opacity
- toggle slicing box in analysis tab
- all map buttons with font awesome icons
- three.js update to 0.127.0
This commit is contained in:
Arno Kaimbacher 2021-04-01 16:49:57 +02:00
parent 8df9ff69df
commit f42bbf5574
12 changed files with 104 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@ -149,6 +149,7 @@
<div class="tab-pane content-metadata active" id="one">
<div id="layer-control-parent-id"></div>
</div>
<div class="tab-pane content-file" id="two">
<h5 class="section-heading">Download Map Image</h5>
@ -162,15 +163,35 @@
</div>
</div>
<div class="panel-section section-functions">
<section class="panel-section section-functions section">
<h5>Functions</h5>
<label>
<input type="checkbox" id="chkGrid" autocomplete="off" checked>
<span class="label-body">set visibility of coordinate grid</span>
</label>
</div>
<div class="columns is-multiline">
<div class="column is-12">
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" id="chkGrid" autocomplete="off"
checked>
coordinate grid
</label>
</div>
</div>
</div>
<div class="column is-12">
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" id="chkSlicingBox"
autocomplete="off" checked>
slicing box
</label>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="tab-pane content-data" id="three">
<div class="panel-section">
...coming soon

14
package-lock.json generated
View File

@ -14,7 +14,7 @@
"lodash": "^4.17.21",
"normalize.css": "^8.0.1",
"proj4": "^2.6.3",
"three": "^0.126.0"
"three": "^0.127.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
@ -5938,9 +5938,9 @@
}
},
"node_modules/three": {
"version": "0.126.1",
"resolved": "https://registry.npmjs.org/three/-/three-0.126.1.tgz",
"integrity": "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ=="
"version": "0.127.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.127.0.tgz",
"integrity": "sha512-wtgrn+mhYUbobxT7QN3GPdu3SRpSBQvwY6uOzLChWS7QE//f7paDU/+wlzbg+ngeIvBBqjBHSRuywTh8A99Jng=="
},
"node_modules/to-fast-properties": {
"version": "2.0.0",
@ -11298,9 +11298,9 @@
}
},
"three": {
"version": "0.126.1",
"resolved": "https://registry.npmjs.org/three/-/three-0.126.1.tgz",
"integrity": "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ=="
"version": "0.127.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.127.0.tgz",
"integrity": "sha512-wtgrn+mhYUbobxT7QN3GPdu3SRpSBQvwY6uOzLChWS7QE//f7paDU/+wlzbg+ngeIvBBqjBHSRuywTh8A99Jng=="
},
"to-fast-properties": {
"version": "2.0.0",

2
package.json
View File

@ -9,7 +9,7 @@
"lodash": "^4.17.21",
"normalize.css": "^8.0.1",
"proj4": "^2.6.3",
"three": "^0.126.0"
"three": "^0.127.0"
},
"author": "Arno Kaimbacher",
"license": "MIT",

13
src/css/page_bulma.scss
View File

@ -206,7 +206,7 @@ ul {
margin-left: 0px;
}
.gba-control-home span {
.gba-control-home a {
width: 30px;
height: 30px;
-webkit-user-select: none;
@ -214,16 +214,15 @@ ul {
-ms-user-select: none;
user-select: none;
cursor: pointer;
border-radius: 5px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABDlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmXl5f///+VlZWZmZmWlpaUlJSYmJiSkpKampqzs7O3t7fMzMyTk5O2trarq6uysrLR0dHY2Njb29v8/PyMjIy4uLi5ubm6urq1tbSbm5uhoaGmpqanp6eoqKi7u7u+vr7BwcHFxcXGxsbHx8fIyMjJycmpqanNzc3Ozs7Pz8/Q0NCNjY3S0tLT09PV1dXW1tavr6/Z2dmxsbHc3Nzd3d3i4uLn5+fv7+/w8PD39/f5+fn7+/uPj4/9/f3+/v6QkJA5Pja9AAAAGnRSTlMABUdVVmxucX6MtLvHycrN2Nzi4+vs7e/3+OshyJcAAAECSURBVHherdLFcsQwEEXRDjLDJOkWGYcnzMzM/P8/Eo8V18i4yl091alSaSGAgclSdnMTPQB9vKBumCriYZg3j0qKGI9DyVRxVPVNHjVZyTN6u/VzGFmNiN4di3NmWWiw1itq9+Faoux5WxhjFNeka660grkkTUZxQ1Ff7glR2WTEO+rUfI0zqgbFM1moB0rm+BEL+5FS1XzUjOvPlFHdViELx3tKa8M7xr/LW7tpvr/A6Gn+HlHGy/+Xv8Ny+XCzUtmo5/LyD2Ofp7m8LYN9nuZ9gy/1djssd17CVlmwD/Susjbrj2yvhdnJPQbTPEjpeHKPwCAvqBe6hmYXs1uY6YdfRkdtRcSvwdgAAAAASUVORK5CYII=")
/*img/home.png*/;
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius: 4px;
display: block;
background-color: #999999;
text-align: center;
color: #ffffff;
display: block;
}
.red-label {
color: #f00;
padding: 2px;

14
src/js/clip/PickingTool.js
View File

@ -81,7 +81,7 @@ export class PickingTool {
}
mouseMove(event) {
if (this.isDraging == true || this.simulation.selection.visible == false || this.enabled == false) {
if (this.isDraging == true || this.simulation.selectionBox.visible == false || this.enabled == false) {
return;
}
let point = this._getCanvasPoint(event);
@ -92,7 +92,7 @@ export class PickingTool {
this.mouse.set(x, y);
this.ray.setFromCamera(this.mouse, this.simulation.map.camera);
let intersects = this.ray.intersectObjects(this.simulation.selection.selectables);
let intersects = this.ray.intersectObjects(this.simulation.selectionBox.selectables);
if (intersects.length > 0) {
let candidate = intersects[0].object;
@ -120,10 +120,10 @@ export class PickingTool {
}
beginDrag(event) {
if (this.simulation.selection.visible == false && this.enabled == false) {
if (this.simulation.selectionBox.visible == false || this.enabled == false) {
return;
}
// exit drag method, if not left mouse button was clicked
// exit drag method, if not left mouse button was clicked on desktop:
if (this.touchCapable == false && event.which != 1) {
return;
}
@ -136,7 +136,7 @@ export class PickingTool {
this.mouse.set(x, y);
this.ray.setFromCamera(this.mouse, this.simulation.map.camera);
let intersects = this.ray.intersectObjects(this.simulation.selection.selectables);
let intersects = this.ray.intersectObjects(this.simulation.selectionBox.selectables);
if (intersects.length > 0) {
this.isDraging = true;
@ -188,8 +188,8 @@ export class PickingTool {
} else if (axis === 'z1' || axis === 'z2') {
value = intersects[0].point.z;
}
this.simulation.selection.setValue(axis, value);
// this.simulation.selection.setValue('x1', 4452960);
this.simulation.selectionBox.setValue(axis, value);
// this.simulation.selectionBox.setValue('x1', 4452960);
// this.simulation.throttledRender();
this.simulation.deferringThrottle();
}

8
src/js/clip/Selection.js
View File

@ -109,6 +109,14 @@ export class Selection extends Layer {
this.touchMeshes.visible = visible;
this.emit('visibility-change');
}
toggle () {
let visible = !this.visible;
this.visible = visible;
this.boxMesh.visible = visible;
this.displayMeshes.visible = visible;
this.touchMeshes.visible = visible;
this._map.update();
}
scaleZ(z) {
this.scale = z;

9
src/js/clip/material.js
View File

@ -19,8 +19,13 @@ let frontStencilMaterial = new ShaderMaterial( {
// depthWrite: false,
} );
let BoxBackFace = new MeshBasicMaterial({ color: 0xEEDDCC, transparent: true });
let BoxWireframe = new LineBasicMaterial({ color: 0x000000, linewidth: 2 });
// beige:
// let BoxBackFace = new MeshBasicMaterial({ color: 0xEEDDCC, transparent: true });
let BoxBackFace = new MeshBasicMaterial({ color: 0xf8f8ff, transparent: true, opacity: 0.5 });
// black box grid:
// let BoxWireframe = new LineBasicMaterial({ color: 0x000000, linewidth: 2 });
let BoxWireframe = new LineBasicMaterial({ color: 0x6f6f6f, linewidth: 3 });
// yellow select color
let BoxWireActive = new LineBasicMaterial({ color: 0xffff00, linewidth: 4, side: DoubleSide });

2
src/js/controls/BasemapControl.css
View File

@ -10,7 +10,7 @@
cursor: pointer;
border-radius: 4px;
display: block;
background-color: #bbb;
background-color: #999999;
text-align: center;
color: #ffffff;

4
src/js/controls/HomeButton.js
View File

@ -39,7 +39,7 @@ class HomeButton extends Control {
//if (this.options.home) {
this._homeButton = this._createButton(
//this.options.zoomInText, this.options.zoomInTitle,
"", "b.title",
"<i class='fas fa-home'></i>", "b.title",
className + '-do', container, this._goHome, this);
this._init();
//}
@ -85,7 +85,7 @@ class HomeButton extends Control {
_createButton(html, title, className, container, fn, context) {
//var link = L.DomUtil.create('a', className, container);
let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container);
let link = dom.createDom("a", { "class": className, innerHTML: html, title: title }, container);
// let stop = domEvent.stopPropagation;
domEvent

41
src/js/controls/ZoomControl.css
View File

@ -2,28 +2,25 @@
border-radius: 4px;
}
.gba-control-zoom span {
display: block;
height: 30px;
width: 31px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
background-position: 50% 50%;
background-repeat: no-repeat;
}
/*.my-gba-control-zoom a:hover {
background-color: rgba(102,102,102,0.90);
}*/
.gba-control-zoom-in {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAxlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZn///+VlZWYmJiZmZmWlpaXl5fw8PDk5OT6+vrm5uarq6uampqkpKTn5+egoKD7+/vy8vLl5eX5+fng4OCenp6SkpKcnJz8/PydnZ3x8fGxsbGtra2mpqbh4eGioqL9/f3r6+ufn5+qqqqhoaGoqKjs7Oybm5uUlJSWaKJBAAAAGnRSTlPk+cftAOPvgvgGkut0WrvJytuzaf1Fbc/EUVDNfwkAAADBSURBVHhetdLFssMwDIZRNU3xIoMMYSzjZXr/l6q1izO1dv1Wmjk7zQ+j8VnneEM492GgmC6gx/El9Dm+gi7Hns1CCO3mbLfdptLFclkjFsLNIeLkBCxNwR/xv6RsztamZblBTNSaslj/hDX1jrja0PHxGTT5C+3i0uK0xZXFwT5KTEWFOJ3QNZvLBiupTUKFiNFCU6f4Gs/0FoZ/4/jVwdRbnn8rNwemNjN5/JCv4YbjW7hj9P4B/McnOF7v+cU/AEI2X3dttU52AAAAAElFTkSuQmCC') /*img/zoomIn.png*/;
margin-bottom: 2px;
.gba-control-zoom a {
display: block;
height: 30px;
width: 31px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius: 4px;
background-color: #999999;
text-align: center;
color: #ffffff;
display: block;
}
.gba-control-zoom-out {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAMAAADHso01AAAAhFBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiZmZmXl5efn5+6urr////+/v6srKybm5uUlJStra319fW5ubmgoKCVlZW2tra9vb35+fm4/JSJAAAAGnRSTlN7x4/tAMjuGSy2aIteC+AWupAw5c4edI5nD8z6iFwAAAB3SURBVHhe3dK3DoQwDIBhB8KFfr2Z3q+8//uxEJYQZ2DLv36yZMkGLkLQFCcc/DTTxo4QZEQRuBQzOFDsGaZtYOzWNhiLsVz6tqjwp69k/yJXuaklDwobp/PpJytbJDe34ST7PtXEJ4rPcLnq9SaA3x/Ods/Xm8/EaFl6wRVnDgAAAABJRU5ErkJggg==') /*img/zoomOut.png*/;
/*font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;*/
.gba-control-zoom-in {
/* background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAxlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZn///+VlZWYmJiZmZmWlpaXl5fw8PDk5OT6+vrm5uarq6uampqkpKTn5+egoKD7+/vy8vLl5eX5+fng4OCenp6SkpKcnJz8/PydnZ3x8fGxsbGtra2mpqbh4eGioqL9/f3r6+ufn5+qqqqhoaGoqKjs7Oybm5uUlJSWaKJBAAAAGnRSTlPk+cftAOPvgvgGkut0WrvJytuzaf1Fbc/EUVDNfwkAAADBSURBVHhetdLFssMwDIZRNU3xIoMMYSzjZXr/l6q1izO1dv1Wmjk7zQ+j8VnneEM492GgmC6gx/El9Dm+gi7Hns1CCO3mbLfdptLFclkjFsLNIeLkBCxNwR/xv6RsztamZblBTNSaslj/hDX1jrja0PHxGTT5C+3i0uK0xZXFwT5KTEWFOJ3QNZvLBiupTUKFiNFCU6f4Gs/0FoZ/4/jVwdRbnn8rNwemNjN5/JCv4YbjW7hj9P4B/McnOF7v+cU/AEI2X3dttU52AAAAAElFTkSuQmCC"); */
margin-bottom: 2px;
}

12
src/js/controls/ZoomControl.js
View File

@ -30,13 +30,13 @@ class ZoomControl extends Control {
this._map = map;
// don't use options.zoomInText because of predefined png
this._zoomInButton = this._createButton(
"", this.options.zoomInTitle,
"<i class='fas fa-search-plus'></i>", this.options.zoomInTitle,
// "", b.zoomInTitle,
className + '-in', container, this._zoomIn, this);
// don't use options.zoomOutText because of predefined png
this._zoomOutButton = this._createButton(
"", this.options.zoomOutTitle,
"<i class='fas fa-search-minus'></i>", this.options.zoomOutTitle,
// "", b.zoomOutTitle,
className + '-out', container, this._zoomOut, this);
@ -56,7 +56,7 @@ class ZoomControl extends Control {
}
_createButton(html, title, className, container, fn, context) {
let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container);
let link = dom.createDom("a", { "class": className, innerHTML: html, title: title }, container);
// let stop = domEvent.stopPropagation;
domEvent
@ -69,13 +69,9 @@ class ZoomControl extends Control {
}
_updateDisabled () {
var className = 'leaflet-disabled';
let className = 'leaflet-disabled';
dom.removeClass(this._zoomInButton, className);
dom.removeClass(this._zoomOutButton, className);
//if (map._zoom === map.getMinZoom()) {
// L.DomUtil.addClass(this._zoomOutButton, className);
//}

14
src/js/main.js
View File

@ -158,18 +158,18 @@ class Application {
this.mapTitle = document.querySelector('#map-title');
this.mapTitle.innerHTML += map.title;
map.on('ready', () => {
this.selection.setUniforms();
this.selectionBox.setUniforms();
this.animate();
}, this);
this.selection = new Selection(
this.selectionBox = new Selection(
// new Vector3(-7, -14, -14),
// new Vector3(14, 9, 3)
{ name: 'Slicing Box' },
new Vector3(this.map.x.min, this.map.y.min, this.map.z.min),
new Vector3(this.map.x.max, this.map.y.max, this.map.z.max)
);
this.map.addLayer(this.selection);
this.map.addLayer(this.selectionBox);
this.map.picking = new PickingTool(this.map.size, this.map.center, this);
@ -40602,7 +40602,7 @@ class Application {
// this.slicer = new SlicerControl({ parentDiv: 'slicer-control' }).addTo(this.map);
this.capsScene.add(this.selection.boxMesh);
this.capsScene.add(this.selectionBox.boxMesh);
// this.scene.add(this.selection.displayMeshes);
// this.scene.add(this.selection.touchMeshes);
@ -40791,6 +40791,12 @@ class Application {
this.gridlayer.toggle();
}, this);
//toggle SlicingBox
let chkSlicingBox = document.getElementById("chkSlicingBox");
domEvent.on(chkSlicingBox, 'click', function (e) {
this.selectionBox.toggle();
}, this);
}
downloadMapImage() {