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

- three update 0.125.1 & 0.125.2

Browse Source 
- show z value in GridLayer.js (coordinate grid)
- show map title in header
- BasemapControl inside map canvas
This commit is contained in:
Arno Kaimbacher 2021-01-29 16:42:25 +01:00
parent 1dbaf10261
commit f16a6cec49
10 changed files with 184 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -49,13 +49,15 @@
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>
</a> </a>
<div class="row"> <div class="row">
<div class="logo three columns"> <div class="logo two columns">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
<img src="images/egdi_logo.svg" height="51"> <img src="images/egdi_logo.svg" height="51">
</a> </a>
</div> </div>
<ul class="menu main-navigation nine columns"> <div id='map-title' class="four columns">
<li><a id="menu-map-icon" href="#map">Map</a></li> </div>
<ul class="menu main-navigation six columns">
<!-- <li><a id="menu-map-icon" href="#map">Map</a></li> -->
</ul> </ul>
</div> </div>
</nav> </nav>

62
package-lock.json generated
View File

@ -11,7 +11,7 @@
"dependencies": { "dependencies": {
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"proj4": "^2.6.3", "proj4": "^2.6.3",
"three": "^0.124.0" "three": "^0.125.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.9", "@babel/core": "^7.12.9",
@ -1740,9 +1740,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001179", "version": "1.0.30001181",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001179.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001181.tgz",
"integrity": "sha512-blMmO0QQujuUWZKyVrD1msR4WNDAqb/UPO1Sw2WWsQ7deoM5bJiicKnWJ1Y0NS/aGINSnKPIWBMw5luX+NDUCA==", "integrity": "sha512-m5ul/ARCX50JB8BSNM+oiPmQrR5UmngaQ3QThTTp5HcIIQGP/nPBs82BYLE+tigzm3VW+F4BJIhUyaVtEweelQ==",
"dev": true "dev": true
}, },
"node_modules/chalk": { "node_modules/chalk": {
@ -2090,9 +2090,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.3.645", "version": "1.3.648",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.645.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.648.tgz",
"integrity": "sha512-T7mYop3aDpRHIQaUYcmzmh6j9MAe560n6ukqjJMbVC6bVTau7dSpvB18bcsBPPtOSe10cKxhJFtlbEzLa0LL1g==", "integrity": "sha512-4POzwyQ80tkDiBwkxn7IpfzioimrjRSFX1sCQ3pLZsYJ5ERYmwzdq0hZZ3nFP7Z6GtmnSn3xwWDm8FPlMeOoEQ==",
"dev": true "dev": true
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
@ -2315,9 +2315,9 @@
"dev": true "dev": true
}, },
"node_modules/fastq": { "node_modules/fastq": {
"version": "1.10.0", "version": "1.10.1",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.0.tgz", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.1.tgz",
"integrity": "sha512-NL2Qc5L3iQEsyYzweq7qfgy5OtXCmGzGvhElGEd/SoFWEMOEczNh5s5ocaF01HDetxz+p8ecjNPA6cZxxIHmzA==", "integrity": "sha512-AWuv6Ery3pM+dY7LYS8YIaCiQvUaos9OB1RyNgaOWnaX+Tik7Onvcsf8x8c+YtDeT0maYLniBip2hox5KtEXXA==",
"dev": true, "dev": true,
"peer": true, "peer": true,
"dependencies": { "dependencies": {
@ -3244,9 +3244,9 @@
} }
}, },
"node_modules/mini-css-extract-plugin": { "node_modules/mini-css-extract-plugin": {
"version": "1.3.4", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.4.tgz", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.5.tgz",
"integrity": "sha512-dNjqyeogUd8ucUgw5sxm1ahvSfSUgef7smbmATRSbDm4EmNx5kQA6VdUEhEeCKSjX6CTYjb5vxgMUvRjqP3uHg==", "integrity": "sha512-tvmzcwqJJXau4OQE5vT72pRT18o2zF+tQJp8CWchqvfQnTlflkzS+dANYcRdyPRWUWRkfmeNTKltx0NZI/b5dQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"loader-utils": "^2.0.0", "loader-utils": "^2.0.0",
@ -4340,9 +4340,9 @@
} }
}, },
"node_modules/three": { "node_modules/three": {
"version": "0.124.0", "version": "0.125.2",
"resolved": "https://registry.npmjs.org/three/-/three-0.124.0.tgz", "resolved": "https://registry.npmjs.org/three/-/three-0.125.2.tgz",
"integrity": "sha512-ROXp1Ly7YyF+jC910DQyAWj++Qlw2lQv0qwYLNQwdDbjk4bsOXAfGO92wYTMPNei1GMJUmCxSxc3MjGBTS09Rg==" "integrity": "sha512-7rIRO23jVKWcAPFdW/HREU2NZMGWPBZ4XwEMt0Ak0jwLUKVJhcKM55eCBWyGZq/KiQbeo1IeuAoo/9l2dzhTXA=="
}, },
"node_modules/to-fast-properties": { "node_modules/to-fast-properties": {
"version": "2.0.0", "version": "2.0.0",
@ -6361,9 +6361,9 @@
"dev": true "dev": true
}, },
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001179", "version": "1.0.30001181",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001179.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001181.tgz",
"integrity": "sha512-blMmO0QQujuUWZKyVrD1msR4WNDAqb/UPO1Sw2WWsQ7deoM5bJiicKnWJ1Y0NS/aGINSnKPIWBMw5luX+NDUCA==", "integrity": "sha512-m5ul/ARCX50JB8BSNM+oiPmQrR5UmngaQ3QThTTp5HcIIQGP/nPBs82BYLE+tigzm3VW+F4BJIhUyaVtEweelQ==",
"dev": true "dev": true
}, },
"chalk": { "chalk": {
@ -6630,9 +6630,9 @@
"dev": true "dev": true
}, },
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.3.645", "version": "1.3.648",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.645.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.648.tgz",
"integrity": "sha512-T7mYop3aDpRHIQaUYcmzmh6j9MAe560n6ukqjJMbVC6bVTau7dSpvB18bcsBPPtOSe10cKxhJFtlbEzLa0LL1g==", "integrity": "sha512-4POzwyQ80tkDiBwkxn7IpfzioimrjRSFX1sCQ3pLZsYJ5ERYmwzdq0hZZ3nFP7Z6GtmnSn3xwWDm8FPlMeOoEQ==",
"dev": true "dev": true
}, },
"emoji-regex": { "emoji-regex": {
@ -6806,9 +6806,9 @@
"dev": true "dev": true
}, },
"fastq": { "fastq": {
"version": "1.10.0", "version": "1.10.1",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.0.tgz", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.1.tgz",
"integrity": "sha512-NL2Qc5L3iQEsyYzweq7qfgy5OtXCmGzGvhElGEd/SoFWEMOEczNh5s5ocaF01HDetxz+p8ecjNPA6cZxxIHmzA==", "integrity": "sha512-AWuv6Ery3pM+dY7LYS8YIaCiQvUaos9OB1RyNgaOWnaX+Tik7Onvcsf8x8c+YtDeT0maYLniBip2hox5KtEXXA==",
"dev": true, "dev": true,
"peer": true, "peer": true,
"requires": { "requires": {
@ -7491,9 +7491,9 @@
"dev": true "dev": true
}, },
"mini-css-extract-plugin": { "mini-css-extract-plugin": {
"version": "1.3.4", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.4.tgz", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.5.tgz",
"integrity": "sha512-dNjqyeogUd8ucUgw5sxm1ahvSfSUgef7smbmATRSbDm4EmNx5kQA6VdUEhEeCKSjX6CTYjb5vxgMUvRjqP3uHg==", "integrity": "sha512-tvmzcwqJJXau4OQE5vT72pRT18o2zF+tQJp8CWchqvfQnTlflkzS+dANYcRdyPRWUWRkfmeNTKltx0NZI/b5dQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"loader-utils": "^2.0.0", "loader-utils": "^2.0.0",
@ -8311,9 +8311,9 @@
} }
}, },
"three": { "three": {
"version": "0.124.0", "version": "0.125.2",
"resolved": "https://registry.npmjs.org/three/-/three-0.124.0.tgz", "resolved": "https://registry.npmjs.org/three/-/three-0.125.2.tgz",
"integrity": "sha512-ROXp1Ly7YyF+jC910DQyAWj++Qlw2lQv0qwYLNQwdDbjk4bsOXAfGO92wYTMPNei1GMJUmCxSxc3MjGBTS09Rg==" "integrity": "sha512-7rIRO23jVKWcAPFdW/HREU2NZMGWPBZ4XwEMt0Ak0jwLUKVJhcKM55eCBWyGZq/KiQbeo1IeuAoo/9l2dzhTXA=="
}, },
"to-fast-properties": { "to-fast-properties": {
"version": "2.0.0", "version": "2.0.0",

2
package.json
View File

@ -6,7 +6,7 @@
"dependencies": { "dependencies": {
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"proj4": "^2.6.3", "proj4": "^2.6.3",
"three": "^0.124.0" "three": "^0.125.1"
}, },
"author": "Arno Kaimbacher", "author": "Arno Kaimbacher",
"license": "MIT", "license": "MIT",

19
src/css/page.css
View File

@ -59,6 +59,11 @@ section {
justify-content: center; justify-content: center;
}*/ }*/
#map-title {
display: block;
padding: 1em;
}
.btnDownloadMeme { .btnDownloadMeme {
margin-top: 10px; margin-top: 10px;
} }
@ -101,7 +106,6 @@ section {
} }
/* control positioning */ /* control positioning */
.gba-control { .gba-control {
position: relative; position: relative;
z-index: 7; z-index: 7;
@ -391,7 +395,6 @@ a:hover {
/* Buttons /* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] { .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
display: inline-block; display: inline-block;
height: 38px; height: 38px;
@ -432,7 +435,6 @@ a:hover {
/* Forms /* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
height: 38px; height: 38px;
padding: 6px 10px; padding: 6px 10px;
@ -722,6 +724,11 @@ there.
/* smaller than tablet */ /* smaller than tablet */
@media (max-width: 750px) { @media (max-width: 750px) {
#map-title {
display: none;
padding: 1em;
}
.mapDesktop { .mapDesktop {
/* overflow: hidden; /* overflow: hidden;
position: absolute; */ position: absolute; */
@ -830,7 +837,7 @@ ul.tab-nav li span.active.button {
} }
.green-label { .green-label {
color: #7cfc00; color: #3ad29f;
padding: 2px; padding: 2px;
text-shadow: -1px -1px #FFF, 0 -1px #FFF, 1px -1px #FFF, -1px 0 #FFF, 1px 0 #FFF, -1px 1px #FFF, 0 1px #FFF, 1px 1px #FFF; text-shadow: -1px -1px #FFF, 0 -1px #FFF, 1px -1px #FFF, -1px 0 #FFF, 1px 0 #FFF, -1px 1px #FFF, 0 1px #FFF, 1px 1px #FFF;
position: absolute; position: absolute;
@ -841,8 +848,8 @@ ul.tab-nav li span.active.button {
user-select: none; user-select: none;
} }
.blue-label { .grey-label {
color: #00bfff; color: #6b716f;
padding: 2px; padding: 2px;
text-shadow: -1px -1px #FFF, 0 -1px #FFF, 1px -1px #FFF, -1px 0 #FFF, 1px 0 #FFF, -1px 1px #FFF, 0 1px #FFF, 1px 1px #FFF; text-shadow: -1px -1px #FFF, 0 -1px #FFF, 1px -1px #FFF, -1px 0 #FFF, 1px 0 #FFF, -1px 1px #FFF, 0 1px #FFF, 1px 1px #FFF;
position: absolute; position: absolute;

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

@ -1,3 +1,19 @@
/* der eigentliche Button */
.gba-control-basemap-toggle {
width: 30px;
height: 30px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
border-radius: 5px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABLFBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmVlZWWlpaXl5eYmJjT09P///+ZmZmdnZ2qqqq3t7fOzs7Pz8/Q0NDR0dHS0tKTk5PU1NTV1dWUlJTKysrMzMzNzc2kpKSlpaWpqambm5uvr6+xsbGioqK+vr7W1tbh4eHi4uLw8PD29vb4+Pj7+/v8/PygoKDY2NjIyMiurq6SkpKwsLCjo6OysrK0tLS1tbW2tracnJy4uLjLy8vZ2dna2trc3Nzf39+6urq8vLzj4+Pl5eXm5ubo6Ojp6enq6uqRkZHz8/P19fW/v7/39/fAwMDCwsKnp6f9/f3+/v6enp7FxcXGxsaampqfn5/Dw8PhTh9TAAAAFHRSTlMAAk9hdXZ+t8fJytPY3N/i7O3v8vSJ2KIAAAFdSURBVHhehZPlcuswEEadpk0Z0orNGGSGMjMz9973f4fGkI7G47rnlzRn9WlntBISqcWVX5hLCsI4i2FMWIjTk8JynJ4R0vwWOQ7i91O8RmZVXRVNHKmxKa62KW3VmIl5HUj20KIeVzJ0QtqB8jX9oVF2AKcBqJxTnrcjyYSBho50TMP0SN5ErsZFu0cjeMzmsasVGk3vCbrhwMsO0yWbwG8NOJVG+ORh0YSjztFtf9Dm7Z36tY6DzjHon6qq0eyM5P2JpuV29iD29L9dxTZ0TSGXXVd2mrqi64Z9UBE9vW/buoum2Dev3QtD0T3qZAN54S//CfEL1EFd0bylZdSqfjiDSPq0ggJfEvJcgOjnSSArZ4b3BxDrQ0KQfzEMSts5v4DYmTUGw+OAwbusWsOOs1slgCOGCYP+maHKoi95HYBgoQp9GejQICPEeKb/+gYT8Z8okZpPR7M0mxS+AQ3gZKp5dNfSAAAAAElFTkSuQmCC') /*img/layer.png*/;
/* background-position: 50% 50%; */
background-repeat: no-repeat;
display: block;
}
.gba_basemap_img { .gba_basemap_img {
width: 80px; width: 80px;
height: 80px; height: 80px;

55
src/js/controls/BasemapControl.js
View File

@ -6,7 +6,7 @@ import * as domEvent from '../core/domEvent';
import './BasemapControl.css'; import './BasemapControl.css';
export class BasemapControl extends MobileDialog { export class BasemapControl extends Control {
defaultTitle = '3DViewer'; defaultTitle = '3DViewer';
@ -23,12 +23,12 @@ export class BasemapControl extends MobileDialog {
} }
onAdd(map) { // onAdd(map) {
super.onAdd(map); // super.onAdd(map);
let basemaps = this.basemaps = map.basemaps; // let basemaps = this.basemaps = map.basemaps;
this._initBasemapHtml(basemaps.services); // this._initBasemapHtml(basemaps.services);
} // }
// onAdd(map) { // onAdd(map) {
// this._mainMap = map; // this._mainMap = map;
@ -57,6 +57,41 @@ export class BasemapControl extends MobileDialog {
// } // }
// } // }
onAdd(map) {
this._initLayout(map);
this._map = map;
return this._container;
}
_initLayout() {
let className = 'gba-control-basemap';
let container = this._container = dom.createDom('div', { "class": className });
// makes this work on IE touch devices by stopping it from firing a mouseout event when the touch is released
container.setAttribute('aria-haspopup', true);
let link = this._layersLink = dom.createDom('a', { "class": className + '-toggle' }, container);
link.href = '#';
link.title = 'Base Layers';
// let popupClassName = "gba-basemap-control";
// let dialogContainer = dom.createDom("div", { "class": popupClassName, "id": 'basemap-control-parent' });
// domEvent.on(dialogContainer, 'click', domEvent.stopPropagation);
// let dialog = this.dialog = new MobileDialog();
this.dialog = new MobileDialog("Baselayer", { klass: "fm_basemap_list", parentDiv: 'basemap-control-parent' }).addTo(this._map);
let basemaps = this.basemaps = this._map.basemaps;
this._initBasemapHtml(basemaps.services);
// domEvent.on(link, 'click', this.expand, this);
domEvent.on(link, 'click', () => {
this.dialog.show();
}, this);
}
_initBasemapHtml(basemapServices) { _initBasemapHtml(basemapServices) {
for (let i = 0; i < basemapServices.length; i++) { for (let i = 0; i < basemapServices.length; i++) {
@ -68,7 +103,7 @@ export class BasemapControl extends MobileDialog {
//+ "</a>"; //+ "</a>";
var btnLink = dom.createDom('a', { var btnLink = dom.createDom('a', {
'class': 'gba_basemap_option' 'class': 'gba_basemap_option'
}, this.popupcontent); }, this.dialog.popupcontent);
btnLink.dataset.name = basemap.name; btnLink.dataset.name = basemap.name;
let image = dom.createDom('img', { let image = dom.createDom('img', {
@ -83,7 +118,7 @@ export class BasemapControl extends MobileDialog {
domEvent.on(btnLink, 'click', function (e) { domEvent.on(btnLink, 'click', function (e) {
e.preventDefault(); e.preventDefault();
let name = e.currentTarget.getAttribute('data-name'); let name = e.currentTarget.getAttribute('data-name');
this.setBasemap(name); this._setBasemap(name);
// this.hide(); // this.hide();
return false; return false;
}, this); }, this);
@ -92,10 +127,10 @@ export class BasemapControl extends MobileDialog {
} }
setBasemap(name) { _setBasemap(name) {
for (let i = 0; i < this.basemaps.services.length; i++) { for (let i = 0; i < this.basemaps.services.length; i++) {
if (this.basemaps.services[i].name === name) { if (this.basemaps.services[i].name === name) {
let basemap = this.basemaps.services[i]; // let basemap = this.basemaps.services[i];
if (this._map.currentBasemap) { if (this._map.currentBasemap) {
//this.map.removeLayer(this.map.currentBasemap); //this.map.removeLayer(this.map.currentBasemap);
this._map.currentBasemap.changeImage(i); this._map.currentBasemap.changeImage(i);

1
src/js/controls/Coordinates.css
View File

@ -8,4 +8,5 @@
margin: 0; margin: 0;
color: #333; color: #333;
font: 11px/1.500 'Open Sans', sans-serif; font: 11px/1.500 'Open Sans', sans-serif;
margin-bottom: 0 !important;
} }

11
src/js/core/Map.js
View File

@ -12,22 +12,29 @@ class Map extends OrbitControls {
_controlContainer; _controlContainer;
_controls; _controls;
constructor(x, y, z, size, center, camera, scene, domElement, container) { constructor(x, y, z, size, center, camera, scene, container, serviceUrl) {
// call parent constructor of OrbitControls // call parent constructor of OrbitControls
super(size, center, camera, scene, domElement); super(size, center, camera, scene, container);
this.camera = camera; this.camera = camera;
this.container = container; this.container = container;
this.length = x.max - x.min; this.length = x.max - x.min;
this.width = y.max - y.min; this.width = y.max - y.min;
this.height = z.max - z.min;
this.x = x; this.x = x;
this.y = y; this.y = y;
this.z = z; this.z = z;
this.center = center;
//init the control corners //init the control corners
if (this._initControlPos) { if (this._initControlPos) {
this._initControlPos(); this._initControlPos();
} }
// to do: initialize map title via serviceUrl:
this.title = "Geological 3D model of Austria";
// to do: initialize layers via serviceUrl:
this._layers = {}; this._layers = {};
this.initControls(); this.initControls();

102
src/js/layer/GridLayer.js
View File

@ -1,23 +1,17 @@
import { BufferGeometry } from 'three/src/core/BufferGeometry'; import { BufferGeometry } from 'three/src/core/BufferGeometry';
import { Float32BufferAttribute } from 'three/src/core/BufferAttribute'; import { Float32BufferAttribute } from 'three/src/core/BufferAttribute';
import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial'; import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial';
import { PointsMaterial } from 'three/src/materials/PointsMaterial';
import { LineSegments } from 'three/src/objects/LineSegments'; import { LineSegments } from 'three/src/objects/LineSegments';
import { Layer } from './Layer'; import { Layer } from './Layer';
import { Group } from 'three/src/objects/Group'; import { Group } from 'three/src/objects/Group';
// import { Color } from 'three/src/math/Color';
import { Vector3 } from 'three/src/math/Vector3'; import { Vector3 } from 'three/src/math/Vector3';
import { Geometry } from 'three/src/core/Geometry';
import { Line } from 'three/src/objects/Line'; import { Line } from 'three/src/objects/Line';
import { Points } from 'three/src/objects/Points';
export class GridLayer extends Layer { export class GridLayer extends Layer {
constructor(params) { constructor(params) {
super(); super();
this.type = 'GridLayer'; this.type = 'GridLayer';
//this.features = [];
this.visible = true; this.visible = true;
this.opacity = 1; this.opacity = 1;
this.materials = []; this.materials = [];
@ -61,10 +55,8 @@ export class GridLayer extends Layer {
onAdd(map) { onAdd(map) {
let divisions = 5; let divisions = 5;
// let size = map.length / 10;
let gridXZ = this.build(map.length, divisions, map.y.max, map.width);
let gridXZ = this.build(map.length, divisions, map.center.y, map.width);
// gridXZ.position.set(this.center.x, this.center.y, this.center.z); // gridXZ.position.set(this.center.x, this.center.y, this.center.z);
// size = map.width / 10; // size = map.width / 10;
@ -72,7 +64,10 @@ export class GridLayer extends Layer {
// gridYZ.rotation.z = Math.PI / 2; // gridYZ.rotation.z = Math.PI / 2;
// gridYZ.position.set(this.center.x, this.center.y, this.center.z); // gridYZ.position.set(this.center.x, this.center.y, this.center.z);
let gridY = this.buildY(map.width, divisions, map.center.z, map.width); let gridBottomZ = this.gridBottomZ = -(map.width / 2);
this.buildY(map.width, divisions, gridBottomZ, map.width);
this.buildZ(map.height, divisions, map.y.max);
//waagrechtes grid //waagrechtes grid
// // let gridXY = this.build(map.length, divisions, 0, map.width); // // let gridXY = this.build(map.length, divisions, 0, map.width);
@ -86,7 +81,30 @@ export class GridLayer extends Layer {
this.getScene().add(this.labelConnectorGroup); this.getScene().add(this.labelConnectorGroup);
} }
buildY(size, divisions, constant, height) { buildZ(size, divisions, constant) {
let step = size / divisions;
let vertices = [];
for (let k = this._map.z.min; k <= this._map.z.max + 1; k = k + step) {
vertices.push(this._map.x.min, constant, k, this._map.x.max, constant, k);
}
let geometry = new BufferGeometry();
let positions = new Float32BufferAttribute(vertices, 3);
geometry.setAttribute('position', positions);
let material = new LineBasicMaterial({
linewidth: 1,
color: 0xA0A1A3
});
this.materials.push(material);
//THREE.LineSegments.call(this, geometry, material);
let lineSegments = new LineSegments(geometry, material);
this.objectGroup.add(lineSegments);
return lineSegments;
}
buildY(size, divisions, constant) {
let step = size / divisions; let step = size / divisions;
let vertices = []; let vertices = [];
@ -156,54 +174,41 @@ export class GridLayer extends Layer {
buildLabels(divisions = 5) { buildLabels(divisions = 5) {
let size = this._map.length; let size = this._map.length;
let step = size / divisions; let step = size / divisions;
// this.parent = parent; // this.parent = parent;
// this.parentElement = parentElement; // this.parentElement = parentElement;
// var width = 80;
let labels = new Array(); let labels = new Array();
// for (let k = - halfSize; k <= halfSize; k = k + step) { // for (let k = - halfSize; k <= halfSize; k = k + step) {
for (let k = this._map.x.min; k <= this._map.x.max; k = k + step) { for (let k = this._map.x.min; k <= this._map.x.max; k = k + step) {
if (k % 1 != 0) k = this._round(k, 2); let xCoordinate = (k % 1 != 0) ? this._round(k, 2) : k;
let info = { a: k, size: step, axis: "x", color: 0xff0000, cl: "red-label", h: 0.6, centroid: [[k, this._map.center.y, this._map.width / 2]] }; let info = { a: xCoordinate, size: step, axis: "x", color: 0xff0000, cl: "red-label", h: 0.6, centroid: [[k, this._map.y.max, this._map.width / 2]] };
labels.push(info); labels.push(info);
} }
size = this._map.width; let ySize = this._map.width;
step = size / divisions; let yStep = ySize / divisions;
for (let k = this._map.y.min; k <= this._map.y.max; k = k + step) { for (let k = this._map.y.min; k <= this._map.y.max; k = k + yStep) {
if (k % 1 != 0) k = this._round(k, 2); let yCoordinate = (k % 1 != 0) ? this._round(k, 2) : k;
let info = { a: k, size: step, axis: "y", color: 0x00ff00, cl: "green-label", h: 0.6, centroid: [[this._map.x.min, k, this._map.center.z]] }; let info = { a: yCoordinate, size: yStep, axis: "y", color: 0x3ad29f, cl: "green-label", h: 0.6, centroid: [[this._map.x.min, k, this.gridBottomZ]] };
labels.push(info); labels.push(info);
} }
//label let zSize = this._map.height;
// this.f = [ let zStep = zSize / divisions;
// { a: [i18n.widgets.gridlayer.east], cl: "red-label", h: 0.0, centroid: [[0, width / 2 + 15, this.height]], axis: true }, for (let k = this._map.z.min; k <= this._map.z.max + 1; k = k + zStep) {
// { a: [this._map.getMapX(-10)], cl: "red-label", h: 0.0, centroid: [[-10, width / 2, this.height]] }, // vertices.push(this._map.x.min, constant, k, this._map.x.max, constant, k);
// { a: [this._map.getMapX(-20)], cl: "red-label", h: 0.6, centroid: [[-20, width / 2, this.height]] }, let zCoordinate = (k % 1 != 0) ? this._round(k, 2) : k;
// { a: [this._map.getMapX(-30)], cl: "red-label", h: 0.6, centroid: [[-30, width / 2, this.height]] }, let info = { a: zCoordinate, size: yStep, axis: "z", color: 0x6b716f, cl: "grey-label", h: 0.6, centroid: [[this._map.x.min, this._map.y.max, k]] };
// { a: [this._map.getMapX(-40)], cl: "red-label", h: 0.6, centroid: [[-40, width / 2, this.height]] }, labels.push(info);
// { a: [this._map.getMapX(-50)], cl: "red-label", h: 0.6, hs: 4, centroid: [[-50, width / 2, this.height]] }, }
// { a: [this._map.getMapX(0)], cl: "red-label", h: 0.6, centroid: [[0, width / 2, this.height]] },
// { a: [this._map.getMapX(10)], cl: "red-label", h: 0.6, centroid: [[10, width / 2, this.height]] },
// { a: [this._map.getMapX(20)], cl: "red-label", h: 0.6, centroid: [[20, width / 2, this.height]] },
// { a: [this._map.getMapX(30)], cl: "red-label", h: 0.6, centroid: [[30, width / 2, this.height]] },
// { a: [this._map.getMapX(40)], cl: "red-label", h: 0.6, centroid: [[40, width / 2, this.height]] },
// { a: [this._map.getMapX(50)], cl: "red-label", h: 0.6, centroid: [[50, width / 2, this.height]] }
// ];
var getCentroidFunc = function (f) { return f.centroid; }; var getCentroidFunc = function (f) { return f.centroid; };
// Layer must belong to a project // Layer must belong to a project
let labelInfo = this.labelInfo; let labelInfo = this.labelInfo;
if (labelInfo === undefined || getCentroidFunc === undefined) return; if (labelInfo === undefined || getCentroidFunc === undefined) return;
// // let line_mat = new LineBasicMaterial({ color: Gba3D.Options.label.connectorColor });
// let line_mat = new LineBasicMaterial({
// linewidth: 1,
// color: 0x80CCFF
// });
// this.labelConnectorGroup = new Group();
this.labelConnectorGroup.userData.layerId = this.index; this.labelConnectorGroup.userData.layerId = this.index;
// if (parent) { // if (parent) {
// parent.add(this.labelConnectorGroup); // parent.add(this.labelConnectorGroup);
@ -245,7 +250,6 @@ export class GridLayer extends Layer {
e.className = classLabel;// "label"; e.className = classLabel;// "label";
this.labelParentElement.appendChild(e); this.labelParentElement.appendChild(e);
// let z = labelHeightFunc(f, pt);
let pt0, pt1; let pt0, pt1;
if (f.axis == "x") { if (f.axis == "x") {
pt0 = new Vector3(pt[0], pt[1], pt[2]); // bottom pt0 = new Vector3(pt[0], pt[1], pt[2]); // bottom
@ -254,11 +258,15 @@ export class GridLayer extends Layer {
else if (f.axis == "y") { else if (f.axis == "y") {
pt0 = new Vector3(pt[0], pt[1], pt[2]); pt0 = new Vector3(pt[0], pt[1], pt[2]);
pt1 = new Vector3(pt[0] - horizontalShiftLabel - f.size, pt[1], pt[2]); pt1 = new Vector3(pt[0] - horizontalShiftLabel - f.size, pt[1], pt[2]);
} else if (f.axis == "z") {
pt0 = new Vector3(pt[0], pt[1], pt[2]);
pt1 = new Vector3(pt[0] - horizontalShiftLabel - f.size, pt[1], pt[2]);
} }
// create connector - not for axis
// if (f.axis !== true) { let step = size / divisions;
let geom = new Geometry(); let vertices = [];
geom.vertices.push(pt1, pt0); vertices.push(pt1, pt0);
let geom = new BufferGeometry().setFromPoints(vertices);
let line = new Line(geom, line_mat); let line = new Line(geom, line_mat);
// line.position.set(this.center.x, this.center.y, this.center.z); // line.position.set(this.center.x, this.center.y, this.center.z);
@ -294,7 +302,7 @@ export class GridLayer extends Layer {
let autosize = true; let autosize = true;
let camera = this._map.camera; let camera = this._map.camera;
let camera_pos = camera.position; let camera_pos = camera.position;
let c2t = this._map.target.clone().sub(camera_pos); let c2t = this._map.center.clone().sub(camera_pos);
let c2l = new Vector3(); let c2l = new Vector3();
//neu //neu

12
src/js/main.js
View File

@ -152,7 +152,9 @@ class Application {
// this.camera.lookAt(new Vector3(0, 0, 0)); // this.camera.lookAt(new Vector3(0, 0, 0));
// create map // create map
this.map = new Map(x, y, z, size, center, this.camera, this.scene, this.renderer.domElement, this.container); let map = this.map = new Map(x, y, z, size, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=11');
this.mapTitle = document.querySelector('#map-title');
this.mapTitle.innerHTML += map.title;
// this.map.minDistance = size*0.75; // this.map.minDistance = size*0.75;
// this.map.maxDistance = size*15; // this.map.maxDistance = size*15;
@ -239,7 +241,7 @@ class Application {
}).addTo(this.map); }).addTo(this.map);
this.basemapControl = new BasemapControl('Baselayer', { this.basemapControl = new BasemapControl('Baselayer', {
parentDiv: 'basemap-control-parent' position: 'topright'
}).addTo(this.map); }).addTo(this.map);
//slider for scaling z value //slider for scaling z value
@ -337,9 +339,9 @@ class Application {
addEventListeners() { addEventListeners() {
domEvent.on(this.mapIcon, 'click', () => { // domEvent.on(this.mapIcon, 'click', () => {
this.basemapControl.show(); // this.basemapControl.show();
}, this); // }, this);
domEvent.on(window, 'resize', this.onWindowResize, this); domEvent.on(window, 'resize', this.onWindowResize, this);
domEvent.on(window, 'keydown', this.keydown, this); domEvent.on(window, 'keydown', this.keydown, this);