![cesium导航_css](//dev-img.mos.moduyun.com/20231029/bb5d17d3-efe7-4c67-a384-b3796c1c07ef.png)
推荐:将 NSDT场景编辑器 加入你的3D开发工具链
今天看到 Google Earth 上的导航栏,想起百度地图,高德地图,leaflet(插件)等等好像都有提供导航条,但是cesium官方包里面是没有的,于是上网搜了一下,果然有个大神实现了,名字就叫Cesium-navigation,github地址,有人翻译了这篇文章 翻译地址
![cesium导航_css_02](//dev-img.mos.moduyun.com/20231029/15d15942-1709-4e92-bd81-a5482c45e089.png)
看起来好像很简单,下面我们来试试怎么用:
- 下载js文件
可以在github上下载源码,自己编译,官方文档上有写
How to build it?
run npm install
run node build.js
这里我偷懒了,使用cnpm安装的,当然安装完也可以把它从node_modules中拷出来
cnpm install cesium-navigation –save
- 新建示例页面,引入js
//必须先引入cesium
<script src="path/to/Cesium.js"></script>
src="path/to/standalone/viewerCesiumNavigationMixin.js"></script>
- 创建对象,官方提供了另种方式,一般使用viewer比较多,我们用viewer
// 这句不解释了
var cesiumViewer = new Cesium.Viewer('cesiumContainer'); var options = {}; //两种方式设置默认视图 options.defaultResetView = Cesium.Rectangle.fromDegrees(71, 3, 90, 14); //options.defaultResetView = new Cesium.Cartographic(Cesium.Math.toRadians(114), Cesium.Math.toRadians(33), 500);
刷新页面,发现。。。。。可以了,这就666了,如果使用requirejs,帮助里面也有说明,这里来补充一点东西:
- 返回按钮(放大缩小按钮中间的)可以自行飞向自定义经纬度坐标
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(101.88, 39.78,10000000)
});
- 默认的控件都放在左下角,如果想放在别的位置怎么办呢? 这里提供一种方式,通过修改css
<style>
.compass {
position: absolute;
left: 0;
top: 10px;
}
.navigation-controls {
position: absolute;
left: 30px;
top: 120px;
height: 90px;
}
</style>
效果图:
![cesium导航_Math_03](//dev-img.mos.moduyun.com/20231029/6d81a7f2-b067-49ef-9325-7334626a6188.png)
![cesium导航_Math_04](//dev-img.mos.moduyun.com/20231029/c39bee21-76f8-4937-9328-4f270b6d61bb.png)
参考源码
Sign up for more like this.