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

- npm updates (package-lock.json)

Browse source 
- correct NortArrow functionality
This commit is contained in:
Arno Kaimbacher 2021-02-08 17:34:48 +01:00
parent 524b47344d
commit cc0100fa44
5 changed files with 154 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/js/controls/NorthArrow.css
View file

@ -3,9 +3,10 @@
bottom: 0;
left: 0;
border: none;
width: 120px;
height: 120px;
width: 100px;
height: 100px;
z-index: 9999999;
margin-bottom: 0;
}
/* label */
@ -40,8 +41,8 @@
user-select: none;
}
.blue-label {
color: #00bfff;
.gray-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;

153
src/js/controls/NorthArrow.js
View file

@ -8,13 +8,13 @@ import * as domEvent from '../core/domEvent';
import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
import { Scene } from 'three/src/scenes/Scene';
import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
import { BoxGeometry } from 'three/src/geometries/BoxGeometry';
import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial';
import { Mesh } from 'three/src/objects/Mesh';
// import { BoxGeometry } from 'three/src/geometries/BoxGeometry';
// import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial';
// import { Mesh } from 'three/src/objects/Mesh';
import './NorthArrow.css';
export class NortArrow extends Control {
export class NorthArrow extends Control {
renderer;
_mainMap;
@ -25,8 +25,8 @@ export class NortArrow extends Control {
labels = [];
options = {
position: 'bottomleft',
width: 120,
height: 120,
width: 100,
height: 100,
headLength: 1,
headWidth: 1,
};
@ -48,124 +48,78 @@ export class NortArrow extends Control {
domEvent.on(this._container, 'mousewheel', domEvent.stopPropagation);
let renderer = this.renderer = new WebGLRenderer({ alpha: true });
renderer.setSize(120, 120);
// renderer.setSize(container.innerWidth, container.innerHeight);
renderer.setSize(this.options.width, this.options.height);
container.appendChild(renderer.domElement);
this._scene = new Scene();
// this._camera = new PerspectiveCamera(60, 1, 0.1, 1000);
this._camera = new PerspectiveCamera(30, this.options.width / this.options.height, 0.1, 10000);
// this._camera.position.copy(map.camera.position);
// this._camera.up = map.camera.up;
this._camera = new PerspectiveCamera(30, this.options.width / this.options.height, 0.1, 10000);
this._camera.lookAt(map.center);
const camDirection = new Vector3(-0.5, -Math.SQRT1_2, 0.5);
// const camDirection = new Vector3(0, 0, 1);
const camOffset = camDirection.multiplyScalar(map.size * 2);
this._camera.position.copy(map.center);
this._camera.position.add(camOffset);
this._camera.far = map.size * 25;
this._camera.near = map.size * 0.1;
// this._camera.far = 1000 * 25;
// this._camera.near = 10;
this._camera.position.copy(map.center);
this._camera.position.add(camOffset);
this._camera.lookAt(map.center);
this._camera.up = this._map.camera.up;
this._camera.updateProjectionMatrix();
var A = this._map.center;
var B = this._map.camera.position
var C = new Vector3();
this.oldLength = A.distanceTo(B);
this._createArrow(this._scene);
// this._buildLabels();
this._buildLabels();
this.geometry = new BoxGeometry(10000, 10000, 10000);
this.material = new MeshBasicMaterial({
color: 800080
});
this.materials = [];
this.materials.push(this.material);
this.mesh = new Mesh(this.geometry, this.material);
// this.mesh.position.x = 4282010;
// this.mesh.position.y = 2302070;
// this.mesh.position.z = -13616.3;
this.mesh.position.set(map.center.x, map.center.y, map.center.z);
this._scene.add(this.mesh);
// this.geometry = new BoxGeometry(10000, 10000, 10000);
// this.material = new MeshBasicMaterial({
// color: 800080
// });
// this.materials = [];
// this.materials.push(this.material);
// this.mesh = new Mesh(this.geometry, this.material);
// this.mesh.position.set(map.center.x, map.center.y, map.center.z);
// this._scene.add(this.mesh);
return container;
}
animate() {
// this._camera.position.copy(this._map.camera.position);
// this._camera.up = this._map.camera.up;
// // // this._camera.lookAt(this._scene.position);
// this._camera.position.copy(this._map.camera.position);
// // this._camera.position.normalize().multiplyScalar(100);
// // this._camera.position.setLength(this.oldLength);
// // this._camera.up = this._map.camera.up;
// this._camera.lookAt(this._map.center);
// var A = this._map.center;
// var B = this._map.camera.position
// var C = new Vector3();
// var oldLength = A.distanceTo(B);
// var newLength = 1000;// oldLength + 100;
// if(oldLength > 0)
// {
// C.x = A.x + (B.x - A.x) * newLength / oldLength;
// C.y = A.y + (B.y - A.y) * newLength / oldLength;
// }
this._camera.position.copy(this._map.camera.position);
// this._camera.position.normalize().multiplyScalar(100);
// this._camera.position.setLength(this.oldLength);
this._camera.up = this._map.camera.up;
this._camera.lookAt(this._map.center);
// this._camera.lookAt(this._scene.position);
this._camera.position.sub(this._map.target);
this._camera.position.setLength(35);
this._camera.lookAt(this._scene.position);
// this._camera.near =10;
// this._camera.far = 1000 * 25;
// this._camera.lookAt(this._map.center);
// this._camera.updateProjectionMatrix();
this.renderer.render(this._scene, this._camera);
// this._updateInsetLabelPositions();
this._updateInsetLabelPositions();
}
_createArrow(app_scene) {
let from = this._map.center;//new Vector3(0, 0, 0);
_createArrow(app_scene, size = 6) {
let from = new Vector3(0, 0, 0);
let headLength = this.options.headLength;//1;
let headWidth = 1;//this.options.headWidth;//1;
let xTo = new Vector3(1, 0, 0);
// let xTo = new Vector3(from.x + 1, from.y, from.z);
// let xDirection = xTo.clone().sub(from);
this.objectGroup.add(new ArrowHelper(xTo, from, this._map.size* 0.5, 0xf00000, headLength, headWidth)); // Red = x
//(this.objectGroup.add(new ArrowHelper(xTo, from, this._map.size * 0.5, 0xf00000, headLength, headWidth)); // Red = x
this.objectGroup.add(new ArrowHelper(xTo, from, size, 0xff0000, headLength, headWidth)); // Red = x
let yTo = new Vector3(0, 1, 0);
let yTo = new Vector3(0, -1, 0);
// let yTo = new Vector3(from.x, from.y + 1, from.z);
// let yDirection = yTo.clone().sub(from);
this.objectGroup.add(new ArrowHelper(yTo, from, this._map.size * 0.5, 0x7cfc00, headLength, headWidth)); // Green = y
this.objectGroup.add(new ArrowHelper(yTo, from, size, 0x3ad29f, headLength, headWidth)); // Green = y
let zTo = new Vector3(0, 0, 1);//blue z
// let zTo = new Vector3(from.x, from.y, from.z + 1);
// let zDirection = zTo.clone().sub(from);
this.objectGroup.add(new ArrowHelper(zTo, from, this._map.size * 0.5, 0x00bfff, headLength, headWidth)); //8 is the length, Blue = z; 20 and 10 are head length and width
// 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(0, 0, -1);
// this.objectGroup.position.set(this._map.center.x, this._map.center.y, this._map.center.z);
this.objectGroup.add(new ArrowHelper(zTo, from, size, 0x6b716f, headLength, headWidth)); //8 is the length, Gray = z; 20 and 10 are head length and width
if (app_scene) {
app_scene.add(this.objectGroup);
@ -175,44 +129,41 @@ export class NortArrow extends Control {
_buildLabels() {
let f = [
{ a: ["X"], cl: "red-label", centroid: [[7, 0, 0]] },
{ a: ["Y"], cl: "green-label", centroid: [[0, 7, 0]] },
{ a: ["Z"], cl: "blue-label", centroid: [[0, 0, 7]] }
{ a: ["x"], cl: "red-label", centroid: [[8, 0, 0]] },
{ a: ["y"], cl: "green-label", centroid: [[0, -8, 0]] },
{ a: ["z"], cl: "gray-label", centroid: [[0, 0, 8]] }
];
var zFunc, getPointsFunc = function (f) { return f.centroid; };
let getPointsFunc = function (f) { return f.centroid; };
// create parent element for labels
var e = document.createElement("div");
this._container.appendChild(e);
e.style.display = (this.objectGroup.visible) ? "block" : "none";
let labelParentElement = e; //lable parent div for this layer
let labelParentElement = this.labelParentElement = e; //lable parent div for this layer
for (let i = 0, l = f.length; i < l; i++) {
var labelInfo = f[i];
let labelInfo = f[i];
// labelInfo.aElems = [];
// labelInfo.aObjs = [];
var text = labelInfo.a[0];
let text = labelInfo.a[0];
if (text === null || text === "") continue;
var classLabel = labelInfo.cl;
let classLabel = labelInfo.cl;
if (classLabel === undefined || classLabel === "") classLabel = "label";
//var horizontalShiftLabel = f.hs;
//if (horizontalShiftLabel === undefined || horizontalShiftLabel === "") horizontalShiftLabel = 0;
let pts = getPointsFunc(labelInfo);
for (let j = 0, m = pts.length; j < m; j++) {
let pt = pts[j];
// create div element for label
var e = document.createElement("div");
let e = document.createElement("div");
e.appendChild(document.createTextNode(text));
e.className = classLabel;// "label";
labelParentElement.appendChild(e);
var pt1 = new Vector3(pt[0], pt[1], pt[2]); // top
let pt1 = new Vector3(pt[0], pt[1], pt[2]); // top
this.labels.push({ labelDiv: e, pt: pt1 });
}
@ -223,10 +174,10 @@ export class NortArrow extends Control {
}
_updateInsetLabelPositions() {
var widthHalf = this.options.width / 2;
var heightHalf = this.options.height / 2;
let widthHalf = this.options.width / 2;
let heightHalf = this.options.height / 2;
// var autosize = appSettings.Options.label.autoSize;
// var camera = app.camera2;
let camera_pos = this._camera.position;
let target = new Vector3(0, 0, 0);
let c2t = target.sub(camera_pos);
@ -234,7 +185,7 @@ export class NortArrow extends Control {
let v = new Vector3();
// make a list of [label index, distance to camera]
var idx_dist = [];
let idx_dist = [];
for (let i = 0, l = this.labels.length; i < l; i++) {
idx_dist.push([i, camera_pos.distanceTo(this.labels[i].pt)]);
}
@ -246,7 +197,7 @@ export class NortArrow extends Control {
return 0;
});
let label, labelDiv, x, y, dist, fontSize;
let label, labelDiv, x, y;
// var minFontSize = appSettings.Options.label.minFontSize;
for (let i = 0, l = idx_dist.length; i < l; i++) {
label = this.labels[idx_dist[i][0]];

6
src/js/main.js
View file

@ -10,7 +10,7 @@ import { DemLayer } from './layer/DemLayer';
import { Map } from './core/Map';
import * as domEvent from './core/domEvent';
import { Coordinates } from './controls/Coordinates';
// import { NortArrow } from './controls/NorthArrow';
import { NorthArrow } from './controls/NorthArrow';
import { LayerControl } from './controls/LayerControl';
import { BasemapControl } from './controls/BasemapControl';
import { SliderControl } from './controls/SliderControl';
@ -183,7 +183,7 @@ class Application {
// this.animate();
// }, this);
}
// this.northArrow = new NortArrow({ headLength: 1, headWidth: 1 }).addTo(this.map);
this.northArrow = new NorthArrow({ headLength: 1, headWidth: 1 }).addTo(this.map);
let demLayer = new DemLayer({
q: 0, shading: true, type: 'dem', name: 'DEM Layer', color: 16382457, "baseExtent": baseExtent,
@ -313,7 +313,7 @@ class Application {
animate() {
this.renderer.render(this.scene, this.camera);
// this.northArrow.animate();
this.northArrow.animate();
this.gridlayer.animate();
}