zoukankan      html  css  js  c++  java

  • cesiumjs学习笔记之三——cesium-navigation插件 【转】

    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（但不适用于铯），此版本也是适用的。

    导入脚本：

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



    然后扩展viewer：

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

    或者一个部件：

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

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

    [javascript] view plain copy
    1. // if using a viewer  
    2. var cesiumNavigation = cesiumViewer.cesiumNavigation;  
    3.   
    4. // if using a widget  
    5. var cesiumNavigation = cesiumWidget.cesiumNavigation;  

    另外一个例子：

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

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

    加上：

    [html] view plain copy
    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兼容版本。

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


    加上：

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


    或者：

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

    设置插件选项

    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时设置选项的例子：

    [javascript] view plain copy
    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);  


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

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

    [javascript] view plain copy
    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）做了很多改进，并修复了哥伦布和二维模式的一些问题。
  • 相关阅读:
    POJ 3672 水题......
    POJ 3279 枚举？
    STL
    241. Different Ways to Add Parentheses
    282. Expression Add Operators
    169. Majority Element
    Weekly Contest 121
    927. Three Equal Parts
    910. Smallest Range II
    921. Minimum Add to Make Parentheses Valid
  • 原文地址：https://www.cnblogs.com/mazhenyu/p/8512686.html
Copyright © 2011-2022 走看看