Can now get LatLng, MGRS and UTM location data

This commit is contained in:
PeekabooSteam
2023-10-08 16:44:55 +01:00
parent 3794207d97
commit bedd21522a
11 changed files with 406 additions and 63 deletions

View File

@@ -202,4 +202,10 @@ export enum DataIndexes {
isLeader,
operateAs,
endOfData = 255
};
};
export const MGRS_PRECISION_10KM = 2;
export const MGRS_PRECISION_1KM = 3;
export const MGRS_PRECISION_100M = 4;
export const MGRS_PRECISION_10M = 5;
export const MGRS_PRECISION_1M = 6;

View File

@@ -10,6 +10,9 @@ import { Dropdown } from "../controls/dropdown";
import { navyUnitDatabase } from "../unit/databases/navyunitdatabase";
import { DateAndTime, UnitBlueprint } from "../interfaces";
// comment
const usng = require( "usng.js" );
export function bearing(lat1: number, lon1: number, lat2: number, lon2: number) {
const φ1 = deg2rad(lat1); // φ, λ in radians
const φ2 = deg2rad(lat2);
@@ -158,6 +161,49 @@ export function editDistance(s1: string, s2: string) {
return costs[s2.length];
}
export type MGRS = {
bandLetter: string,
columnLetter: string,
easting: string,
groups: string[],
northing: string,
precision: number,
rowLetter: string,
string: string,
zoneNumber: string
}
export function latLngToMGRS( lat:number, lng:number, precision:number = 4 ): MGRS | false {
if ( precision < 0 || precision > 6 ) {
console.error( "latLngToMGRS: precision must be a number >= 0 and <= 6. Given precision: " + precision );
return false;
}
const mgrs = new usng.Converter().LLtoMGRS( lat, lng, precision );
const match = mgrs.match( new RegExp( `^(\\d{2})([A-Z])([A-Z])([A-Z])(\\d+)$` ) );
const easting = match[5].substr(0,match[5].length/2);
const northing = match[5].substr(match[5].length/2);
let output:MGRS = {
bandLetter: match[2],
columnLetter: match[3],
groups: [ match[1] + match[2], match[3] + match[4], easting, northing ],
easting: easting,
northing: northing,
precision: precision,
rowLetter: match[4],
string: match[0],
zoneNumber: match[1]
}
return output;
}
export function latLngToUTM( lat:number, lng:number ) {
return new usng.Converter().LLtoUTM( lat, lng );
}
export function latLngToMercator(lat: number, lng: number): {x: number, y: number} {
var rMajor = 6378137; //Equatorial Radius, WGS84
var shift = Math.PI * rMajor;

View File

@@ -1,16 +1,22 @@
import { Icon, LatLng, Marker, Polyline } from "leaflet";
import { getApp } from "..";
import { distance, bearing, zeroAppend, mToNm, nmToFt, mToFt } from "../other/utils";
import { distance, bearing, zeroAppend, mToNm, nmToFt, mToFt, latLngToMGRS, MGRS, latLngToUTM, latLngToMercator } from "../other/utils";
import { Unit } from "../unit/unit";
import { Panel } from "./panel";
import formatcoords from "formatcoords";
import { MGRS_PRECISION_100M, MGRS_PRECISION_10KM, MGRS_PRECISION_10M, MGRS_PRECISION_1KM, MGRS_PRECISION_1M } from "../constants/constants";
export class MouseInfoPanel extends Panel {
#coordinatesElement:HTMLElement;
#locationSystems = [ "LatLng", "MGRS", "UTM" ];
#measureMarker: Marker;
#measurePoint: LatLng | null = null;
#measureIcon: Icon;
#measureLine: Polyline = new Polyline([], { color: '#2d3e50', weight: 3, opacity: 0.5, smoothFactor: 1, interactive: false });
#measureBox: HTMLElement;
#MGRSPrecisions = [ MGRS_PRECISION_10KM, MGRS_PRECISION_1KM, MGRS_PRECISION_100M, MGRS_PRECISION_10M, MGRS_PRECISION_1M ];
#selectedMGRSPrecisionIndex = 3;
#selectedLocationSystemIndex = 0;
#elevationRequest: XMLHttpRequest | null = null;
constructor(ID: string) {
@@ -30,6 +36,43 @@ export class MouseInfoPanel extends Panel {
document.addEventListener('unitsSelection', (e: CustomEvent<Unit[]>) => this.#update());
document.addEventListener('clearSelection', () => this.#update());
this.#coordinatesElement = <HTMLElement>this.getElement().querySelector( '#coordinates-tool' );
this.#coordinatesElement.addEventListener( "click", ( ev:MouseEvent ) => {
this.#changeLocationSystem();
});
getApp().getShortcutManager().addKeyboardShortcut( "switchMapLocationSystem", {
"callback": ( ev:KeyboardEvent ) => {
this.#changeLocationSystem();
},
"code": "KeyZ"
}).addKeyboardShortcut( "decreaseMGRSPrecision", {
"callback": ( ev:KeyboardEvent ) => {
if ( this.#getLocationSystem() !== "MGRS" ) {
return;
}
if ( this.#selectedMGRSPrecisionIndex > 0 ) {
this.#selectedMGRSPrecisionIndex--;
this.#update();
}
},
"code": "Comma"
}).addKeyboardShortcut( "increaseMGRSPrecision", {
"callback": ( ev:KeyboardEvent ) => {
if ( this.#getLocationSystem() !== "MGRS" ) {
return;
}
if ( this.#selectedMGRSPrecisionIndex < this.#MGRSPrecisions.length - 1 ) {
this.#selectedMGRSPrecisionIndex++;
this.#update();
}
},
"code": "Period"
});
}
#update() {
@@ -44,7 +87,8 @@ export class MouseInfoPanel extends Panel {
this.#drawMeasure("ref-measure-position", "measure-position", this.#measurePoint, mousePosition);
this.#drawMeasure("ref-unit-position", "unit-position", selectedUnitPosition, mousePosition);
this.getElement().querySelector(`#measuring-tool`)?.classList.toggle("hide", this.#measurePoint === null && selectedUnitPosition === null);
this.getElement().querySelector(`#measuring-tool`)?.classList.toggle("hide", this.#measurePoint === null);
this.getElement().querySelector(`#unit-bullseye-tool`)?.classList.toggle("hide", selectedUnitPosition === null);
var bullseyes = getApp().getMissionManager().getBullseyes();
for (let idx in bullseyes)
@@ -53,8 +97,18 @@ export class MouseInfoPanel extends Panel {
/* Draw coordinates */
var coords = formatcoords(mousePosition.lat, mousePosition.lng);
var coordString = coords.format('XDDMMss', {decimalPlaces: 4});
this.#drawCoordinates("ref-mouse-position-latitude", "mouse-position-latitude", coordString.split(" ")[0]);
this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", coordString.split(" ")[1]);
if ( this.#getLocationSystem() === "MGRS" ) {
const mgrs = <MGRS>latLngToMGRS( mousePosition.lat, mousePosition.lng, this.#MGRSPrecisions[ this.#selectedMGRSPrecisionIndex ] );
this.#drawCoordinates("ref-mouse-position-mgrs", "mouse-position-mgrs", "M"+mgrs.groups.join(" ") );
} else if ( this.#getLocationSystem() === "UTM" ) {
const utm = latLngToUTM( mousePosition.lat, mousePosition.lng );
this.#drawCoordinates("ref-mouse-position-utm-northing", "mouse-position-utm-northing", "N"+utm.northing);
this.#drawCoordinates("ref-mouse-position-utm-easting", "mouse-position-utm-easting", "E"+utm.easting);
} else {
this.#drawCoordinates("ref-mouse-position-latitude", "mouse-position-latitude", coordString.split(" ")[0]);
this.#drawCoordinates("ref-mouse-position-longitude", "mouse-position-longitude", coordString.split(" ")[1]);
}
/* Get the ground elevation from the server endpoint */
if (this.#elevationRequest == null) {
@@ -186,8 +240,8 @@ export class MouseInfoPanel extends Panel {
const el = this.getElement().querySelector(`#${textID}`) as HTMLElement;
const img = this.getElement().querySelector(`#${imgID}`) as HTMLElement;
if (img && el) {
el.dataset.value = value.substring(1);
img.dataset.label = value[0];
el.innerText = value.substring(1);
img.innerText = value[0];
}
}
@@ -209,4 +263,24 @@ export class MouseInfoPanel extends Panel {
return [zeroAppend(strVal, 3, decimal), unit];
}
#changeLocationSystem() {
if ( this.#selectedLocationSystemIndex < this.#locationSystems.length - 1 ) {
this.#selectedLocationSystemIndex++;
} else {
this.#selectedLocationSystemIndex = 0;
}
this.#coordinatesElement.setAttribute( "data-location-system", this.#getLocationSystem() );
this.#update();
}
#getLocationSystem() {
const x = this.#locationSystems;
const y = this.#selectedLocationSystemIndex;
const z = this.#locationSystems[ this.#selectedLocationSystemIndex ];
return this.#locationSystems[this.#selectedLocationSystemIndex];
}
}