• 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）做了很多改进，并修复了哥伦布和二维模式的一些问题。
  • 相关阅读:
    Python-24-多线程
    RT-Thread动态内存堆的使用
    Linux编程概念
    Linux_C语言基础
    文件IO_open(),read(),write(),lseek(),close()
    SourceTree跳转注册的方法
    Linux——软件安装
    初学DOM树解析xml文件
    简单json语句转化为map保存
    最大独立集求解
  • 原文地址：https://www.cnblogs.com/mazhenyu/p/8512686.html
Copyright © 2020-2023  润新知