- alsos slicing DEM layer
- 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
parent
8df9ff69df
commit
f42bbf5574
35
index.html
35
index.html
|
|
@ -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
14
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
background-color: #bbb;
|
||||
background-color: #999999;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -68,14 +68,10 @@ class ZoomControl extends Control {
|
|||
return link;
|
||||
}
|
||||
|
||||
_updateDisabled () {
|
||||
|
||||
var className = 'leaflet-disabled';
|
||||
|
||||
dom.removeClass(this._zoomInButton, className);
|
||||
|
||||
dom.removeClass(this._zoomOutButton, className);
|
||||
|
||||
_updateDisabled () {
|
||||
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);
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user