From f16a6cec499559ac57594c1dce5d26516fee32df Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Fri, 29 Jan 2021 16:42:25 +0100 Subject: [PATCH] - 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 --- index.html | 8 ++- package-lock.json | 62 ++++++++--------- package.json | 2 +- src/css/page.css | 19 ++++-- src/js/controls/BasemapControl.css | 16 +++++ src/js/controls/BasemapControl.js | 55 ++++++++++++--- src/js/controls/Coordinates.css | 1 + src/js/core/Map.js | 11 ++- src/js/layer/GridLayer.js | 104 ++++++++++++++++------------- src/js/main.js | 12 ++-- 10 files changed, 184 insertions(+), 106 deletions(-) diff --git a/index.html b/index.html index d3347f2..89c093a 100644 --- a/index.html +++ b/index.html @@ -49,13 +49,15 @@
- diff --git a/package-lock.json b/package-lock.json index ccd9c69..6954f72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index b15006f..7e72342 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/css/page.css b/src/css/page.css index 87531f4..01c76fa 100644 --- a/src/css/page.css +++ b/src/css/page.css @@ -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; diff --git a/src/js/controls/BasemapControl.css b/src/js/controls/BasemapControl.css index 52962d7..be6445f 100644 --- a/src/js/controls/BasemapControl.css +++ b/src/js/controls/BasemapControl.css @@ -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; diff --git a/src/js/controls/BasemapControl.js b/src/js/controls/BasemapControl.js index 58d8c59..e0400e4 100644 --- a/src/js/controls/BasemapControl.js +++ b/src/js/controls/BasemapControl.js @@ -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 { //+ ""; 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); diff --git a/src/js/controls/Coordinates.css b/src/js/controls/Coordinates.css index 4849fb6..681c4e2 100644 --- a/src/js/controls/Coordinates.css +++ b/src/js/controls/Coordinates.css @@ -8,4 +8,5 @@ margin: 0; color: #333; font: 11px/1.500 'Open Sans', sans-serif; + margin-bottom: 0 !important; } \ No newline at end of file diff --git a/src/js/core/Map.js b/src/js/core/Map.js index e870fa8..41c9bf9 100644 --- a/src/js/core/Map.js +++ b/src/js/core/Map.js @@ -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(); diff --git a/src/js/layer/GridLayer.js b/src/js/layer/GridLayer.js index b263db3..5c9b413 100644 --- a/src/js/layer/GridLayer.js +++ b/src/js/layer/GridLayer.js @@ -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,9 +302,9 @@ 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 // app.labels = app.controls.gridlayer.labels; let scaleFactor = this.scale; diff --git a/src/js/main.js b/src/js/main.js index fe56940..3b8a933 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -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);