weyne/dcs_liberation
1
0
Fork 0
mirror of https://github.com/dcs-liberation/dcs_liberation.git synced 2025-11-10 14:22:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add the ruler to the new map.

Browse Source 
https://github.com/dcs-liberation/dcs_liberation/issues/2158
This commit is contained in:
Raffson 2022-06-12 22:15:26 +02:00 committed by GitHub
parent 6557864697
commit 70e5c578ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 101 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
client/package-lock.json generated
View File

@ -22,6 +22,7 @@
"electron-window-state": "^5.0.3",
"esri-leaflet": "^3.0.7",
"leaflet": "^1.7.1",
"leaflet-ruler": "^1.0.0",
"milsymbol": "^2.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
@ -9491,20 +9492,6 @@
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true
},
"node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@ -13116,6 +13103,14 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
},
"node_modules/leaflet-ruler": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/leaflet-ruler/-/leaflet-ruler-1.0.0.tgz",
"integrity": "sha512-5Ti99czL+hhcd5rMmT5JBkDvzErPUM+ogJbP6NDzJEMK5vCGqS9/1BrMpVeCcCaxViSWLPf9qcXRGcGO85UCZA==",
"peerDependencies": {
"leaflet": "^1.0.0"
}
},
"node_modules/leaflet.heat": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz",
@ -27420,13 +27415,6 @@
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true
},
"fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"optional": true
},
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@ -30121,6 +30109,12 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
},
"leaflet-ruler": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/leaflet-ruler/-/leaflet-ruler-1.0.0.tgz",
"integrity": "sha512-5Ti99czL+hhcd5rMmT5JBkDvzErPUM+ogJbP6NDzJEMK5vCGqS9/1BrMpVeCcCaxViSWLPf9qcXRGcGO85UCZA==",
"requires": {}
},
"leaflet.heat": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz",

1
client/package.json
View File

@ -19,6 +19,7 @@
"electron-window-state": "^5.0.3",
"esri-leaflet": "^3.0.7",
"leaflet": "^1.7.1",
"leaflet-ruler": "^1.0.0",
"milsymbol": "^2.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",

2
client/src/components/liberationmap/LiberationMap.tsx
View File

@ -18,6 +18,7 @@ import { useEffect, useRef } from "react";
import { BasemapLayer } from "react-esri-leaflet";
import { LayersControl, MapContainer, ScaleControl } from "react-leaflet";
import Iadsnetworklayer from "../iadsnetworklayer";
import LeafletRuler from "../ruler/Ruler";
export default function LiberationMap() {
const map = useRef<Map>();
@ -32,6 +33,7 @@ export default function LiberationMap() {
whenCreated={(mapInstance) => (map.current = mapInstance)}
>
<ScaleControl />
<LeafletRuler />
<LayersControl collapsed={false}>
<LayersControl.BaseLayer name="Imagery Clarity" checked>
<BasemapLayer name="ImageryClarity" />

9
client/src/components/ruler/Ruler.css Normal file
View File

@ -0,0 +1,9 @@
@import "~leaflet-ruler/src/leaflet-ruler.css";
.result-tooltip{
border-color: #435466;
}
.moving-tooltip{
border-color: #435466;
}

38
client/src/components/ruler/Ruler.tsx Normal file
View File

@ -0,0 +1,38 @@
/// <reference path="./leaflet-ruler.d.ts" />
import { useEffect } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";
import "leaflet-ruler";
import "./Ruler.css"
export default function LeafletRuler() {
const map = useMap();
useEffect(() => {
if (!map) return;
var options = {
position: 'topleft',
circleMarker: { // Leaflet circle marker options for points used in this plugin
color: 'yellow',
radius: 2
},
lineStyle: { // Leaflet polyline options for lines used in this plugin
color: 'yellow',
dashArray: '1,6'
},
lengthUnit: {
factor: 0.539956803, // from km to nm
display: 'NM',
decimal: 2,
label: "Distance",
}
};
if( L.control.hasOwnProperty('ruler') )
{
L.control.ruler(options).addTo(map);
}
}, [map]);
return null;
}

1
client/src/components/ruler/index.ts Normal file
View File

@ -0,0 +1 @@
export {default} from "./Ruler";

35
client/src/components/ruler/leaflet-ruler.d.ts vendored Normal file
View File

@ -0,0 +1,35 @@
interface CircleMarker {
color: string;
radius: number;
}
interface LineStyle {
color: string;
dashArray: string;
}
interface LengthUnit {
display: string;
decimal: number;
factor: number?;
label: string;
}
interface AngleUnit {
display: string;
decimal: number;
factor: number?;
label: string;
}
interface RulerOptions {
position?: string;
circleMarker?: CircleMarker;
lineStyle?: LineStyle;
lengthUnit?: LengthUnit;
angleUnit?: AngleUnit;
}
declare namespace L.control {
function ruler (options: RulerOptions) : L.Control {}
}