48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
||
import { useMap } from "../MapComponent";
|
||
|
||
const Scale: React.FC = () => {
|
||
const map = useMap();
|
||
const [zoomLevel, setZoomLevel] = useState(0);
|
||
const [coordinates, setCoordinates] = useState<[number, number]>([0, 0]);
|
||
|
||
useEffect(() => {
|
||
if (!map) return;
|
||
|
||
const updateZoomLevel = () => {
|
||
const zoom = map.getView().getZoom();
|
||
setZoomLevel(zoom ?? 0); // 如果 zoom 是 undefined，则使用默认值 0
|
||
};
|
||
|
||
const updateCoordinates = (event: any) => {
|
||
const coords = event.coordinate;
|
||
const transformedCoords = coords.map((c: number) =>
|
||
parseFloat(c.toFixed(4))
|
||
);
|
||
setCoordinates(transformedCoords);
|
||
};
|
||
|
||
map.on("moveend", updateZoomLevel);
|
||
map.on("pointermove", updateCoordinates);
|
||
|
||
// Initialize values
|
||
updateZoomLevel();
|
||
|
||
return () => {
|
||
map.un("moveend", updateZoomLevel);
|
||
map.un("pointermove", updateCoordinates);
|
||
};
|
||
}, [map]);
|
||
|
||
return (
|
||
<div className="absolute bottom-0 right-0 flex col-auto px-2 bg-white bg-opacity-70 text-black rounded-tl shadow-md text-sm">
|
||
<div className="px-1">缩放: {zoomLevel.toFixed(1)}</div>
|
||
<div className="px-1">
|
||
坐标: {coordinates[0]}, {coordinates[1]}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Scale;
|