121 lines
3.2 KiB
JavaScript
121 lines
3.2 KiB
JavaScript
import { useCallback, useState } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useCesium } from "resium";
|
|
import { Select } from "antd";
|
|
import styles from "./index.module.less";
|
|
|
|
function CustomToolbar() {
|
|
const { viewer } = useCesium();
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
|
|
const { toolbar } = useSelector((state) => state.data);
|
|
const [value, setValue] = useState("sideview");
|
|
|
|
const handleChange = (value) => {
|
|
setValue(value);
|
|
const pointEntity = viewer.entities.getById("point");
|
|
if (!viewer) return;
|
|
if (value === "overhead") {
|
|
// 俯视
|
|
viewer.trackedEntity = pointEntity;
|
|
const destination = pointEntity.position.getValue(
|
|
viewer.clock.currentTime
|
|
);
|
|
if (!destination) return;
|
|
const newDestination = new Cesium.Cartesian3();
|
|
newDestination.x = destination.x;
|
|
newDestination.y = destination.y + 13000000;
|
|
newDestination.z = destination.z;
|
|
viewer.camera.flyTo({
|
|
destination: newDestination,
|
|
});
|
|
} else if (value === "sideview") {
|
|
// 侧视
|
|
// viewer.trackedEntity = pointEntity;
|
|
viewer.trackedEntity = undefined;
|
|
viewer.camera.flyTo({
|
|
destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000),
|
|
});
|
|
} else {
|
|
// 跟随mftata
|
|
viewer.trackedEntity = pointEntity;
|
|
const destination = pointEntity.position.getValue(
|
|
viewer.clock.currentTimes
|
|
);
|
|
if (!destination) return;
|
|
const newDestination = Cesium.Cartesian3.clone(destination);
|
|
newDestination.y = destination.y + 1000000;
|
|
viewer.camera.flyTo({
|
|
destination: newDestination,
|
|
orientation: {
|
|
heading: Cesium.Math.toRadians(0.0),
|
|
pitch: -Cesium.Math.PI_OVER_FOUR,
|
|
roll: 0.0,
|
|
},
|
|
duration: 0,
|
|
});
|
|
}
|
|
};
|
|
|
|
const navigateHandler = useCallback(() => {
|
|
navigate("/home", { replace: true });
|
|
dispatch.data.resetState();
|
|
}, [navigate, dispatch]);
|
|
|
|
const showPanelHandler = useCallback(
|
|
(value) => {
|
|
dispatch.data.updateToolbar({
|
|
showPanel: value,
|
|
});
|
|
},
|
|
[dispatch]
|
|
);
|
|
|
|
return (
|
|
<div className={styles.toolbar}>
|
|
<div className={"focusBtn"} onClick={navigateHandler}>
|
|
返回首页
|
|
</div>
|
|
{/* <Select
|
|
// onSelect={handleChange}
|
|
onChange={handleChange}
|
|
value={value}
|
|
getPopupContainer={(node) => node}
|
|
options={[
|
|
// {
|
|
// value: "overhead",
|
|
// label: "俯视视角",
|
|
// },
|
|
{
|
|
value: "sideview",
|
|
label: "侧视视角",
|
|
},
|
|
{
|
|
value: "follow",
|
|
label: "跟随视角",
|
|
},
|
|
]}
|
|
/> */}
|
|
<Select
|
|
onChange={showPanelHandler}
|
|
value={!!toolbar.showPanel}
|
|
getPopupContainer={(node) => node}
|
|
options={[
|
|
{
|
|
value: true,
|
|
label: "开启展板",
|
|
},
|
|
{
|
|
value: false,
|
|
label: "关闭展板",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CustomToolbar;
|