geolba/GeotiefExplore
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Releases Wiki Activity

- correct coordinates control

Browse Source
This commit is contained in:
Arno Kaimbacher 2020-11-23 17:36:25 +01:00
parent 59ffcf6aa1
commit 6315458d51
4 changed files with 64 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/js/controls/Control.js
View File

@ -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(),

71
src/js/controls/Coordinates.js
View File

@ -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;
}
}

1
src/js/layer/TinLayer.js
View File

@ -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';

43
src/js/main.js
View File

@ -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);
}