diff --git a/src/js/controls/Control.js b/src/js/controls/Control.js index 1c6062e..ca3d497 100644 --- a/src/js/controls/Control.js +++ b/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."); } @@ -27,6 +32,10 @@ class Control { getContainer() { return this._container; } + + // abstract onRemove(map) : void; + + // abstract onAdd(map) : HTMLElement; addTo(map) { this._map = map; @@ -48,6 +57,7 @@ class Control { return this; } + removeFrom(map) { var pos = this.getPosition(), diff --git a/src/js/controls/Coordinates.js b/src/js/controls/Coordinates.js index 400de61..36072b3 100644 --- a/src/js/controls/Coordinates.js +++ b/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([ - [ - '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' - ] - ]); + 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"); + this.map = map; - //this._container = L.DomUtil.create('div', 'gba-control-coordinates'); - this._container = dom.createDom("div", { "class": "gba-control-coordinates" }); - //map.on('mousemove', this._onMouseMove, this); + let container = this._container = dom.createDom("div", { "class": "gba-control-coordinates" }); + this.visible = false; map.addListener('mouse-move', this._onMouseMove, this); - //this._container.innerHTML = this.options.emptyString; - return this._container; + return 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 offsetY = event.clientY - canvasOffset.top; + let xClickedOnCanvas = event.clientX - canvasOffset.left; + 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 y = -(offsetY / height) * 2 + 1; - let vector = new Vector3(x, y, 1); - vector.unproject(this.options.camera); - //var lng = this.options.lngFormatter ? this.options.lngFormatter(e.latlng.lng) : L.Util.formatNum(e.latlng.lng, this.options.numDigits); - //var lat = this.options.latFormatter ? this.options.latFormatter(e.latlng.lat) : L.Util.formatNum(e.latlng.lat, this.options.numDigits); - //var value = this.options.lngFirst ? lng + this.options.separator + lat : lat + this.options.separator + lng; - //var prefixAndValue = this.options.prefix + ' ' + value; + let x = (xClickedOnCanvas / width) * 2 - 1; + let y = -(yClickedonCanvas / height) * 2 + 1; + let mouse = new Vector3(x, y); + mouse.unproject(this.options.camera); + // vector.sub(this.options.camera.position); + // vector.normalize(); + this.emit('onPoint', mouse); - // 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, minPoint); + let point84 = proj4.transform(source, dest, mouse); let koordx = this._dec2sex(point84.x, 'X'); - let koordy = this._dec2sex(point84.y, 'y'); - //document.getElementById("info").innerHTML = "LON: " + koordx + ", " + "LAT: " + koordy; + let koordy = this._dec2sex(point84.y, 'y'); 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; } } diff --git a/src/js/layer/TinLayer.js b/src/js/layer/TinLayer.js index c7e1166..c996f96 100644 --- a/src/js/layer/TinLayer.js +++ b/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'; diff --git a/src/js/main.js b/src/js/main.js index b5a538e..66259db 100644 --- a/src/js/main.js +++ b/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,11 +38,17 @@ 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; this.renderer = new WebGLRenderer({ alpha: true, antialias: true }); - this.renderer.setPixelRatio( window.devicePixelRatio ); + this.renderer.setPixelRatio(window.devicePixelRatio); // this.renderer.setSize(window.innerWidth, window.innerHeight); // document.body.appendChild(this.renderer.domElement); this.renderer.setSize(this.width, this.height); @@ -58,20 +67,19 @@ 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; var aspect = this.width / this.height; 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 = new PerspectiveCamera(angle, aspect, near, far); + // this.camera.position.set(0, -0.1, 150); + // this.camera.lookAt(new Vector3(0, 0, 0)); + + this.camera = new PerspectiveCamera(30, this.width / this.height, 100, 100000); - 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); this.camera.add(dirLight); @@ -89,13 +97,17 @@ class Application { this.camera.far = size * 25; this.camera.updateProjectionMatrix(); - - // 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); + // create map + 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(); } @@ -151,7 +160,7 @@ class Application { if (wireframe === this.wireframeMode) return; for (var key in this.map._layers) { - let layer = this.map._layers[key]; + let layer = this.map._layers[key]; layer.setWireframeMode(wireframe); }