66 lines
2.7 KiB
JavaScript
66 lines
2.7 KiB
JavaScript
const { IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent } = require("@mui/material");
|
|
import MapLayer from "@/core/components/MapLayer";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import LayersIcon from "@mui/icons-material/Layers";
|
|
import L from "leaflet";
|
|
import { useMemo, useState } from "react";
|
|
import ShowBound from "./ShowBound";
|
|
|
|
const ShowProjectArea = ({ primaryArea }) => {
|
|
const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
|
|
const bound = useMemo(() => {
|
|
const coordinates = Object.values(primaryArea.coordinates);
|
|
|
|
const latLngCoords = coordinates.map(([lat, lng]) => [parseFloat(lng), parseFloat(lat)]);
|
|
|
|
return primaryArea.type === "polygon"
|
|
? L.polygon(latLngCoords, { color: "#ff5555" })
|
|
: L.polyline(latLngCoords);
|
|
}, [primaryArea]);
|
|
|
|
return (
|
|
<Box>
|
|
<Tooltip title="نمایش پلیگان" placement="right" arrow>
|
|
<IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
|
|
<LayersIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Dialog
|
|
open={openShowAreaDialog}
|
|
onClose={() => setOpenShowAreaDialog(false)}
|
|
PaperProps={{
|
|
sx: {
|
|
transition: "all .3s",
|
|
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
|
borderRadius: 2,
|
|
padding: 1,
|
|
},
|
|
}}
|
|
maxWidth="sm"
|
|
fullWidth
|
|
dir="rtl"
|
|
>
|
|
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
|
|
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
|
|
محدوده طرح
|
|
</Typography>
|
|
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<Box sx={{ flex: 1 }}>
|
|
<Box sx={{ width: "100%", height: "400px" }}>
|
|
<MapLayer style={{ borderRadius: "4px" }}>
|
|
<ShowBound bound={bound} />
|
|
</MapLayer>
|
|
</Box>
|
|
</Box>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ShowProjectArea;
|