方法缩小地图封装api
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cesium Zoom API</title><style>#cesiumContainer {height: 100vh;margin: 0;overflow: hidden;}#buttonCss {position: absolute;top: 10px;left: 10px;padding: 10px;cursor: pointer;background-color: #fff;border: 1px solid #ccc;border-radius: 4px;font-size: 14px;}</style>
</head><body><div id="cesiumContainer"></div><div id="buttonCss"><button id="zoomInButton">Zoom In</button><button id="zoomOutButton">Zoom Out</button></div><script src="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Cesium.js"></script><link rel="stylesheet"href="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Widgets/widgets.css" /><!-- <script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js"></script> --><script>const viewer = new Cesium.Viewer('cesiumContainer');document.getElementById('zoomInButton').addEventListener('click', () => {zoomMap(-0.5);});document.getElementById('zoomOutButton').addEventListener('click', () => {zoomMap(0.5);});function zoomMap(direction) {const camera = viewer.camera;const position = camera.positionWC.clone();const directionVector = camera.directionWC.clone();const height = viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;// 根据相机高度调整缩放的比例// const scale = Math.ceil(height / 1000.0);// console.log(scale,'scale');// let dire = scale>1?scale*direction * 100:direction * 100// console.log(dire,'dire');const scale = Math.ceil(height / 1.0);let dire = scale * direction// 方向矢量与缩放量的乘积const zoomVector = Cesium.Cartesian3.multiplyByScalar(directionVector, dire, new Cesium.Cartesian3());// 新位置为当前位置加上缩放后的矢量const newPosition = Cesium.Cartesian3.add(position, zoomVector, new Cesium.Cartesian3());const heading = camera.heading;const pitch = camera.pitch;camera.flyTo({destination: newPosition,orientation: {heading: heading,pitch: pitch,},duration: 0.5, // 调整飞行动画的持续时间});}</script>
</body></html>
