- correct coordinates control

src/js/controls/Control.js

@@ -1,17 +1,22 @@
 // import { Class } from '../core/Class';
 import * as util from '../core/utilities';
 // import * as dom from '../core/domUtil';
+import { EventEmitter } from '../core/EventEmitter';
+
 
 // export var Control = Class.extend({
-class Control {
+class Control extends EventEmitter {
 
     // @section
     // @aka Control options
     options = {
         position: 'topright',
     };
+    _map;
+    _container;
 
     constructor(defaults) {
+        super();
         if (!(this instanceof Control)) {
             throw new TypeError("Control constructor cannot be called as a function.");
         }
@@ -28,6 +33,10 @@ class Control {
         return this._container;
     }
      
+    // abstract onRemove(map) : void;
+
+    // abstract onAdd(map) : HTMLElement;
+
     addTo(map) {
         this._map = map;
 
@@ -49,6 +58,7 @@ class Control {
         return this;
     }
     
+
     removeFrom(map) {
         var pos = this.getPosition(),
             corner = map._controlCorners[pos];

src/js/controls/Coordinates.js

@@ -3,6 +3,7 @@ import * as dom from '../core/domUtil';
 import { Vector3 } from 'three/src/math/Vector3';
 import proj4 from 'proj4/dist/proj4';
 import * as util from '../core/utilities';
+import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
 
 class Coordinates extends Control {
 
@@ -14,9 +15,11 @@ class Coordinates extends Control {
         numDigits: 5,
         lngFormatter: undefined,
         latFormatter: undefined,
-        prefix: ""
+        prefix: "",
+        camera: new PerspectiveCamera()
     };
-    map = {};
+    map;
+    visible = false;
 
     constructor(options) {
         super(options);
@@ -24,33 +27,24 @@ class Coordinates extends Control {
         util.setOptions(this, options);
     }
     // get options() {
-    //     return util.extend(this._options, super._options);
+    //     return this.#options;
     // }
 
     // set options(defaults) {
-    //     this._options = util.extend(this._options, defaults);;
+    //     this.#options = util.extend(this.#options, defaults);
     // }
     // set options(defaults) {
-    //     this._options = value;
+    //     this.#options = defaults;
     // }
 
     onAdd(map) {
-        proj4.defs([
+        proj4.defs("EPSG:3034", "+proj=lcc +lat_1=35 +lat_2=65 +lat_0=52 +lon_0=10 +x_0=4000000 +y_0=2800000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
-            [
+
-            'EPSG:4326',
-            '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees'],
-            [
-            'EPSG:3034',
-            '+proj=lcc +lat_1=35 +lat_2=65 +lat_0=52 +lon_0=10 +x_0=4000000 +y_0=2800000 +ellps=GRS80 +units=m +no_defs'
-            ]
-            ]);
         this.map = map;
-        //this._container = L.DomUtil.create('div', 'gba-control-coordinates');
+        let container = this._container = dom.createDom("div", { "class": "gba-control-coordinates" });
-        this._container = dom.createDom("div", { "class": "gba-control-coordinates" });
+        this.visible = false;      
-        //map.on('mousemove', this._onMouseMove, this);
         map.addListener('mouse-move', this._onMouseMove, this);
-        //this._container.innerHTML = this.options.emptyString;
+        return container;
-        return this._container;
     }
 
     onRemove(map) {
@@ -58,34 +52,25 @@ class Coordinates extends Control {
     }
 
     _onMouseMove(event) {
-        // var canvasOffset = $(this._map.domElement).offset();
-        // let rect = this._map.domElement.getBoundingClientRect();
         let canvasOffset = this._getOffset(this.map.domElement);
-        let offsetX = event.clientX - canvasOffset.left;
+        let xClickedOnCanvas = event.clientX - canvasOffset.left;
-        let offsetY = event.clientY - canvasOffset.top;
+        let yClickedonCanvas = event.clientY - canvasOffset.top;
         let width = this._map.domElement.clientWidth;
         let height = this._map.domElement.clientHeight;
 
-        let x = (offsetX / width) * 2 - 1;
+        let x = (xClickedOnCanvas / width) * 2 - 1;
-        let y = -(offsetY / height) * 2 + 1;
+        let y = -(yClickedonCanvas / height) * 2 + 1;
-        let vector = new Vector3(x, y, 1);
+        let mouse = new Vector3(x, y);
-        vector.unproject(this.options.camera);
+        mouse.unproject(this.options.camera);
-        //var lng = this.options.lngFormatter ? this.options.lngFormatter(e.latlng.lng) : L.Util.formatNum(e.latlng.lng, this.options.numDigits);
+        // vector.sub(this.options.camera.position);
-        //var lat = this.options.latFormatter ? this.options.latFormatter(e.latlng.lat) : L.Util.formatNum(e.latlng.lat, this.options.numDigits);
+        // vector.normalize();
-        //var value = this.options.lngFirst ? lng + this.options.separator + lat : lat + this.options.separator + lng;
+        this.emit('onPoint', mouse);
-        //var prefixAndValue = this.options.prefix + ' ' + value;
 
-        // clicked coordinates: skalierung wieder wegrechnen:
-        let pt = vector; //this.options.dataservice.toMapCoordinates(vector.x, vector.y, 1);
-        // let dest = new Proj4js.Proj("EPSG:4326");
-        // let source = new Proj4js.Proj(this.options.dataservice.crs);
         let dest = new proj4.Proj("EPSG:4326");
         let source = new proj4.Proj("EPSG:3034");
-        let minPoint = { x: pt.x, y: pt.y, spatialReference: { wkid: 3034 } };
+        let point84 = proj4.transform(source, dest, mouse);
-        let point84 = proj4.transform(source, dest, minPoint);
         let koordx = this._dec2sex(point84.x, 'X');
         let koordy = this._dec2sex(point84.y, 'y');        
-        //document.getElementById("info").innerHTML = "LON: " + koordx + ", " + "LAT: " + koordy;
         this._container.innerHTML = "LON: " + koordx + ", " + "LAT: " + koordy;
     }
 
@@ -108,14 +93,12 @@ class Coordinates extends Control {
         let degr = Math.floor(plus);
         let minu = Math.floor(60 * (plus - degr));
         let sec = Math.floor(60 * (60 * (plus - degr) - minu));
-        let secStr = "";
         let compass = "?";
-        let minuStr = "";
         if (minu < 10) {
-            minuStr = "0" + minu;
+            minu = "0" + minu.toString();;
         }
         if (sec < 10) {
-            secStr = "0" + sec;
+            sec = "0" + sec.toString();
         }
         if (dir === 'y') {
             compass = dec < 0 ? "S" : "N";
@@ -123,7 +106,7 @@ class Coordinates extends Control {
         else {
             compass = dec < 0 ? "W" : "E";
         }
-        return "" + degr + "° " + minuStr + "' " + secStr + '" ' + compass;
+        return "" + degr + "° " + minu + "' " + sec + '" ' + compass;
     }
 
 }

src/js/layer/TinLayer.js

@@ -1,7 +1,6 @@
 // import { Group } from 'three/src/objects/Group';
 import { BufferGeometry } from 'three/src/core/BufferGeometry';
 import { Float32BufferAttribute, Uint16BufferAttribute } from 'three/src/core/BufferAttribute';
-import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial.js';
 import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial';
 import { DoubleSide } from 'three/src/constants'
 import { Mesh } from 'three/src/objects/Mesh';

src/js/main.js

@@ -7,7 +7,10 @@ import { Vector3 } from 'three/src/math/Vector3';
 import { TinLayer } from './layer/TinLayer';
 import { Map } from './core/Map';
 import * as domEvent from './core/domEvent';
-// import { Coordinates } from './controls/Coordinates';
+import { Coordinates } from './controls/Coordinates';
+import { Mesh } from 'three/src/objects/Mesh';
+import { SphereGeometry } from 'three/src/geometries/SphereGeometry';
+import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
 
 import '../css/page.css'; /* style loader will import it */
 
@@ -35,6 +38,12 @@ class Application {
 
     createScene() {
 
+        let opt = { r: 200, c:   0x38eeff, o: 0.8 };
+        this.queryMarker = new Mesh(new SphereGeometry(opt.r),
+            new MeshLambertMaterial({ color: opt.c, opacity: opt.o, transparent: false }));
+           
+        this.queryMarker.visible = true;
+        this.queryMarker.position.set(4282010, 2302070, -13616.3);
         /* Renderer */
         // var bgcolor = 0xfdfdfd;
         let bgcolor = 0xfdfdfd;
@@ -58,6 +67,7 @@ class Application {
         //app.scene.autoUpdate = false;
         //// show axes in the screen
         //app.scene.add(new THREE.AxisHelper(100));
+        this.scene.add(this.queryMarker);
 
         /* Camera */
         var angle = 45;
@@ -65,12 +75,10 @@ class Application {
         var near = 0.1; //This is the distance at which the camera will start rendering scene objects
         var far = 2000; //Anything beyond this distance will not be rendered                
         this.camera = new PerspectiveCamera(angle, aspect, near, far);      
-        //this.camera.position.z = 20;
         // this.camera.position.set(0, -0.1, 150);
-        // this.camera.lookAt(new THREE.Vector3(0, 0, 0));   
+        // this.camera.lookAt(new Vector3(0, 0, 0));
 
         this.camera = new PerspectiveCamera(30, this.width / this.height, 100, 100000);        
-        this.camera.up.set(0, 0, 1);
 
         const dirLight = new DirectionalLight(0xffffff, 1);
         dirLight.position.set(585000 + 10000, 6135000 + 10000, -500 + 5000);
@@ -89,13 +97,17 @@ class Application {
         this.camera.far = size * 25;
         this.camera.updateProjectionMatrix();
 
-
+        // create map
-        // this.controls = new OrbitControls(this.camera, this.scene, this.renderer.domElement);
         this.map = new Map(size, center, this.camera, this.scene, this.renderer.domElement, this.container);
         // this.map.target = center;
         // this.map.minDistance =  size*0.75;
         // this.map.maxDistance = size*15;
-        // let coordinates = new Coordinates({ camera: this.camera, crs: "EPSG:3034" }).addTo(this.map); 
+        let coordinates = new Coordinates({ camera: this.camera, crs: "EPSG:3034" }).addTo(this.map);
+        // coordinates.addListener('onPoint', (vector) => {           
+        //     this.queryMarker.position.set(vector.x, vector.y, vector.z);       
+        //     this.queryMarker.updateMatrixWorld();
+        //     this.animate();
+        // }, this);
 
         let dxf134Layer = new TinLayer({
             geomId: 134, q: true, type: "3dface", name: "South Alpine Superunit", description: "test", color: "907A5C"
@@ -129,9 +141,6 @@ class Application {
 
         domEvent.on(window, 'resize', this.onWindowResize, this);
         domEvent.on(window, 'keydown', this.keydown, this);
-
-
-        // util.setLoading("webgl");  
         this.start();
     }