66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { useMap } from "../MapComponent";
|
|
import AddRoundedIcon from "@mui/icons-material/AddRounded";
|
|
import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
|
|
import FitScreenIcon from "@mui/icons-material/FitScreen";
|
|
import { config } from "@config/config";
|
|
|
|
const Zoom: React.FC = () => {
|
|
const map = useMap();
|
|
|
|
// 放大函数
|
|
const handleZoomIn = () => {
|
|
if (!map) return;
|
|
const view = map.getView();
|
|
view.animate({ zoom: (view.getZoom() ?? 0) + 1, duration: 200 });
|
|
};
|
|
|
|
// 缩小函数
|
|
const handleZoomOut = () => {
|
|
if (!map) return;
|
|
const view = map.getView();
|
|
view.animate({ zoom: (view.getZoom() ?? 0) - 1, duration: 200 });
|
|
};
|
|
|
|
// 缩放到全局 Extent
|
|
const handleFitScreen = () => {
|
|
if (!map) return;
|
|
const view = map.getView();
|
|
view.fit(config.MAP_EXTENT, { duration: 500 });
|
|
};
|
|
|
|
return (
|
|
<div className="absolute right-4 bottom-8 z-1300">
|
|
<div className="w-8 h-26 flex flex-col gap-2 items-center">
|
|
<div className="w-8 h-8 bg-gray-50 flex items-center justify-center rounded-xl drop-shadow-xl shadow-black">
|
|
<button
|
|
className="w-6 h-6 flex items-center justify-center rounded-xl hover:bg-white transition-all duration-100"
|
|
onClick={handleFitScreen}
|
|
>
|
|
<FitScreenIcon fontSize="small" />
|
|
</button>
|
|
</div>
|
|
<div className="w-8 h-16 flex flex-col items-center justify-center bg-gray-50 rounded-xl drop-shadow-xl shadow-black">
|
|
<button
|
|
className="w-6 h-6 flex items-center justify-center rounded-xl hover:bg-white transition-all duration-100"
|
|
onClick={handleZoomIn}
|
|
aria-label="放大"
|
|
>
|
|
<AddRoundedIcon />
|
|
</button>
|
|
<div className="m-0.5 border-t-1 border-gray-300 w-6"></div>
|
|
<button
|
|
className="w-6 h-6 flex items-center justify-center rounded-xl hover:bg-white transition-all duration-100"
|
|
onClick={handleZoomOut}
|
|
aria-label="缩小"
|
|
>
|
|
<RemoveRoundedIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Zoom;
|