• cesium api放大缩小地图

    方法缩小地图封装api
     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Cesium Zoom APItitle>
    8.     <style>
    9.         #cesiumContainer {
    10.             height: 100vh;
    11.             margin: 0;
    12.             overflow: hidden;
    13.         }
    14.  
    15.         #buttonCss {
    16.             position: absolute;
    17.             top: 10px;
    18.             left: 10px;
    19.             padding: 10px;
    20.             cursor: pointer;
    21.             background-color: #fff;
    22.             border: 1px solid #ccc;
    23.             border-radius: 4px;
    24.             font-size: 14px;
    25.         }
    26.     style>
    27. head>
    28.  
    29. <body>
    30.     <div id="cesiumContainer">div>
    31.     <div id="buttonCss">
    32.         <button id="zoomInButton">Zoom Inbutton>
    33.         <button id="zoomOutButton">Zoom Outbutton>
    34.     div>
    35.  
    36.     <script src="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Cesium.js">script>
    37.     <link rel="stylesheet"
    38.         href="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Widgets/widgets.css" />
    39.     
    40.     <script>
    41.  
    42.         const viewer = new Cesium.Viewer('cesiumContainer');
    43.  
    44.  
    45.         document.getElementById('zoomInButton').addEventListener('click', () => {
    46.             zoomMap(-0.5);
    47.         });
    48.  
    49.         document.getElementById('zoomOutButton').addEventListener('click', () => {
    50.             zoomMap(0.5);
    51.         });
    52.  
    53.         function zoomMap(direction) {
    54.             const camera = viewer.camera;
    55.             const position = camera.positionWC.clone();
    56.             const directionVector = camera.directionWC.clone();
    57.             const height = viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
    58.  
    59.             // 根据相机高度调整缩放的比例
    60.             // const scale = Math.ceil(height / 1000.0);
    61.             // console.log(scale,'scale');
    62.             // let dire = scale>1?scale*direction * 100:direction * 100
    63.             // console.log(dire,'dire');
    64.             const scale = Math.ceil(height / 1.0);
    65.             let dire = scale * direction
    66.  
    67.             // 方向矢量与缩放量的乘积
    68.             const zoomVector = Cesium.Cartesian3.multiplyByScalar(directionVector, dire, new Cesium.Cartesian3());
    69.  
    70.             // 新位置为当前位置加上缩放后的矢量
    71.             const newPosition = Cesium.Cartesian3.add(position, zoomVector, new Cesium.Cartesian3());
    72.             const heading = camera.heading;
    73.             const pitch = camera.pitch;
    74.             camera.flyTo({
    75.                 destination: newPosition,
    76.                 orientation: {
    77.                     heading: heading,
    78.                     pitch: pitch,
    79.                 },
    80.                 duration: 0.5, // 调整飞行动画的持续时间
    81.             });
    82.         }
    83.     script>
    84. body>
    85.  
    86. html>

  • 相关阅读:
    halcon系列（2）：超级盒子（Hyperboxes）
    Debian11之稳定版本Jenkins安装
    PHP旅游管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页
    用于微小目标检测的上下文扩展和特征细化网络
    谷歌云计算技术基础架构,谷歌卷积神经网络
    操作系统备考学习 day5（2.2.5 - 2.3.1）
    Ubuntu下安装microk8s用代理解决无法拉取镜像问题
    Databend 在 MinIO 环境使用copy 命令 | 新手篇(3)
    十二、 Mysql - 主从复制 - 半同步复制
    maven中的依赖管理
  • 原文地址：https://blog.csdn.net/songJunFeng1/article/details/134418740