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: "Error: 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 ( ویرایش لایه ها ); }; export default LeafletMap;