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

14
package-lock.json generated
View File

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

2
package.json
View File

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

13
src/css/page_bulma.scss
View File

@ -206,7 +206,7 @@ ul {
margin-left: 0px; margin-left: 0px;
} }
.gba-control-home span { .gba-control-home a {
width: 30px; width: 30px;
height: 30px; height: 30px;
-webkit-user-select: none; -webkit-user-select: none;
@ -214,16 +214,15 @@ ul {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 4px;
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=") display: block;
/*img/home.png*/; background-color: #999999;
background-position: 50% 50%; text-align: center;
background-repeat: no-repeat; color: #ffffff;
display: block; display: block;
} }
.red-label { .red-label {
color: #f00; color: #f00;
padding: 2px; padding: 2px;

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

@ -81,7 +81,7 @@ export class PickingTool {
} }
mouseMove(event) { 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; return;
} }
let point = this._getCanvasPoint(event); let point = this._getCanvasPoint(event);
@ -92,7 +92,7 @@ export class PickingTool {
this.mouse.set(x, y); this.mouse.set(x, y);
this.ray.setFromCamera(this.mouse, this.simulation.map.camera); 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) { if (intersects.length > 0) {
let candidate = intersects[0].object; let candidate = intersects[0].object;
@ -120,10 +120,10 @@ export class PickingTool {
} }
beginDrag(event) { beginDrag(event) {
if (this.simulation.selection.visible == false && this.enabled == false) { if (this.simulation.selectionBox.visible == false || this.enabled == false) {
return; 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) { if (this.touchCapable == false && event.which != 1) {
return; return;
} }
@ -136,7 +136,7 @@ export class PickingTool {
this.mouse.set(x, y); this.mouse.set(x, y);
this.ray.setFromCamera(this.mouse, this.simulation.map.camera); 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) { if (intersects.length > 0) {
this.isDraging = true; this.isDraging = true;
@ -188,8 +188,8 @@ export class PickingTool {
} else if (axis === 'z1' || axis === 'z2') { } else if (axis === 'z1' || axis === 'z2') {
value = intersects[0].point.z; value = intersects[0].point.z;
} }
this.simulation.selection.setValue(axis, value); this.simulation.selectionBox.setValue(axis, value);
// this.simulation.selection.setValue('x1', 4452960); // this.simulation.selectionBox.setValue('x1', 4452960);
// this.simulation.throttledRender(); // this.simulation.throttledRender();
this.simulation.deferringThrottle(); 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.touchMeshes.visible = visible;
this.emit('visibility-change'); 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) { scaleZ(z) {
this.scale = z; this.scale = z;

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

@ -19,8 +19,13 @@ let frontStencilMaterial = new ShaderMaterial( {
// depthWrite: false, // depthWrite: false,
} ); } );
let BoxBackFace = new MeshBasicMaterial({ color: 0xEEDDCC, transparent: true }); // beige:
let BoxWireframe = new LineBasicMaterial({ color: 0x000000, linewidth: 2 }); // 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 // yellow select color
let BoxWireActive = new LineBasicMaterial({ color: 0xffff00, linewidth: 4, side: DoubleSide }); let BoxWireActive = new LineBasicMaterial({ color: 0xffff00, linewidth: 4, side: DoubleSide });

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

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

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

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

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

@ -2,28 +2,25 @@
border-radius: 4px; border-radius: 4px;
} }
.gba-control-zoom span { .gba-control-zoom a {
display: block; display: block;
height: 30px; height: 30px;
width: 31px; width: 31px;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
} border-radius: 4px;
/*.my-gba-control-zoom a:hover { background-color: #999999;
background-color: rgba(102,102,102,0.90); text-align: center;
}*/ color: #ffffff;
.gba-control-zoom-in { display: block;
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-out { .gba-control-zoom-in {
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*/; /* 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"); */
/*font: bold 18px 'Lucida Console', Monaco, monospace; margin-bottom: 2px;
text-indent: 1px;*/
} }

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

@ -30,13 +30,13 @@ class ZoomControl extends Control {
this._map = map; this._map = map;
// don't use options.zoomInText because of predefined png // don't use options.zoomInText because of predefined png
this._zoomInButton = this._createButton( this._zoomInButton = this._createButton(
"", this.options.zoomInTitle, "<i class='fas fa-search-plus'></i>", this.options.zoomInTitle,
// "", b.zoomInTitle, // "", b.zoomInTitle,
className + '-in', container, this._zoomIn, this); className + '-in', container, this._zoomIn, this);
// don't use options.zoomOutText because of predefined png // don't use options.zoomOutText because of predefined png
this._zoomOutButton = this._createButton( this._zoomOutButton = this._createButton(
"", this.options.zoomOutTitle, "<i class='fas fa-search-minus'></i>", this.options.zoomOutTitle,
// "", b.zoomOutTitle, // "", b.zoomOutTitle,
className + '-out', container, this._zoomOut, this); className + '-out', container, this._zoomOut, this);
@ -56,7 +56,7 @@ class ZoomControl extends Control {
} }
_createButton(html, title, className, container, fn, context) { _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; // let stop = domEvent.stopPropagation;
domEvent domEvent
@ -69,13 +69,9 @@ class ZoomControl extends Control {
} }
_updateDisabled () { _updateDisabled () {
let className = 'leaflet-disabled';
var className = 'leaflet-disabled';
dom.removeClass(this._zoomInButton, className); dom.removeClass(this._zoomInButton, className);
dom.removeClass(this._zoomOutButton, className); dom.removeClass(this._zoomOutButton, className);
//if (map._zoom === map.getMinZoom()) { //if (map._zoom === map.getMinZoom()) {
// L.DomUtil.addClass(this._zoomOutButton, className); // 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 = document.querySelector('#map-title');
this.mapTitle.innerHTML += map.title; this.mapTitle.innerHTML += map.title;
map.on('ready', () => { map.on('ready', () => {
this.selection.setUniforms(); this.selectionBox.setUniforms();
this.animate(); this.animate();
}, this); }, this);
this.selection = new Selection( this.selectionBox = new Selection(
// new Vector3(-7, -14, -14), // new Vector3(-7, -14, -14),
// new Vector3(14, 9, 3) // new Vector3(14, 9, 3)
{ name: 'Slicing Box' }, { name: 'Slicing Box' },
new Vector3(this.map.x.min, this.map.y.min, this.map.z.min), 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) 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); 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.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.displayMeshes);
// this.scene.add(this.selection.touchMeshes); // this.scene.add(this.selection.touchMeshes);
@ -40791,6 +40791,12 @@ class Application {
this.gridlayer.toggle(); this.gridlayer.toggle();
}, this); }, this);
//toggle SlicingBox
let chkSlicingBox = document.getElementById("chkSlicingBox");
domEvent.on(chkSlicingBox, 'click', function (e) {
this.selectionBox.toggle();
}, this);
} }
downloadMapImage() { downloadMapImage() {