|
|
|
import React, { useState, useRef, useMemo } from "react";
|
|
|
|
|
|
|
|
import {
|
|
|
|
MapContainer,
|
|
|
|
TileLayer,
|
|
|
|
FeatureGroup,
|
|
|
|
Rectangle,
|
|
|
|
useMap,
|
|
|
|
LayerGroup,
|
|
|
|
ZoomControl,
|
|
|
|
ScaleControl,
|
|
|
|
} from "react-leaflet";
|
|
|
|
|
|
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
import "leaflet-draw/dist/leaflet.draw.css";
|
|
|
|
|
|
|
|
import { EditControl } from "react-leaflet-draw";
|
|
|
|
|
|
|
|
import "leaflet-draw";
|
|
|
|
import "./index.scss";
|
|
|
|
|
|
|
|
import grid from "../../assets/images/grid.png";
|
|
|
|
|
|
|
|
import * as L from "leaflet";
|
|
|
|
|
|
|
|
L.drawLocal = {
|
|
|
|
draw: {
|
|
|
|
toolbar: {
|
|
|
|
actions: {
|
|
|
|
title: "لغو کردن رسم",
|
|
|
|
text: "لغو",
|
|
|
|
},
|
|
|
|
finish: {
|
|
|
|
title: "پایان رسم",
|
|
|
|
text: "پایان رسم",
|
|
|
|
},
|
|
|
|
undo: {
|
|
|
|
title: "پاک کردن آخرین نقطه رسم شده",
|
|
|
|
text: "پاک کردن آخرین نقطه رسم شده",
|
|
|
|
},
|
|
|
|
buttons: {
|
|
|
|
polyline: "موکب مورد نظر خود را رسم نمایید",
|
|
|
|
polygon: "رسم پولیگان",
|
|
|
|
rectangle: "رسم جای خواب",
|
|
|
|
circle: "رسم دایره",
|
|
|
|
marker: "رسم مارکر",
|
|
|
|
circlemarker: "رسم دایره مارکر",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handlers: {
|
|
|
|
circle: {
|
|
|
|
tooltip: {
|
|
|
|
start: "کلیک کنید و سپس درگ کنید تا یک دایره بکشید.",
|
|
|
|
},
|
|
|
|
radius: "ردیوس",
|
|
|
|
},
|
|
|
|
circlemarker: {
|
|
|
|
tooltip: {
|
|
|
|
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
marker: {
|
|
|
|
tooltip: {
|
|
|
|
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
polygon: {
|
|
|
|
tooltip: {
|
|
|
|
start: "یک شکل رسم کنید.",
|
|
|
|
cont: "ادامه رسم شکل.",
|
|
|
|
end: "برای پایان رسم بر روی اولین نقظه کلیک کنید.",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
polyline: {
|
|
|
|
error: "<strong>Error:</strong> shape edges cannot cross!",
|
|
|
|
tooltip: {
|
|
|
|
start: "با کلیک کردن یک خط رسم کنید.",
|
|
|
|
cont: "با کلیک به رسم خود ادامه دهید.",
|
|
|
|
end: "برای پایان رسم بر روی آخرین نقظ رسم شده کلیک کنید.",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
rectangle: {
|
|
|
|
tooltip: {
|
|
|
|
start: "با کلیک و درگ کردن یک جای خواب رسم کنید.",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
simpleshape: {
|
|
|
|
tooltip: {
|
|
|
|
end: "ماوس را رها کنید تا رسم تمام شود.",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
edit: {
|
|
|
|
toolbar: {
|
|
|
|
actions: {
|
|
|
|
save: {
|
|
|
|
title: "ذخیره تنظیمات",
|
|
|
|
text: "ذخیره",
|
|
|
|
},
|
|
|
|
cancel: {
|
|
|
|
title: "لغو کردن، ویرایش تمام تغییرات نادیده گرفته خواهند شد",
|
|
|
|
text: "لغو",
|
|
|
|
},
|
|
|
|
clearAll: {
|
|
|
|
title: "پاک کردن تمام لایه ها",
|
|
|
|
text: "پاک کردن لایه ها",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
buttons: {
|
|
|
|
edit: "ویرایش لایه ها",
|
|
|
|
editDisabled: "لایه ای برای ویرایش وجود ندارد",
|
|
|
|
remove: "پاک کردن لایه ها",
|
|
|
|
removeDisabled: "لایه ای برای پاک کردن وجود ندارد",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handlers: {
|
|
|
|
edit: {
|
|
|
|
tooltip: {
|
|
|
|
text: "Drag handles or markers to edit features.",
|
|
|
|
subtext: "با کلیک بر روی لغو تغییرات اعمال نخواهند شد.",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
remove: {
|
|
|
|
tooltip: {
|
|
|
|
text: "Click on a feature to remove.",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const outerBounds = [
|
|
|
|
[50.505, -29.09],
|
|
|
|
[52.505, 29.09],
|
|
|
|
];
|
|
|
|
|
|
|
|
const LeafletMap = () => {
|
|
|
|
const leafEl = useRef(null);
|
|
|
|
|
|
|
|
const onCreated = (e) => {
|
|
|
|
const drawnItems = leafEl.current._layers;
|
|
|
|
console.log({ drawnItems });
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<MapContainer
|
|
|
|
center={[49.505, -2.09]}
|
|
|
|
zoom={24}
|
|
|
|
maxZoom={24}
|
|
|
|
maxNativeZoom={22}
|
|
|
|
style={{ height: "100vh" }}
|
|
|
|
zoomControl={false}
|
|
|
|
bounds={outerBounds}
|
|
|
|
>
|
|
|
|
<TileLayer
|
|
|
|
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
|
|
url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
|
|
|
|
apikey="db5ae1f5778a448ca662554581f283c5"
|
|
|
|
maxZoom={24}
|
|
|
|
maxNativeZoom={22}
|
|
|
|
opacity={0.8}
|
|
|
|
/>
|
|
|
|
<TileLayer
|
|
|
|
url={grid}
|
|
|
|
apikey="db5ae1f5778a448ca662554581f283c5"
|
|
|
|
maxZoom={24}
|
|
|
|
maxNativeZoom={24}
|
|
|
|
opacity={0.5}
|
|
|
|
/>
|
|
|
|
<FeatureGroup ref={leafEl}>
|
|
|
|
<EditControl
|
|
|
|
position="topright"
|
|
|
|
onCreated={onCreated}
|
|
|
|
allowIntersection={false}
|
|
|
|
/>
|
|
|
|
</FeatureGroup>
|
|
|
|
<LayerGroup></LayerGroup>
|
|
|
|
<ScaleControl position="topleft" />
|
|
|
|
|
|
|
|
<a class="leaflet-draw-edit-edit" href="#" title="ویرایش لایه ها">
|
|
|
|
<span class="sr-only">ویرایش لایه ها</span>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<ZoomControl position="topleft" />
|
|
|
|
</MapContainer>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default LeafletMap;
|