http://blog.csdn.net/Prepared/article/details/68940997?locationNum=10&fps=1

插件源码地址：https://github.com/alberto-acevedo/cesium-navigation

cesium-navigation

cesium-navigation是一个cesium的插件，提供指南针、导航仪和距离刻度用户图形界面。

1、为什么你建立cesium-navigation插件？

首先，所有的Cesiumjs sdk 不包括罗盘，导航仪（放大/缩小）和距离刻度。您可以使用鼠标在地图上导航，但这个导航插件可为用户提供更多的导航控制和功能。其中一些功能是：将罗盘重置为指向北部，重置轨道，并将视图重置为默认边界。

2、怎么建立cesium-navigation插件？

cesium-navigation插件基于优秀的罗盘，导航仪（放大/缩小）和距离terriajs开源库的距离刻度。来自terriajs的导航UI不能在铯中开箱即用，因为cesium使用带有RequireJS的CommonJS模块，terriajs使用commonjs和Browserify，因此您不能将源文件复制到铯和构建中。cesium-navigation插件的工作包括调整代码在cesium作为插件工作如下：

1) 将所有模块从Browserify转换为requirejs；

2)使用gulpjs来编译和缩小较少的文件，捆绑和最小化所有模块，并将源依赖关系打包成一个文件。作为构建过程的一部分，用almondjs替换requirejs，以减少插件中使用的AMD加载器的占用空间。almondjs库也在插件内绑定，使插件像铯中的即插即用一样简单；

3)使用nodejs和requirejs优化器以及almondjs，整个插件被构建并捆绑在单个文件中，甚至CSS样式也放在这个文件中；

4）该插件可以用作独立脚本或通过AMD加载程序（使用requirejs进行测试）。即使在使用AMD而不是cesium的特殊情况下，插件也可以轻松使用。

3、怎么使用cesium-navigation插件？

cesium-navigation插件有两个版本，一个独立版和一个AMD兼容版本：

1）什么时候用什么版本？

a. 如果您正在加载没有requirejs的铯（即，您有全局变量铯），则使用独立版本。如果您使用requirejs（但不适用于铯），此版本也是适用的。

导入脚本：

  1. <head>
  2. <!-- other stuff -->
  3. <script src="path/to/Cesium.js"></script>
  4. <!-- IMPORTANT: because the cesium navigation viewer mixin depends on Cesium be sure to load it after Cesium -->
  5. <script src="path/to/standalone/viewerCesiumNavigationMixin.js"></script>
  6. <!-- other stuff ... -->
  7. </head>

然后扩展viewer：

  1. // create a viewer assuming there is a DIV element with id 'cesiumContainer'
  2. var cesiumViewer = new Cesium.Viewer('cesiumContainer');
  3. // extend our view by the cesium navigaton mixin
  4. cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin, {});

或者一个部件：

  1. // create a widget assuming there is a DIV element with id 'cesiumContainer'
  2. var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer');
  3. // extend our view by the cesium navigaton mixin
  4. Cesium.viewerCesiumNavigationMixin.mixinWidget(cesiumWidget, {});

可以通过一下方式获取新创建的实例：

  1. // if using a viewer
  2. var cesiumNavigation = cesiumViewer.cesiumNavigation;
  3. // if using a widget
  4. var cesiumNavigation = cesiumWidget.cesiumNavigation;

另外一个例子：

b. 如果除了cesium之外，你使用了requirejs ，则要使用：

  1. <head>
  2. <!-- other stuff... -->
  3. <script src="path/to/Cesium.js"></script>
  4. <!-- 重要！加载requirejs在cesium之后 -->
  5. <!-- viewerCesiumNavigationMixin the global variable Cesium is already set -->
  6. <script type="text/javascript" src="path/to/require.js"></script>
  7. <script type="text/javascript">
  8. require.config({
  9. // your config...
  10. });
  11. </script>
  12. <!-- other stuff... -->
  13. </head>

