Cesium中Navigation导航插件配置使用

Cesium中Navigation导航插件的配置:

之前在别的Cesium的Demo中看到Cesium的导航控件,觉得导航控件非常好用。好奇新的驱动下去Github上看了一下,果然有国外大神写的Navigation导航控件的插件。把源码下载,参照readme文件进行配置,测试可以。现在分享给大家。

一、Github下载Navigation导航的插件

Github地址:https://github.com/alberto-acevedo/cesium-navigation
下载之后文件夹:

二、文件配置

之前node环境下的cesium配置基础上。如果没有配置过参考:Cesium本地配置这篇文章。

在文件夹根目录地址栏中输入cmd:




在cmd界面中输入以下两条指令:

npm install
node build.js

稍等一会插件文件夹中多出几个文件:



在官网上给出的使用方法:(其中最主要的就是引入viewerCesiumNavigationMixin.js文件)

<head>
  <!-- other stuff -->

  <script src="path/to/Cesium.js"></script>
  <!-- 引入: 因为Cesium导航查看器mixin依赖于铯,所以一定要在cesium之后加载它 -->
  <script src="path/to/standalone/viewerCesiumNavigationMixin.js"></script>

  <!-- other stuff ... -->
</head>

配置好path的文件路径,我觉得太麻烦的取了一个巧。我将整个文件在Tomcat中进行发布,直接在线调用viewerCesiumNavigationMixin.js文件。因为里面有许多调用的资源文件,就直接把整个文件放在了Tomcat中。虽然感觉有点笨,但是亲测可用。



三、调用viewerCesiumNavigationMixin.js文件

新建页面,新建Cesium加载方法。新建三维地球。加入下面的代码:

 //开启Navigation导航插件
    $("#addNavigation").bind('click',function(){
        viewer.extend(Cesium.viewerCesiumNavigationMixin, {});
    });

    //释放Navigation导航插件
    $("#removeNavigation").bind('click',function(){
        viewer.cesiumNavigation.destroy();
    });

下面是控制导航控件的代码:

var options = {};
options.defaultResetView = Cesium.Rectangle.fromDegrees(71, 3, 90, 14);
// Only the compass will show on the map
options.enableCompass= true;
options.enableZoomControls= false;
options.enableDistanceLegend= false;
options.enableCompassOuterRing= true;
cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin, options);

最后运行就能查看效果:


我非常欣赏插件原作者readme文件中的一句话:

The plugin is 100% based on open source libraries. The same license that applies to Cesiumjs and terriajs applies also to this plugin. Feel free to use it, modify it, and improve it.
该插件100%基于开源库。适用于Cesiumjs和terriajs的许可证也适用于这个插件。请随意使用、修改和改进它。
开源万岁。

posted @ 2019-04-20 22:59  宥_XWX  阅读(82)  评论(0编辑  收藏  举报  来源