cesiumjs学习笔记之三——cesium-navigation插件 【转】
2018-03-06 10:00
141 查看
http://blog.csdn.net/Prepared/article/details/68940997?locationNum=10&fps=1
插件源码地址：https://github.com/alberto-acevedo/cesium-navigation
1)将所有模块从Browserify转换为requirejs；
2)使用gulpjs来编译和缩小较少的文件，捆绑和最小化所有模块，并将源依赖关系打包成一个文件。作为构建过程的一部分，用almondjs替换requirejs，以减少插件中使用的AMD加载器的占用空间。almondjs库也在插件内绑定，使插件像铯中的即插即用一样简单；
3)使用nodejs和requirejs优化器以及almondjs，整个插件被构建并捆绑在单个文件中，甚至CSS样式也放在这个文件中；
4）该插件可以用作独立脚本或通过AMD加载程序（使用requirejs进行测试）。即使在使用AMD而不是cesium的特殊情况下，插件也可以轻松使用。
导入脚本：
[html]viewplaincopy
<head>
<!--otherstuff-->
<scriptsrc="path/to/Cesium.js"></script>
<!--IMPORTANT:becausethecesiumnavigationviewermixindependsonCesiumbesuretoloaditafterCesium-->
<scriptsrc="path/to/standalone/viewerCesiumNavigationMixin.js"></script>
<!--otherstuff...-->
</head>
然后扩展viewer：
[javascript]viewplaincopy
//createaviewerassumingthereisaDIVelementwithid'cesiumContainer'
varcesiumViewer=newCesium.Viewer('cesiumContainer');
//extendourviewbythecesiumnavigatonmixin
cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin,{});
或者一个部件：
[javascript]viewplaincopy
//createawidgetassumingthereisaDIVelementwithid'cesiumContainer'
varcesiumWidget=newCesium.CesiumWidget('cesiumContainer');
//extendourviewbythecesiumnavigatonmixin
Cesium.viewerCesiumNavigationMixin.mixinWidget(cesiumWidget,{});
可以通过一下方式获取新创建的实例：
[javascript]viewplaincopy
//ifusingaviewer
varcesiumNavigation=cesiumViewer.cesiumNavigation;
//ifusingawidget
varcesiumNavigation=cesiumWidget.cesiumNavigation;
另外一个例子：
b.如果除了cesium之外，你使用了requirejs，则要使用：
[html]viewplaincopy
<head>
<!--otherstuff...-->
<scriptsrc="path/to/Cesium.js"></script>
<!--重要！加载requirejs在cesium之后-->
<!--viewerCesiumNavigationMixintheglobalvariableCesiumisalreadyset-->
<scripttype="text/javascript"src="path/to/require.js"></script>
<scripttype="text/javascript">
require.config({
//yourconfig...
});
</script>
<!--otherstuff...-->
</head>
加上：
[html]viewplaincopy
//IMPORTANT:besurethatCesium.jshasalreadybeenloaded,e.g.byloadingrequirejsAFTERCesium
require(['path/to/standalone/viewerCesiumNavigationMixin'],function(viewerCesiumNavigationMixin){
//likeabovecodebutadditionallyonecandirectlyaccess
//viewerCesiumNavigationMixin
//insteadof
//Cesium.viewerCesiumNavigationMixin
}
c.如果您正在为整个项目（包括cesium）使用requirejs，那么您必须使用AMD兼容版本。
[html]viewplaincopy
<head>
<!--otherstuff...-->
<scripttype="text/javascript"src="path/to/require.js"></script>
<scripttype="text/javascript">
require.config({
//yourconfig...
paths:{
//yourpaths...
//重要！这里必须设置，因为viewerCesiumNavigationMixin使用Cesium/...依赖
'Cesium':'path/to/cesium/Source'
}
});
</script>
<!--otherstuff...-->
</head>
加上：
[javascript]viewplaincopy
require([
'Cesium/Cesium',
'path/to/amd/viewerCesiumNavigationMixin'
],function(
Cesium,
viewerCesiumNavigationMixin){
//likeabovebutnowyoucannotaccessCesium.viewerCesiumNavigationMixin
//butusejustviewerCesiumNavigationMixin
});
或者：
[javascript]viewplaincopy
require([
'Cesium/Core/Viewer',
'path/to/amd/viewerCesiumNavigationMixin'
],function(
CesiumViewer,
viewerCesiumNavigationMixin){
//likeabovebutnowyoucannotaccessCesium.viewerCesiumNavigationMixin
//butusejustviewerCesiumNavigationMixin
});
设置插件选项
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]viewplaincopy
varoptions={};
options.defaultResetView=Cesium.Rectangle.fromDegrees(71,3,90,14);
//Onlythecompasswillshowonthemap
options.enableCompass=true;
options.enableZoomControls=false;
options.enableDistanceLegend=false;
options.enableCompassOuterRing=true;
cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin,options);
仍然有问题，请查看例子。
删除导航插件并释放资源使用：
[javascript]viewplaincopy
viewer.cesiumNavigation.destroy();
怎么建立cesium-navigation插件？
执行：
执行：
对于开发/调试，您应该看看“SourceExample”文件件。该示例直接使用源文件，因此它允许您立即使用（只需要刷新一次页面），不需要重新构建任何内容即可查看更改。此外，由于使用来源，您可以轻松地调试项目（例如通过浏览器的开发人员控制台或通过IDE的调试器，如Webstorm）
有没有使用该插件的实例？
(http://larcius.github.io/cesium-navigation/)
1)指南针，导航仪和距离刻度将显示在地图的右侧。
2)此插件已成功测试cesium1.15版。它在3D模式下适用于cesium。最近Larcius（https://github.com/Larcius）做了很多改进，并修复了哥伦布和二维模式的一些问题。
插件源码地址：https://github.com/alberto-acevedo/cesium-navigation
cesium-navigation
cesium-navigation是一个cesium的插件，提供指南针、导航仪和距离刻度用户图形界面。1、为什么你建立cesium-navigation插件？
首先，所有的Cesiumjssdk不包括罗盘，导航仪（放大/缩小）和距离刻度。您可以使用鼠标在地图上导航，但这个导航插件可为用户提供更多的导航控制和功能。其中一些功能是：将罗盘重置为指向北部，重置轨道，并将视图重置为默认边界。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]
<head>
<!--otherstuff-->
<scriptsrc="path/to/Cesium.js"></script>
<!--IMPORTANT:becausethecesiumnavigationviewermixindependsonCesiumbesuretoloaditafterCesium-->
<scriptsrc="path/to/standalone/viewerCesiumNavigationMixin.js"></script>
<!--otherstuff...-->
</head>
然后扩展viewer：
[javascript]
//createaviewerassumingthereisaDIVelementwithid'cesiumContainer'
varcesiumViewer=newCesium.Viewer('cesiumContainer');
//extendourviewbythecesiumnavigatonmixin
cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin,{});
或者一个部件：
[javascript]
//createawidgetassumingthereisaDIVelementwithid'cesiumContainer'
varcesiumWidget=newCesium.CesiumWidget('cesiumContainer');
//extendourviewbythecesiumnavigatonmixin
Cesium.viewerCesiumNavigationMixin.mixinWidget(cesiumWidget,{});
可以通过一下方式获取新创建的实例：
[javascript]
//ifusingaviewer
varcesiumNavigation=cesiumViewer.cesiumNavigation;
//ifusingawidget
varcesiumNavigation=cesiumWidget.cesiumNavigation;
另外一个例子：
b.如果除了cesium之外，你使用了requirejs，则要使用：
[html]
<head>
<!--otherstuff...-->
<scriptsrc="path/to/Cesium.js"></script>
<!--重要！加载requirejs在cesium之后-->
<!--viewerCesiumNavigationMixintheglobalvariableCesiumisalreadyset-->
<scripttype="text/javascript"src="path/to/require.js"></script>
<scripttype="text/javascript">
require.config({
//yourconfig...
});
</script>
<!--otherstuff...-->
</head>
加上：
[html]
//IMPORTANT:besurethatCesium.jshasalreadybeenloaded,e.g.byloadingrequirejsAFTERCesium
require(['path/to/standalone/viewerCesiumNavigationMixin'],function(viewerCesiumNavigationMixin){
//likeabovecodebutadditionallyonecandirectlyaccess
//viewerCesiumNavigationMixin
//insteadof
//Cesium.viewerCesiumNavigationMixin
}
c.如果您正在为整个项目（包括cesium）使用requirejs，那么您必须使用AMD兼容版本。
[html]
<head>
<!--otherstuff...-->
<scripttype="text/javascript"src="path/to/require.js"></script>
<scripttype="text/javascript">
require.config({
//yourconfig...
paths:{
//yourpaths...
//重要！这里必须设置，因为viewerCesiumNavigationMixin使用Cesium/...依赖
'Cesium':'path/to/cesium/Source'
}
});
</script>
<!--otherstuff...-->
</head>
加上：
[javascript]
require([
'Cesium/Cesium',
'path/to/amd/viewerCesiumNavigationMixin'
],function(
Cesium,
viewerCesiumNavigationMixin){
//likeabovebutnowyoucannotaccessCesium.viewerCesiumNavigationMixin
//butusejustviewerCesiumNavigationMixin
});
或者：
[javascript]
require([
'Cesium/Core/Viewer',
'path/to/amd/viewerCesiumNavigationMixin'
],function(
CesiumViewer,
viewerCesiumNavigationMixin){
//likeabovebutnowyoucannotaccessCesium.viewerCesiumNavigationMixin
//butusejustviewerCesiumNavigationMixin
});
设置插件选项
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]
varoptions={};
options.defaultResetView=Cesium.Rectangle.fromDegrees(71,3,90,14);
//Onlythecompasswillshowonthemap
options.enableCompass=true;
options.enableZoomControls=false;
options.enableDistanceLegend=false;
options.enableCompassOuterRing=true;
cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin,options);
仍然有问题，请查看例子。
删除导航插件并释放资源使用：
[javascript]
viewer.cesiumNavigation.destroy();
怎么建立cesium-navigation插件？
执行：
npminstall
执行：
nodebuild.js
开发指引
对于开发/调试，您应该看看“SourceExample”文件件。该示例直接使用源文件，因此它允许您立即使用（只需要刷新一次页面），不需要重新构建任何内容即可查看更改。此外，由于使用来源，您可以轻松地调试项目（例如通过浏览器的开发人员控制台或通过IDE的调试器，如Webstorm）有没有使用该插件的实例？
(
1)指南针，导航仪和距离刻度将显示在地图的右侧。
2)此插件已成功测试cesium1.15版。它在3D模式下适用于cesium。最近Larcius（https://github.com/Larcius）做了很多改进，并修复了哥伦布和二维模式的一些问题。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- cesiumjs学习笔记之三——cesium-navigation插件
- 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）
- cesiumjs学习笔记之二——空间数据可视化
- [学习笔记]zTree是一个很好的js插件实现加载树形结构
- cesiumjs学习笔记之一——环境搭建
- Bootstrap教程JS插件滚动监听学习笔记分享
- cesiumjs学习笔记之四——CZML
- 学习笔记： js插件 —— fullPage.js （页面全屏滚动）
- cesiumjs学习笔记——CZML
- Bootstrap教程JS插件弹出框学习笔记分享
- Bootstrap教程JS插件弹出框学习笔记分享
- Node.js学习笔记_模块调用
- js 正则表达式学习笔记之匹配字符串
- 百度IFE学习笔记（一）js二维数组排序
- node.js学习笔记——练习使用mysql
- Knockout.Js官网学习（Mapping插件）
- ExtJS学习笔记（一）：ExtJS程序的结构及如何定义js的private, public属性、方法
- js学习笔记之标准库
- spring boot 学习笔记（003） 静态资源（html/js等文件）
- JS学习笔记