cesium添加罗盘、比例尺和缩放控件——cesium-navigation插件

Cesium实战系列文章总目录： 传送门

1.实现效果

2.Cesium-navigation插件

插件的github地址是：https://github.com/alberto-acevedo/cesium-navigation
由于cesium本身并没有提供这个插件，是github上某位大神维护的，这里为了方便就直接引用库，当然有兴趣的也可根据源码自定义。

3.代码使用

3.1 引入库

直接引用源码中的**【viewerCesiumNavigationMixin.js】**这一个js文件即可。

<!-- 引入罗盘控件 -->
    <script src="./src/navigation/viewerCesiumNavigationMixin.min.js"></script>
    // 添加罗盘，比例尺等控件
    viewer.extend(Cesium.viewerCesiumNavigationMixin);

3.2 重设位置样式

在css样式文件中设置罗盘、比例尺和缩放控件的位置

/* 罗盘定位 */

.compass {
    position: absolute;
    left: 2%;
    top: 2%;
}


/* 比例尺位置 */

.distance-legend {
    position: absolute;
    right: 2%;
    bottom: 6%;
}


/* 缩放位置 */

.navigation-controls {
    position: absolute;
    bottom: 10%;
    right: 2%;
}