You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

191 lines
5.0 KiB

3 years ago
import React, { useState, useRef, useMemo } from "react";
3 years ago
3 years ago
import {
MapContainer,
TileLayer,
FeatureGroup,
Rectangle,
useMap,
LayerGroup,
ZoomControl,
ScaleControl,
} from "react-leaflet";
3 years ago
3 years ago
import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css";
3 years ago
3 years ago
import { EditControl } from "react-leaflet-draw";
3 years ago
3 years ago
import "leaflet-draw";
import "./index.scss";
3 years ago
3 years ago
import grid from "../../assets/images/grid.png";
3 years ago
import * as L from "leaflet";
L.drawLocal = {
draw: {
toolbar: {
actions: {
title: "لغو کردن رسم",
text: "لغو",
3 years ago
},
finish: {
title: "پایان رسم",
text: "پایان رسم",
},
undo: {
title: "پاک کردن آخرین نقطه رسم شده",
text: "پاک کردن آخرین نقطه رسم شده",
},
buttons: {
polyline: "موکب مورد نظر خود را رسم نمایید",
polygon: "رسم پولیگان",
rectangle: "رسم جای خواب",
circle: "رسم دایره",
marker: "رسم مارکر",
circlemarker: "رسم دایره مارکر",
},
},
handlers: {
circle: {
tooltip: {
start: "کلیک کنید و سپس درگ کنید تا یک دایره بکشید.",
},
radius: "ردیوس",
},
circlemarker: {
tooltip: {
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
3 years ago
},
},
marker: {
tooltip: {
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
3 years ago
},
},
polygon: {
tooltip: {
start: "یک شکل رسم کنید.",
cont: "ادامه رسم شکل.",
end: "برای پایان رسم بر روی اولین نقظه کلیک کنید.",
3 years ago
},
},
polyline: {
error: "<strong>Error:</strong> shape edges cannot cross!",
tooltip: {
start: "با کلیک کردن یک خط رسم کنید.",
cont: "با کلیک به رسم خود ادامه دهید.",
end: "برای پایان رسم بر روی آخرین نقظ رسم شده کلیک کنید.",
3 years ago
},
},
rectangle: {
tooltip: {
start: "با کلیک و درگ کردن یک جای خواب رسم کنید.",
},
},
simpleshape: {
tooltip: {
end: "ماوس را رها کنید تا رسم تمام شود.",
},
},
},
},
edit: {
toolbar: {
actions: {
save: {
title: "ذخیره تنظیمات",
text: "ذخیره",
},
cancel: {
title: "لغو کردن، ویرایش تمام تغییرات نادیده گرفته خواهند شد",
text: "لغو",
3 years ago
},
clearAll: {
title: "پاک کردن تمام لایه ها",
text: "پاک کردن لایه ها",
},
},
buttons: {
edit: "ویرایش لایه ها",
editDisabled: "لایه ای برای ویرایش وجود ندارد",
remove: "پاک کردن لایه ها",
removeDisabled: "لایه ای برای پاک کردن وجود ندارد",
},
},
handlers: {
edit: {
tooltip: {
text: "Drag handles or markers to edit features.",
subtext: "با کلیک بر روی لغو تغییرات اعمال نخواهند شد.",
3 years ago
},
},
remove: {
tooltip: {
text: "Click on a feature to remove.",
},
},
},
},
};
3 years ago
const outerBounds = [
[50.505, -29.09],
[52.505, 29.09],
];
const LeafletMap = () => {
const leafEl = useRef(null);
3 years ago
3 years ago
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='&copy; <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>
3 years ago
<ZoomControl position="topleft" />
</MapContainer>
);
};
export default LeafletMap;