103 lines
4.3 KiB
TypeScript
103 lines
4.3 KiB
TypeScript
import "leaflet.polylinemeasure";
|
|
import "leaflet.polylinemeasure/Leaflet.PolylineMeasure.css";
|
|
import { useEffect, useRef } from "react";
|
|
import { useMap } from "react-leaflet";
|
|
import L from "leaflet";
|
|
|
|
export const DistanceLayer = () => {
|
|
const map = useMap();
|
|
const added = useRef(false);
|
|
useEffect(() => {
|
|
if (added.current) return;
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(L.control as any)
|
|
.polylineMeasure({
|
|
position: "topleft",
|
|
unit: "metres", // Show imperial or metric distances. Values: 'metres', 'landmiles', 'nauticalmiles'
|
|
clearMeasurementsOnStop: true, // Clear all the measurements when the control is unselected
|
|
showBearings: true, // Whether bearings are displayed within the tooltips
|
|
bearingTextIn: "In", // language dependend label for inbound bearings
|
|
bearingTextOut: "Out", // language dependend label for outbound bearings
|
|
tooltipTextFinish: "Klicken zum <b>Beenden</b><br>",
|
|
tooltipTextDelete: "SHIFT+Click zum <b>Löschen</b>",
|
|
tooltipTextMove: "Klicken und ziehen zum <b>Verschieben</b><br>",
|
|
tooltipTextResume: "<br>CTRL+Click zum <b>Forsetzen</b>",
|
|
tooltipTextAdd: "CTRL+Click zum <b>Hinzufügen</b>",
|
|
// language dependend labels for point's tooltips
|
|
measureControlTitleOn: "Messung starten", // Title for the control going to be switched on
|
|
measureControlTitleOff: "Messung beenden", // Title for the control going to be switched off
|
|
measureControlLabel: "📏", // Label of the Measure control (maybe a unicode symbol)
|
|
measureControlClasses: ["pointer"], // Classes to apply to the Measure control
|
|
showClearControl: true, // Show a control to clear all the measurements
|
|
clearControlTitle: "Messung löschen", // Title text to show on the clear measurements control button
|
|
clearControlLabel: "×", // Label of the Clear control (maybe a unicode symbol)
|
|
clearControlClasses: ["pointer"], // Classes to apply to clear control button
|
|
unitControlClasses: ["pointer"],
|
|
showUnitControl: true, // Show a control to change the units of measurements
|
|
unitControlTitle: {
|
|
// Title texts to show on the Unit Control
|
|
text: "Einheit ändern",
|
|
kilometres: "Kilometer",
|
|
nauticalmiles: "Nautische Meilen",
|
|
},
|
|
unitControlLabel: {
|
|
// Unit symbols to show in the Unit Control and measurement labels
|
|
metres: "m",
|
|
kilometres: "km",
|
|
feet: "ft",
|
|
landmiles: "mi",
|
|
nauticalmiles: "nm",
|
|
},
|
|
tempLine: {
|
|
// Styling settings for the temporary dashed line
|
|
color: "#00f", // Dashed line color
|
|
weight: 2, // Dashed line weight
|
|
},
|
|
fixedLine: {
|
|
// Styling for the solid line
|
|
color: "#006", // Solid line color
|
|
weight: 2, // Solid line weight
|
|
},
|
|
arrow: {
|
|
// Styling of the midway arrow
|
|
color: "#000", // Color of the arrow
|
|
},
|
|
startCircle: {
|
|
// Style settings for circle marker indicating the starting point of the polyline
|
|
color: "#000000", // Color of the border of the circle
|
|
weight: 1, // Weight of the circle
|
|
fillColor: "#000000", // Fill color of the circle
|
|
fillOpacity: 1, // Fill opacity of the circle
|
|
radius: 3, // Radius of the circle
|
|
},
|
|
intermedCircle: {
|
|
// Style settings for all circle markers between startCircle and endCircle
|
|
color: "#000", // Color of the border of the circle
|
|
weight: 1, // Weight of the circle
|
|
fillColor: "#000000", // Fill color of the circle
|
|
fillOpacity: 1, // Fill opacity of the circle
|
|
radius: 3, // Radius of the circle
|
|
},
|
|
currentCircle: {
|
|
// Style settings for circle marker indicating the latest point of the polyline during drawing a line
|
|
color: "#000000", // Color of the border of the circle
|
|
weight: 1, // Weight of the circle
|
|
fillColor: "#FFFFFF", // Fill color of the circle
|
|
fillOpacity: 1, // Fill opacity of the circle
|
|
radius: 3, // Radius of the circle
|
|
},
|
|
endCircle: {
|
|
// Style settings for circle marker indicating the last point of the polyline
|
|
color: "#000", // Color of the border of the circle
|
|
weight: 1, // Weight of the circle
|
|
fillColor: "#ffffff", // Fill color of the circle
|
|
fillOpacity: 1, // Fill opacity of the circle
|
|
radius: 3, // Radius of the circle
|
|
},
|
|
})
|
|
.addTo(map);
|
|
added.current = true;
|
|
}, [map]);
|
|
return null;
|
|
};
|