加上：

  1. // IMPORTANT: be sure that Cesium.js has already been loaded, e.g. by loading requirejs AFTER Cesium
  2. require(['path/to/standalone/viewerCesiumNavigationMixin'], function(viewerCesiumNavigationMixin) {
  3. // like above code but additionally one can directly access
  4. // viewerCesiumNavigationMixin
  5. // instead of
  6. // Cesium.viewerCesiumNavigationMixin
  7. }

c. 如果您正在为整个项目（包括cesium）使用requirejs，那么您必须使用AMD兼容版本。

  1. <head>
  2. <!-- other stuff... -->
  3. <script type="text/javascript" src="path/to/require.js"></script>
  4. <script type="text/javascript">
  5. require.config({
  6. // your config...
  7. paths: {
  8. // your paths...
  9. // 重要！这里必须设置，因为viewerCesiumNavigationMixin 使用Cesium/...依赖
  10. 'Cesium': 'path/to/cesium/Source'
  11. }
  12. });
  13. </script>
  14. <!-- other stuff... -->
  15. </head>

加上：

  1. require([
  2. 'Cesium/Cesium',
  3. 'path/to/amd/viewerCesiumNavigationMixin'
  4. ], function(
  5. Cesium,
  6. viewerCesiumNavigationMixin) {
  7. // like above but now you cannot access Cesium.viewerCesiumNavigationMixin
  8. // but use just viewerCesiumNavigationMixin
  9. });

或者：

  1. require([
  2. 'Cesium/Core/Viewer',
  3. 'path/to/amd/viewerCesiumNavigationMixin'
  4. ], function(
  5. CesiumViewer,
  6. viewerCesiumNavigationMixin) {
  7. // like above but now you cannot access Cesium.viewerCesiumNavigationMixin
  8. // but use just viewerCesiumNavigationMixin
  9. });

设置插件选项

defaultResetView - >用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic
和 Cesium.Rectangle.
enableCompass - >用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
enableZoomControls - >用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
enableDistanceLegend - >用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
enableCompassOuterRing - >用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
更多选项将在未来的插件版本中设置。

没有requirejs加载cesium时设置选项的例子：

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

仍然有问题，请查看例子。

删除导航插件并释放资源使用：

  1. viewer.cesiumNavigation.destroy();

怎么建立cesium-navigation插件？

执行：npm install

执行：node build.js

 

开发指引

对于开发/调试，您应该看看“Source Example”文件件。该示例直接使用源文件，因此它允许您立即使用（只需要刷新一次页面），不需要重新构建任何内容即可查看更改。此外，由于使用来源，您可以轻松地调试项目（例如通过浏览器的开发人员控制台或通过IDE的调试器，如Webstorm）

有没有使用该插件的实例？

(http://larcius.github.io/cesium-navigation/)

1)指南针，导航仪和距离刻度将显示在地图的右侧。
2)此插件已成功测试cesium 1.15版。 它在3D模式下适用于cesium。最近Larcius（https://github.com/Larcius）做了很多改进，并修复了哥伦布和二维模式的一些问题。

