Cesium导航指针放大缩小定位平移详解

一、需求分析

点击按钮可以对地图进行放大缩小,点击重置可以返回原先初始地点,点击指针球可以移动切换不同视角。

二、代码实现

我的版本为

Cesium 1.69 

cesium-navigation-es6 1.1.6  源码有BUG需要更改

安装命令:

npm  cesium-navigation-es6 或者 yarn add npm i cesium-navigation-es6

地图显示实现参考代码:https://blog.csdn.net/qq_17025903/article/details/105072203

在地图上添加导航指针

    let options = {};
    options.defaultResetView = Cesium.Cartographic.fromDegrees(116.384259,39.999645, 1200000.0);
    options.enableCompass= true;
    options.enableZoomControls= true;
    options.enableDistanceLegend= true;
    options.enableCompassOuterRing= true;
    CesiumNavigation(viewer, options);
    viewer.camera.setView({
      destination : Cesium.Cartesian3.fromDegrees(116.397128,39.916527, 1000.0)
    });
    console.log(viewer)

三、实现效果

最后附上 cesium-navigation-es6 1.1.6 修改后的源码

链接:https://pan.baidu.com/s/1SyQFZp1G2zYt6mlQtCZzsQ 
提取码:5pe2

要实现cesium中的放大缩小功能,并且实现匀速过渡效果,可以通过使用cesium-navigation-es6这个npm包或者yarn来安装。 这个包提供了一些常用的导航控件,其中包括放大缩小按钮、重置按钮和指针球来切换视角。 具体的步骤如下: 1. 首先,确保你已经安装了npm或者yarn,并且在项目中引入了Cesium库。 2. 在命令行中运行npm cesium-navigation-es6 或者 yarn add npm cesium-navigation-es6来安装cesium-navigation-es6包。 3. 在你的代码中引入cesium-navigation-es6包,例如通过import语句。 4. 使用cesium-navigation-es6提供的组件来创建放大缩小功能。你可以将放大缩小按钮添加到cesium的工具栏上,或者在用户界面的其他位置显示按钮。 5. 为放大缩小按钮添加相应的点击事件处理程序,以便在用户点击按钮时执行放大缩小操作。你可以使用cesium提供的方法来实现平滑的过渡效果,例如Camera.zoomIn或Camera.zoomOut。 6. 如果你还想实现匀速过渡效果,可以使用Cesium的Tween库或者其他的动画库来实现。这些库可以让你控制过渡的时间和速度,从而实现匀速过渡效果。 通过上述步骤,你就可以在cesium中实现放大缩小功能,并且使用匀速过渡效果来使过渡更加平滑。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Cesium导航指针放大缩小定位平移详解](https://blog.csdn.net/qq_17025903/article/details/107532382)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Cesium飞行漫游 Cesium飞行漫游](https://download.csdn.net/download/Sapphire521/85664945)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南归北隐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值