- three update 0.125.1 & 0.125.2
- show z value in GridLayer.js (coordinate grid) - show map title in header - BasemapControl inside map canvas
This commit is contained in:
Arno Kaimbacher
parent
1dbaf10261
commit
f16a6cec49
|
|
@ -49,13 +49,15 @@
|
|||
<i class="fa fa-bars"></i>
|
||||
</a>
|
||||
<div class="row">
|
||||
<div class="logo three columns">
|
||||
<div class="logo two columns">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="images/egdi_logo.svg" height="51">
|
||||
</a>
|
||||
</div>
|
||||
<ul class="menu main-navigation nine columns">
|
||||
<li><a id="menu-map-icon" href="#map">Map</a></li>
|
||||
<div id='map-title' class="four columns">
|
||||
</div>
|
||||
<ul class="menu main-navigation six columns">
|
||||
<!-- <li><a id="menu-map-icon" href="#map">Map</a></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
62
package-lock.json
generated
62
package-lock.json
generated
|
|
@ -11,7 +11,7 @@
|
|||
"dependencies": {
|
||||
"normalize.css": "^8.0.1",
|
||||
"proj4": "^2.6.3",
|
||||
"three": "^0.124.0"
|
||||
"three": "^0.125.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.9",
|
||||
|
|
@ -1740,9 +1740,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001179",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001179.tgz",
|
||||
"integrity": "sha512-blMmO0QQujuUWZKyVrD1msR4WNDAqb/UPO1Sw2WWsQ7deoM5bJiicKnWJ1Y0NS/aGINSnKPIWBMw5luX+NDUCA==",
|
||||
"version": "1.0.30001181",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001181.tgz",
|
||||
"integrity": "sha512-m5ul/ARCX50JB8BSNM+oiPmQrR5UmngaQ3QThTTp5HcIIQGP/nPBs82BYLE+tigzm3VW+F4BJIhUyaVtEweelQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
|
|
@ -2090,9 +2090,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.3.645",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.645.tgz",
|
||||
"integrity": "sha512-T7mYop3aDpRHIQaUYcmzmh6j9MAe560n6ukqjJMbVC6bVTau7dSpvB18bcsBPPtOSe10cKxhJFtlbEzLa0LL1g==",
|
||||
"version": "1.3.648",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.648.tgz",
|
||||
"integrity": "sha512-4POzwyQ80tkDiBwkxn7IpfzioimrjRSFX1sCQ3pLZsYJ5ERYmwzdq0hZZ3nFP7Z6GtmnSn3xwWDm8FPlMeOoEQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
|
|
@ -2315,9 +2315,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/fastq": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.0.tgz",
|
||||
"integrity": "sha512-NL2Qc5L3iQEsyYzweq7qfgy5OtXCmGzGvhElGEd/SoFWEMOEczNh5s5ocaF01HDetxz+p8ecjNPA6cZxxIHmzA==",
|
||||
"version": "1.10.1",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.1.tgz",
|
||||
"integrity": "sha512-AWuv6Ery3pM+dY7LYS8YIaCiQvUaos9OB1RyNgaOWnaX+Tik7Onvcsf8x8c+YtDeT0maYLniBip2hox5KtEXXA==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
|
|
@ -3244,9 +3244,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/mini-css-extract-plugin": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.4.tgz",
|
||||
"integrity": "sha512-dNjqyeogUd8ucUgw5sxm1ahvSfSUgef7smbmATRSbDm4EmNx5kQA6VdUEhEeCKSjX6CTYjb5vxgMUvRjqP3uHg==",
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.5.tgz",
|
||||
"integrity": "sha512-tvmzcwqJJXau4OQE5vT72pRT18o2zF+tQJp8CWchqvfQnTlflkzS+dANYcRdyPRWUWRkfmeNTKltx0NZI/b5dQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loader-utils": "^2.0.0",
|
||||
|
|
@ -4340,9 +4340,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/three": {
|
||||
"version": "0.124.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.124.0.tgz",
|
||||
"integrity": "sha512-ROXp1Ly7YyF+jC910DQyAWj++Qlw2lQv0qwYLNQwdDbjk4bsOXAfGO92wYTMPNei1GMJUmCxSxc3MjGBTS09Rg=="
|
||||
"version": "0.125.2",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.125.2.tgz",
|
||||
"integrity": "sha512-7rIRO23jVKWcAPFdW/HREU2NZMGWPBZ4XwEMt0Ak0jwLUKVJhcKM55eCBWyGZq/KiQbeo1IeuAoo/9l2dzhTXA=="
|
||||
},
|
||||
"node_modules/to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
|
|
@ -6361,9 +6361,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001179",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001179.tgz",
|
||||
"integrity": "sha512-blMmO0QQujuUWZKyVrD1msR4WNDAqb/UPO1Sw2WWsQ7deoM5bJiicKnWJ1Y0NS/aGINSnKPIWBMw5luX+NDUCA==",
|
||||
"version": "1.0.30001181",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001181.tgz",
|
||||
"integrity": "sha512-m5ul/ARCX50JB8BSNM+oiPmQrR5UmngaQ3QThTTp5HcIIQGP/nPBs82BYLE+tigzm3VW+F4BJIhUyaVtEweelQ==",
|
||||
"dev": true
|
||||
},
|
||||
"chalk": {
|
||||
|
|
@ -6630,9 +6630,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.645",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.645.tgz",
|
||||
"integrity": "sha512-T7mYop3aDpRHIQaUYcmzmh6j9MAe560n6ukqjJMbVC6bVTau7dSpvB18bcsBPPtOSe10cKxhJFtlbEzLa0LL1g==",
|
||||
"version": "1.3.648",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.648.tgz",
|
||||
"integrity": "sha512-4POzwyQ80tkDiBwkxn7IpfzioimrjRSFX1sCQ3pLZsYJ5ERYmwzdq0hZZ3nFP7Z6GtmnSn3xwWDm8FPlMeOoEQ==",
|
||||
"dev": true
|
||||
},
|
||||
"emoji-regex": {
|
||||
|
|
@ -6806,9 +6806,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"fastq": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.0.tgz",
|
||||
"integrity": "sha512-NL2Qc5L3iQEsyYzweq7qfgy5OtXCmGzGvhElGEd/SoFWEMOEczNh5s5ocaF01HDetxz+p8ecjNPA6cZxxIHmzA==",
|
||||
"version": "1.10.1",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.1.tgz",
|
||||
"integrity": "sha512-AWuv6Ery3pM+dY7LYS8YIaCiQvUaos9OB1RyNgaOWnaX+Tik7Onvcsf8x8c+YtDeT0maYLniBip2hox5KtEXXA==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"requires": {
|
||||
|
|
@ -7491,9 +7491,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"mini-css-extract-plugin": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.4.tgz",
|
||||
"integrity": "sha512-dNjqyeogUd8ucUgw5sxm1ahvSfSUgef7smbmATRSbDm4EmNx5kQA6VdUEhEeCKSjX6CTYjb5vxgMUvRjqP3uHg==",
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.5.tgz",
|
||||
"integrity": "sha512-tvmzcwqJJXau4OQE5vT72pRT18o2zF+tQJp8CWchqvfQnTlflkzS+dANYcRdyPRWUWRkfmeNTKltx0NZI/b5dQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^2.0.0",
|
||||
|
|
@ -8311,9 +8311,9 @@
|
|||
}
|
||||
},
|
||||
"three": {
|
||||
"version": "0.124.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.124.0.tgz",
|
||||
"integrity": "sha512-ROXp1Ly7YyF+jC910DQyAWj++Qlw2lQv0qwYLNQwdDbjk4bsOXAfGO92wYTMPNei1GMJUmCxSxc3MjGBTS09Rg=="
|
||||
"version": "0.125.2",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.125.2.tgz",
|
||||
"integrity": "sha512-7rIRO23jVKWcAPFdW/HREU2NZMGWPBZ4XwEMt0Ak0jwLUKVJhcKM55eCBWyGZq/KiQbeo1IeuAoo/9l2dzhTXA=="
|
||||
},
|
||||
"to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
"dependencies": {
|
||||
"normalize.css": "^8.0.1",
|
||||
"proj4": "^2.6.3",
|
||||
"three": "^0.124.0"
|
||||
"three": "^0.125.1"
|
||||
},
|
||||
"author": "Arno Kaimbacher",
|
||||
"license": "MIT",
|
||||
|
|
|
|||
|
|
@ -59,6 +59,11 @@ section {
|
|||
justify-content: center;
|
||||
}*/
|
||||
|
||||
#map-title {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.btnDownloadMeme {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -101,7 +106,6 @@ section {
|
|||
}
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.gba-control {
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
|
|
@ -391,7 +395,6 @@ a:hover {
|
|||
|
||||
/* Buttons
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
|
|
@ -432,7 +435,6 @@ a:hover {
|
|||
|
||||
/* Forms
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
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;
|
||||
padding: 6px 10px;
|
||||
|
|
@ -722,6 +724,11 @@ there.
|
|||
/* smaller than tablet */
|
||||
|
||||
@media (max-width: 750px) {
|
||||
#map-title {
|
||||
display: none;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.mapDesktop {
|
||||
/* overflow: hidden;
|
||||
position: absolute; */
|
||||
|
|
@ -830,7 +837,7 @@ ul.tab-nav li span.active.button {
|
|||
}
|
||||
|
||||
.green-label {
|
||||
color: #7cfc00;
|
||||
color: #3ad29f;
|
||||
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;
|
||||
position: absolute;
|
||||
|
|
@ -841,8 +848,8 @@ ul.tab-nav li span.active.button {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.blue-label {
|
||||
color: #00bfff;
|
||||
.grey-label {
|
||||
color: #6b716f;
|
||||
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;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import * as domEvent from '../core/domEvent';
|
|||
|
||||
import './BasemapControl.css';
|
||||
|
||||
export class BasemapControl extends MobileDialog {
|
||||
export class BasemapControl extends Control {
|
||||
|
||||
defaultTitle = '3DViewer';
|
||||
|
||||
|
|
@ -23,12 +23,12 @@ export class BasemapControl extends MobileDialog {
|
|||
|
||||
}
|
||||
|
||||
onAdd(map) {
|
||||
super.onAdd(map);
|
||||
let basemaps = this.basemaps = map.basemaps;
|
||||
// onAdd(map) {
|
||||
// super.onAdd(map);
|
||||
// let basemaps = this.basemaps = map.basemaps;
|
||||
|
||||
this._initBasemapHtml(basemaps.services);
|
||||
}
|
||||
// this._initBasemapHtml(basemaps.services);
|
||||
// }
|
||||
|
||||
// onAdd(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) {
|
||||
|
||||
for (let i = 0; i < basemapServices.length; i++) {
|
||||
|
|
@ -68,7 +103,7 @@ export class BasemapControl extends MobileDialog {
|
|||
//+ "</a>";
|
||||
var btnLink = dom.createDom('a', {
|
||||
'class': 'gba_basemap_option'
|
||||
}, this.popupcontent);
|
||||
}, this.dialog.popupcontent);
|
||||
btnLink.dataset.name = basemap.name;
|
||||
|
||||
let image = dom.createDom('img', {
|
||||
|
|
@ -83,7 +118,7 @@ export class BasemapControl extends MobileDialog {
|
|||
domEvent.on(btnLink, 'click', function (e) {
|
||||
e.preventDefault();
|
||||
let name = e.currentTarget.getAttribute('data-name');
|
||||
this.setBasemap(name);
|
||||
this._setBasemap(name);
|
||||
// this.hide();
|
||||
return false;
|
||||
}, this);
|
||||
|
|
@ -92,10 +127,10 @@ export class BasemapControl extends MobileDialog {
|
|||
|
||||
}
|
||||
|
||||
setBasemap(name) {
|
||||
_setBasemap(name) {
|
||||
for (let i = 0; i < this.basemaps.services.length; i++) {
|
||||
if (this.basemaps.services[i].name === name) {
|
||||
let basemap = this.basemaps.services[i];
|
||||
// let basemap = this.basemaps.services[i];
|
||||
if (this._map.currentBasemap) {
|
||||
//this.map.removeLayer(this.map.currentBasemap);
|
||||
this._map.currentBasemap.changeImage(i);
|
||||
|
|
|
|||
|
|
@ -8,4 +8,5 @@
|
|||
margin: 0;
|
||||
color: #333;
|
||||
font: 11px/1.500 'Open Sans', sans-serif;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
|
@ -12,22 +12,29 @@ class Map extends OrbitControls {
|
|||
_controlContainer;
|
||||
_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
|
||||
super(size, center, camera, scene, domElement);
|
||||
super(size, center, camera, scene, container);
|
||||
|
||||
this.camera = camera;
|
||||
this.container = container;
|
||||
this.length = x.max - x.min;
|
||||
this.width = y.max - y.min;
|
||||
this.height = z.max - z.min;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.z = z;
|
||||
this.center = center;
|
||||
|
||||
//init the control corners
|
||||
if (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.initControls();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,17 @@
|
|||
import { BufferGeometry } from 'three/src/core/BufferGeometry';
|
||||
import { Float32BufferAttribute } from 'three/src/core/BufferAttribute';
|
||||
import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial';
|
||||
import { PointsMaterial } from 'three/src/materials/PointsMaterial';
|
||||
import { LineSegments } from 'three/src/objects/LineSegments';
|
||||
import { Layer } from './Layer';
|
||||
import { Group } from 'three/src/objects/Group';
|
||||
// import { Color } from 'three/src/math/Color';
|
||||
import { Vector3 } from 'three/src/math/Vector3';
|
||||
import { Geometry } from 'three/src/core/Geometry';
|
||||
import { Line } from 'three/src/objects/Line';
|
||||
import { Points } from 'three/src/objects/Points';
|
||||
|
||||
export class GridLayer extends Layer {
|
||||
|
||||
constructor(params) {
|
||||
super();
|
||||
this.type = 'GridLayer';
|
||||
|
||||
//this.features = [];
|
||||
this.visible = true;
|
||||
this.opacity = 1;
|
||||
this.materials = [];
|
||||
|
|
@ -61,10 +55,8 @@ export class GridLayer extends Layer {
|
|||
|
||||
onAdd(map) {
|
||||
let divisions = 5;
|
||||
// let size = map.length / 10;
|
||||
|
||||
|
||||
let gridXZ = this.build(map.length, divisions, map.center.y, map.width);
|
||||
let gridXZ = this.build(map.length, divisions, map.y.max, map.width);
|
||||
// gridXZ.position.set(this.center.x, this.center.y, this.center.z);
|
||||
|
||||
// size = map.width / 10;
|
||||
|
|
@ -72,7 +64,10 @@ export class GridLayer extends Layer {
|
|||
// gridYZ.rotation.z = Math.PI / 2;
|
||||
// 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
|
||||
// // let gridXY = this.build(map.length, divisions, 0, map.width);
|
||||
|
|
@ -86,7 +81,30 @@ export class GridLayer extends Layer {
|
|||
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 vertices = [];
|
||||
|
||||
|
|
@ -156,54 +174,41 @@ export class GridLayer extends Layer {
|
|||
buildLabels(divisions = 5) {
|
||||
let size = this._map.length;
|
||||
let step = size / divisions;
|
||||
|
||||
// this.parent = parent;
|
||||
// this.parentElement = parentElement;
|
||||
// var width = 80;
|
||||
let labels = new Array();
|
||||
|
||||
// for (let k = - halfSize; k <= halfSize; 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 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 xCoordinate = (k % 1 != 0) ? this._round(k, 2) : k;
|
||||
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);
|
||||
}
|
||||
|
||||
size = this._map.width;
|
||||
step = size / divisions;
|
||||
for (let k = this._map.y.min; k <= this._map.y.max; k = k + step) {
|
||||
if (k % 1 != 0) k = this._round(k, 2);
|
||||
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 ySize = this._map.width;
|
||||
let yStep = ySize / divisions;
|
||||
for (let k = this._map.y.min; k <= this._map.y.max; k = k + yStep) {
|
||||
let yCoordinate = (k % 1 != 0) ? this._round(k, 2) : k;
|
||||
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);
|
||||
}
|
||||
|
||||
//label
|
||||
// this.f = [
|
||||
// { a: [i18n.widgets.gridlayer.east], cl: "red-label", h: 0.0, centroid: [[0, width / 2 + 15, this.height]], axis: true },
|
||||
// { a: [this._map.getMapX(-10)], cl: "red-label", h: 0.0, 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, 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]] }
|
||||
// ];
|
||||
let zSize = this._map.height;
|
||||
let zStep = zSize / divisions;
|
||||
for (let k = this._map.z.min; k <= this._map.z.max + 1; k = k + zStep) {
|
||||
// vertices.push(this._map.x.min, constant, k, this._map.x.max, constant, k);
|
||||
let zCoordinate = (k % 1 != 0) ? this._round(k, 2) : k;
|
||||
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]] };
|
||||
labels.push(info);
|
||||
}
|
||||
|
||||
|
||||
var getCentroidFunc = function (f) { return f.centroid; };
|
||||
|
||||
// Layer must belong to a project
|
||||
let labelInfo = this.labelInfo;
|
||||
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;
|
||||
// if (parent) {
|
||||
// parent.add(this.labelConnectorGroup);
|
||||
|
|
@ -245,7 +250,6 @@ export class GridLayer extends Layer {
|
|||
e.className = classLabel;// "label";
|
||||
this.labelParentElement.appendChild(e);
|
||||
|
||||
// let z = labelHeightFunc(f, pt);
|
||||
let pt0, pt1;
|
||||
if (f.axis == "x") {
|
||||
pt0 = new Vector3(pt[0], pt[1], pt[2]); // bottom
|
||||
|
|
@ -254,11 +258,15 @@ export class GridLayer extends Layer {
|
|||
else if (f.axis == "y") {
|
||||
pt0 = new Vector3(pt[0], 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 geom = new Geometry();
|
||||
geom.vertices.push(pt1, pt0);
|
||||
|
||||
let step = size / divisions;
|
||||
let vertices = [];
|
||||
vertices.push(pt1, pt0);
|
||||
let geom = new BufferGeometry().setFromPoints(vertices);
|
||||
|
||||
let line = new Line(geom, line_mat);
|
||||
// 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 camera = this._map.camera;
|
||||
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();
|
||||
|
||||
//neu
|
||||
|
|
|
|||
|
|
@ -152,7 +152,9 @@ class Application {
|
|||
// this.camera.lookAt(new Vector3(0, 0, 0));
|
||||
|
||||
// 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.maxDistance = size*15;
|
||||
|
||||
|
|
@ -239,7 +241,7 @@ class Application {
|
|||
}).addTo(this.map);
|
||||
|
||||
this.basemapControl = new BasemapControl('Baselayer', {
|
||||
parentDiv: 'basemap-control-parent'
|
||||
position: 'topright'
|
||||
}).addTo(this.map);
|
||||
|
||||
//slider for scaling z value
|
||||
|
|
@ -337,9 +339,9 @@ class Application {
|
|||
|
||||
addEventListeners() {
|
||||
|
||||
domEvent.on(this.mapIcon, 'click', () => {
|
||||
this.basemapControl.show();
|
||||
}, this);
|
||||
// domEvent.on(this.mapIcon, 'click', () => {
|
||||
// this.basemapControl.show();
|
||||
// }, this);
|
||||
|
||||
domEvent.on(window, 'resize', this.onWindowResize, this);
|
||||
domEvent.on(window, 'keydown', this.keydown, this);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user