cesiumjs学习笔记之三——cesium-navigation插件 【转】的更多相关文章

  1. Dynamic CRM 2013学习笔记（一）插件输入实体参数解析

      1. 问题描述 最近新建了一个post事件的插件,传入的参数处理如下: 1: if (context.InputParameters.Contains("Target") &a ...

  2. Dynamic CRM 2013学习笔记（二）插件基本用法及调试

      插件是可与 Microsoft Dynamics CRM 2013 和 Microsoft Dynamics CRM Online 集成的自定义业务逻辑(代码),用于修改或增加平台的标准行为.也可 ...

  3. Qt Creator 源码学习笔记04，多插件实现原理分析

    阅读本文大概需要 8 分钟 插件听上去很高大上,实际上就是一个个动态库,动态库在不同平台下后缀名不一样,比如在 Windows下以.dll结尾,Linux 下以.so结尾 开发插件其实就是开发一个动态 ...

  4. Django 学习笔记之三 数据库输入数据

    假设建立了django_blog项目,建立blog的app ,在models.py里面增加了Blog类,同步数据库,并且建立了对应的表.具体的参照Django 学习笔记之二的相关命令. 那么这篇主要介 ...

  5. 【Visual C++】游戏编程学习笔记之三：游戏循环的使用

     本系列文章由@二货梦想家张程 所写,转载请注明出处. 本文章链接:http://blog.csdn.net/terence1212/article/details/44208419 作者:Zee ...

  6. hive学习笔记之三：内部表和外部表

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. bootstrap学习笔记之四（javascript插件）

    下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入bootstrap.js后,通过添加data属性实现,另一种则是通过js代码是实现. 第一个插件:下拉菜单的实现 第一种方法:dat ...

  8. bootstrap学习笔记之三（组件的使用）

    bootstrap组件需要引入bootstrap.js才行,当然要引入bootstrap.js首先得引入JQuery. 一.下拉菜单 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另 ...

  9. 学习笔记之三十年软件开发之路 - Things I Learnt The Hard Way (in 30 Years of Software Development)

    三十年软件开发之路 https://mp.weixin.qq.com/s/EgN-9bIHonRid1DM0csQDw https://blog.juliobiason.net/thoughts/th ...

随机推荐

  1. Eclipse daemon not running. starting it now on port ***的

    daemon not running. starting it now on port ***的 1) 运行 cmd,进入命令行2) 输入 netstat -ano ,找出占用端口***(port * ...

  2. 命令：which、whereis、who和w

    开始 命令搜索的顺序 在shell function中查找,有则调用,无则下一步: 判断命令是否为bash内置命令,有则调用,无则下一步: 在$PATH中搜索该命令,有则调用,无则报错. 判断命令类型 ...

  3. Linux安装系统选择 日报 18/06/23

    Linux安装系统选择 Centos7 程序体积7个G,如果是学习伊始, 注意不要选择那个体积小的,因为我装过之后进去发现这个wifie还要自己进行一些烈的命令才能连接成功.很麻烦的. 安装比较顺利但 ...

  4. opencv 掩膜操作 滤波 卷积核定义 增强对比度 掩膜运算

    /* 矩阵的掩膜操作 0 掩膜mask 在这里进行增强对比度: [ [ 0,-1, 0 ], [-1, 5, -1], [ 0,-1, 0 ] ] 使用mask滑动图片每一个位置,进行卷积运算 这里这 ...

  5. 机器学习之路： python 实践 word2vec 词向量技术

    git: https://github.com/linyi0604/MachineLearning 词向量技术 Word2Vec 每个连续词汇片段都会对后面有一定制约 称为上下文context 找到句 ...

  6. linux服务器安装swoole扩展

    说明: swoole只能用在LInux,macos系统上,不能用作Windows系统上 2.0.12版本开始不再支持PHP5 安装方式一:pecl安装 适用于php7.0以上版本 centOS中: # ...

  7. 【贪心】【字典树】Gym - 101466A - Gaby And Addition

    题意:定义一种无进位加法运算,给你n个正整数,问你取出两个数,使得他们加起来和最大/最小是多少. 无进位加法运算,其实是一种位运算,跟最大xor那个套路类似,很容易写出对于每个数字,其对应的最优数字是 ...

  8. Codeforces Round #298 (Div. 2) B. Covered Path 物理题/暴力枚举

    B. Covered Path Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/534/probl ...

  9. 自动化运维之 ~cobbler~

    一 .Cobbler简介 Cobbler是一个快速网络安装linux的服务,而且在经过调整也可以支持网络安装windows.该工具使用python开发,小巧轻便(才15k 行python代码),使用简 ...

  10. 怎样在MyEclipse上耍Chrome

    近期在忙着期末大作业,所以Windows App和算法的专栏都没有更了,随后这几天都会陆续開始更新的,欢迎大家的关注啦-- 在写期末大作业的时候遇到一个问题.一个新的特性在MyEclipse自带的浏览 ...