- add TIN layer via metadata request in Map class

- label in GridLayer are always scaled
- correct label positioning
- npm updates

src/js/controls/BasemapControl.js

@@ -43,9 +43,9 @@ export class BasemapControl extends Control {
     // }
 
     onAdd(map) {
-        this._initLayout(map);
+        let container = this._initLayout(map);
         this._map = map;
-        return this._container;
+        return container;
     }
 
     _initLayout() {
@@ -73,6 +73,7 @@ export class BasemapControl extends Control {
             this.dialog.show();
         }, this);
 
+        return container;
     }
 
 
@@ -104,7 +105,6 @@ export class BasemapControl extends Control {
                     e.preventDefault();
                     let name = e.currentTarget.getAttribute('data-name');
                     this._setBasemap(name);                                  
-                    // this.hide();                   
                     return false;
                 }, this);
             }
@@ -119,6 +119,7 @@ export class BasemapControl extends Control {
                 if (this._map.currentBasemap) {
                     //this.map.removeLayer(this.map.currentBasemap);
                     this._map.currentBasemap.changeImage(i);
+                    this.dialog.hide();
                 }
                 //var curentBaseMap = this.map.currentBasemap = new esri.layers.ArcGISTiledMapServiceLayer(getBasemapUrl(basemaps.services[i]), {
                 //    id: 'basemap'

src/js/core/Map.js

@@ -3,6 +3,7 @@ import * as dom from './domUtil';
 import { HomeButton } from '../controls/HomeButton';
 import { ZoomControl } from '../controls/ZoomControl';
 import * as util from './utilities';
+import { TinLayer } from '../layer/TinLayer';
 
 class Map extends OrbitControls {
 
@@ -11,8 +12,16 @@ class Map extends OrbitControls {
     _controlCorners;
     _controlContainer;
     _controls;
+    camera;
+    length;
+    width;
+    height;
+    x; y; z;
+    title;
+    serviceUrl;
+    basemaps;
 
-    constructor(x, y, z, size, center, camera, scene, container, serviceUrl) {
+    constructor(x, y, z, size, center, camera, scene, container) {
         // call parent constructor of OrbitControls
         super(size, center, camera, scene, container);
 
@@ -32,9 +41,10 @@ class Map extends OrbitControls {
         }
 
         // to do: initialize map title via serviceUrl:
-        this.title = "Geological 3D model of Austria";
+        this.title = "Geological 3D model of Vienna";
 
         // to do: initialize layers via serviceUrl:
+        // this.serviceUrl = serviceUrl;
         this._layers = {};
         this.initControls();
 
@@ -47,10 +57,35 @@ class Map extends OrbitControls {
         };
     }
 
+    static async build(x, y, z, size, center, camera, scene, container, serviceUrl) {
+        const modelData = await util.getMetadata(serviceUrl);
+
+        // do your async stuff here
+        // now instantiate and return a class
+        let map = new Map(x, y, z, size, center, camera, scene, container);
+        map._initDataLayers(modelData.mappedfeatures);
+        return map;
+    }
+
     get layers() {
         return this._layers;
     }
 
+    _initDataLayers(mappedFeatures) {
+        for (let i = 0; i < mappedFeatures.length; i++) {
+            let layerData = mappedFeatures[i];
+            let dxfLayer = new TinLayer({
+                featuregeom_id: layerData.featuregeom_id,
+                q: true,
+                type: "3dface",
+                name: layerData.legend_description,
+                description: "test",
+                color: layerData.color
+            });
+            this.addLayer(dxfLayer);
+        }
+    }
+
     _initControlPos() {
         //var test = document.getElementById("webgl");
 

src/js/core/utilities.js

@@ -107,6 +107,25 @@ export function extend(dest) {
 	return dest;
 }
 
+export async function getMetadata(serviceUrl) {
+	// const BBOXURL = '//geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=' + modelid;    
+	const response = await fetch(serviceUrl, {
+		method: 'GET',
+		mode: 'cors',
+		headers: {
+			'Content-Type': 'application/json'
+		}
+	});
+
+	if (response.ok) {
+		return response.json();
+	} else {
+		throw new Error("HTTP error, status = " + response.status);
+	}
+
+	// return await response.json();        
+}
+
 // @function create(proto: Object, properties?: Object): Object
 // Compatibility polyfill for [Object.create](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
 export var create = Object.create || (function () {

src/js/layer/GridLayer.js

@@ -307,7 +307,7 @@ export class GridLayer extends Layer {
 
         //neu
         // app.labels = app.controls.gridlayer.labels;
-        let scaleFactor = this.scale;
+        // let scaleFactor = this.scale;       
 
         // make a list of [label index, distance to camera]
         let idx_dist = [];
@@ -346,8 +346,8 @@ export class GridLayer extends Layer {
                 let proj = this.toScreenPosition(label.obj, label.pt, camera);
                 // set label position
                 labelDiv.style.display = "block";                
-                labelDiv.style.left = proj.x + 'px';
+                labelDiv.style.left = (proj.x - (labelDiv.offsetWidth / 2)) + "px";
-                labelDiv.style.top = proj.y + 'px';
+                labelDiv.style.top = (proj.y - (labelDiv.offsetHeight / 2)) + "px";
                 labelDiv.style.zIndex = i + 1;
                 let minFontSize = 10;
                 // set font size
@@ -368,9 +368,13 @@ export class GridLayer extends Layer {
         let vector = new Vector3();
         // calculate label position
         vector.copy(pt);
+        let scaleFactor = parseFloat(this.labelConnectorGroup.scale.z);
+        if (scaleFactor > 1) {
+            vector.z = vector.z * scaleFactor;
+        }
 
         // TODO: need to update this when resize window   
-        let container = document.getElementById("webgl");
+        let container = this._map.container; //document.getElementById("webgl");
         let widthHalf = 0.5 * container.clientWidth;
         let heightHalf = 0.5 * container.clientHeight;
 

src/js/layer/TinLayer.js

@@ -60,7 +60,7 @@ class TinLayer extends Layer {
 
         let geometry = new BufferGeometry();
         // let positions = new Float32BufferAttribute(this.vertices, 3);       
-        let posArray = await (this.points(this.geomId));
+        let posArray = await (this.points(this.featuregeom_id));
         // console.log(posArray);
         let positions = new Float32BufferAttribute(posArray, 3);
         geometry.setAttribute('position', positions);
@@ -69,7 +69,7 @@ class TinLayer extends Layer {
         //var indices = this.indices = new TypeArray(this.idx);
 
         // let indexArray = this.indices = new Uint16Array(this.idx);
-        let indexArray = await (this.edges(this.geomId));
+        let indexArray = await (this.edges(this.featuregeom_id));
         let indices = new Uint16BufferAttribute(indexArray, 1);//.setDynamic(true);
         geometry.setIndex(indices);
 

src/js/main.js

@@ -4,7 +4,6 @@ import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
 import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
 import { Scene } from 'three/src/scenes/Scene';
 import { Vector3 } from 'three/src/math/Vector3';
-import { TinLayer } from './layer/TinLayer';
 import { GridLayer } from './layer/GridLayer';
 // import { BoxLayer } from './layer/BoxLayer';
 import { DemLayer } from './layer/DemLayer';
@@ -58,11 +57,15 @@ class Application {
         this.mapIcon = document.querySelector('#menu-map-icon');
 
 
-        this.createScene();
+        // this.createScene();
+        // this.addEventListeners();
+    }
+    async build() {
+        await this.createScene();
         this.addEventListeners();
     }
 
-    createScene() {
+    async createScene() {
 
         var dirNode = document.getElementsByTagName("body")[0];
         if (browser.touch == true) {
@@ -157,7 +160,9 @@ class Application {
         // this.camera.lookAt(new Vector3(0, 0, 0));
 
         // create map 
-        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');
+        // 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=20');
+
+        let map = this.map = await Map.build(x, y, z, size, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=20');
         this.mapTitle = document.querySelector('#map-title');
         this.mapTitle.innerHTML += map.title;
         // this.map.minDistance =  size*0.75;
@@ -207,48 +212,6 @@ class Application {
         this.map.addLayer(demLayer);
         this.map.currentBasemap = demLayer;
 
-        let dxf170Layer = new TinLayer({
-            geomId: 170, q: true, type: "3dface", name: "DEM_EGDI", description: "test", color: "CE5364", "baseExtent": baseExtent
-        });
-        this.map.addLayer(dxf170Layer);
-        // this.map.currentBasemap = dxf170Layer;
-
-
-        let dxf171Layer = new TinLayer({
-            geomId: 171, q: true, type: "3dface", name: "Aderklaa_Untermiozän", description: "test", color: "4C9875"
-        });
-        this.map.addLayer(dxf171Layer);
-
-        let dxf172Layer = new TinLayer({
-            geomId: 172, q: true, type: "3dface", name: "Badenium", description: "test", color: "B288A4"
-        });
-        this.map.addLayer(dxf172Layer);
-
-        let dxf173Layer = new TinLayer({
-            geomId: 173, q: true, type: "3dface", name: "Frankenfels Lunz Decke", description: "test", color: "4C9875"
-        });
-        this.map.addLayer(dxf173Layer);
-
-        let dxf174Layer = new TinLayer({
-            geomId: 174, q: true, type: "3dface", name: "Göller Decke", description: "test", color: "B288A4"
-        });
-        this.map.addLayer(dxf174Layer);
-
-        let dxf175Layer = new TinLayer({
-            geomId: 175, q: true, type: "3dface", name: "Obere Gosau", description: "test", color: "4C9875"
-        });
-        this.map.addLayer(dxf175Layer);
-
-        let dxf176Layer = new TinLayer({
-            geomId: 176, q: true, type: "3dface", name: "Schneeberg Decke", description: "test", color: "B288A4"
-        });
-        this.map.addLayer(dxf176Layer);
-
-        let dxf177Layer = new TinLayer({
-            geomId: 177, q: true, type: "3dface", name: "Untere Gosau", description: "test", color: "FED012"
-        });
-        this.map.addLayer(dxf177Layer);
-
         this.gridlayer = new GridLayer({  center: center,  name: "coordinate grid", appWidth: this.width, appHeight: this.height });
         this.map.addLayer(this.gridlayer);
 
@@ -484,4 +447,5 @@ class Application {
 }
 
 let container = document.getElementById("webgl");
-new Application(container);
+let app = new Application(container);
+app.build();