build(deps): update App.js, src/components/LeafLet/index.js, src/components/TestComponentNew/index.js and yarn.lock
Your Name
3 years ago
parent
9a8ead8238
commit
1673ccd8f9
4 changed files with 7991 additions and 8295 deletions
@ -1,95 +1,27 @@ |
||||
import React, { useState } from "react"; |
||||
import React from "react"; |
||||
|
||||
import { MapContainer, TileLayer, FeatureGroup } from "react-leaflet"; |
||||
import { EditControl } from "leaflet-draw"; |
||||
// import osm from "./osm-providers";
|
||||
import { useRef } from "react"; |
||||
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet"; |
||||
|
||||
const LeafLet = () => { |
||||
const [center, setCenter] = useState({ lat: 24.4539, lng: 54.3773 }); |
||||
const [mapLayers, setMapLayers] = useState([]); |
||||
const position = [51.505, -0.09]; |
||||
|
||||
const ZOOM_LEVEL = 12; |
||||
const mapRef = useRef(); |
||||
|
||||
const _onCreate = (e) => { |
||||
console.log(e); |
||||
|
||||
const { layerType, layer } = e; |
||||
if (layerType === "polygon") { |
||||
const { _leaflet_id } = layer; |
||||
|
||||
setMapLayers((layers) => [ |
||||
...layers, |
||||
{ id: _leaflet_id, latlngs: layer.getLatLngs()[0] }, |
||||
]); |
||||
} |
||||
}; |
||||
|
||||
const _onEdited = (e) => { |
||||
console.log(e); |
||||
const { |
||||
layers: { _layers }, |
||||
} = e; |
||||
|
||||
Object.values(_layers).map(({ _leaflet_id, editing }) => { |
||||
setMapLayers((layers) => |
||||
layers.map((l) => |
||||
l.id === _leaflet_id |
||||
? { ...l, latlngs: { ...editing.latlngs[0] } } |
||||
: l |
||||
) |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
const _onDeleted = (e) => { |
||||
console.log(e); |
||||
const { |
||||
layers: { _layers }, |
||||
} = e; |
||||
|
||||
Object.values(_layers).map(({ _leaflet_id }) => { |
||||
setMapLayers((layers) => layers.filter((l) => l.id !== _leaflet_id)); |
||||
}); |
||||
}; |
||||
const index = () => { |
||||
return ( |
||||
<> |
||||
{" "} |
||||
<div className="row"> |
||||
<div className="col text-center"> |
||||
<h2>React-leaflet - Create, edit and delete polygon on map</h2> |
||||
|
||||
<div className="col"> |
||||
<MapContainer center={center} zoom={ZOOM_LEVEL} ref={mapRef}> |
||||
<FeatureGroup> |
||||
<EditControl |
||||
position="topright" |
||||
onCreated={_onCreate} |
||||
onEdited={_onEdited} |
||||
onDeleted={_onDeleted} |
||||
draw={{ |
||||
rectangle: false, |
||||
polyline: false, |
||||
circle: false, |
||||
circlemarker: false, |
||||
marker: false, |
||||
}} |
||||
/> |
||||
</FeatureGroup> |
||||
|
||||
<MapContainer |
||||
center={position} |
||||
zoom={13} |
||||
style={{ width: "100%", height: "100vh" }} |
||||
> |
||||
<TileLayer |
||||
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" |
||||
/> |
||||
<Marker position={position}> |
||||
<Popup> |
||||
A pretty CSS3 popup. <br /> Easily customizable. |
||||
</Popup> |
||||
</Marker> |
||||
</MapContainer> |
||||
|
||||
<pre className="text-left">{JSON.stringify(mapLayers, 0, 2)}</pre> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default LeafLet; |
||||
export default index; |
||||
|
||||
@ -1,40 +1,53 @@ |
||||
import React, { useState } from "react"; |
||||
import { MapContainer, TileLayer, FeatureGroup } 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"; |
||||
const TestComponentNew = () => { |
||||
const [editableFG, setEditableFG] = useState(null); |
||||
|
||||
import { |
||||
MapContainer, |
||||
TileLayer, |
||||
Marker, |
||||
Popup, |
||||
FeatureGroup, |
||||
} from "react-leaflet"; |
||||
import { EditControl } from "leaflet-draw"; |
||||
const onCreated = (e) => { |
||||
console.log(e); |
||||
console.log(editableFG); |
||||
|
||||
// import { EditControl } from "react-leaflet-draw";
|
||||
const drawnItems = editableFG.leafletElement._layers; |
||||
console.log(drawnItems); |
||||
if (Object.keys(drawnItems).length > 1) { |
||||
Object.keys(drawnItems).forEach((layerid, index) => { |
||||
if (index > 0) return; |
||||
const layer = drawnItems[layerid]; |
||||
editableFG.leafletElement.removeLayer(layer); |
||||
}); |
||||
console.log(drawnItems); |
||||
} |
||||
}; |
||||
|
||||
const position = [51.505, -0.09]; |
||||
const onFeatureGroupReady = (reactFGref) => { |
||||
// store the ref for future access to content
|
||||
setEditableFG(reactFGref); |
||||
}; |
||||
|
||||
// و لینک سی دی ان اضافه کردم index.htmlیک نکته خیلی خیلی مهم برای اینکه کار کنه رفتم در فایل
|
||||
function TestComponentNew({}) { |
||||
return ( |
||||
<MapContainer |
||||
center={position} |
||||
zoom={20} |
||||
style={{ width: "100%", height: "100vh" }} |
||||
center={[37.8189, -122.4786]} |
||||
zoom={13} |
||||
style={{ height: "100vh" }} |
||||
> |
||||
{/* <EditControl /> */} |
||||
<TileLayer |
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" |
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
||||
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" |
||||
/> |
||||
<Marker position={position}> |
||||
<Popup> |
||||
A pretty CSS3 popup. <br /> Easily customizable. |
||||
</Popup> |
||||
</Marker> |
||||
<FeatureGroup |
||||
ref={(featureGroupRef) => { |
||||
onFeatureGroupReady(featureGroupRef); |
||||
}} |
||||
> |
||||
<EditControl position="topright" onCreated={onCreated} /> |
||||
</FeatureGroup> |
||||
</MapContainer> |
||||
); |
||||
} |
||||
}; |
||||
|
||||
export default TestComponentNew; |
||||
|
||||
Loading…
Reference in new issue