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的插件，提供指南針、導(dǎo)航儀和距離刻度用戶圖形界面。
1、為什么你建立cesium-navigation插件？
首先，所有的Cesiumjs sdk 不包括羅盤，導(dǎo)航儀（放大/縮小）和距離刻度。您可以使用鼠標(biāo)在地圖上導(dǎo)航，但這個導(dǎo)航插件可為用戶提供更多的導(dǎo)航控制和功能。其中一些功能是：將羅盤重置為指向北部，重置軌道，并將視圖重置為默認(rèn)邊界。
2、怎么建立cesium-navigation插件？
cesium-navigation插件基于優(yōu)秀的羅盤，導(dǎo)航儀（放大/縮小）和距離terriajs開源庫的距離刻度。來自terriajs的導(dǎo)航UI不能在銫中開箱即用，因為cesium使用帶有RequireJS的CommonJS模塊，terriajs使用commonjs和Browserify，因此您不能將源文件復(fù)制到銫和構(gòu)建中。cesium-navigation插件的工作包括調(diào)整代碼在cesium作為插件工作如下：
1) 將所有模塊從Browserify轉(zhuǎn)換為requirejs；
2)使用gulpjs來編譯和縮小較少的文件，捆綁和最小化所有模塊，并將源依賴關(guān)系打包成一個文件。作為構(gòu)建過程的一部分，用almondjs替換requirejs，以減少插件中使用的AMD加載器的占用空間。almondjs庫也在插件內(nèi)綁定，使插件像銫中的即插即用一樣簡單；
3)使用nodejs和requirejs優(yōu)化器以及almondjs，整個插件被構(gòu)建并捆綁在單個文件中，甚至CSS樣式也放在這個文件中；
4）該插件可以用作獨立腳本或通過AMD加載程序（使用requirejs進(jìn)行測試）。即使在使用AMD而不是cesium的特殊情況下，插件也可以輕松使用。
3、怎么使用cesium-navigation插件？
cesium-navigation插件有兩個版本，一個獨立版和一個AMD兼容版本：
1）什么時候用什么版本？
a. 如果您正在加載沒有requirejs的銫（即，您有全局變量銫），則使用獨立版本。如果您使用requirejs（但不適用于銫），此版本也是適用的。
導(dǎo)入腳本：
[html] view plain copy
<head>
<!--otherstuff-->
<scriptsrc="path/to/Cesium.js"></script>
<!--IMPORTANT:becausethecesiumnavigationviewermixindependsonCesiumbesuretoloaditafterCesium-->
<scriptsrc="path/to/standalone/viewerCesiumNavigationMixin.js"></script>
<!--otherstuff...-->
</head>
然后擴(kuò)展viewer：
[javascript] view plain copy
//createaviewerassumingthereisaDIVelementwithid'cesiumContainer'
varcesiumViewer=newCesium.Viewer('cesiumContainer');
//extendourviewbythecesiumnavigatonmixin
cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin,{});
或者一個部件：
[javascript] view plain copy
//createawidgetassumingthereisaDIVelementwithid'cesiumContainer'
varcesiumWidget=newCesium.CesiumWidget('cesiumContainer');
//extendourviewbythecesiumnavigatonmixin
Cesium.viewerCesiumNavigationMixin.mixinWidget(cesiumWidget,{});
可以通過一下方式獲取新創(chuàng)建的實例：
[javascript] view plain copy
//ifusingaviewer
varcesiumNavigation=cesiumViewer.cesiumNavigation;
//ifusingawidget
varcesiumNavigation=cesiumWidget.cesiumNavigation;
另外一個例子：
b. 如果除了cesium之外，你使用了requirejs ，則要使用：
[html] view plain copy
<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] view plain copy
//IMPORTANT:besurethatCesium.jshasalreadybeenloaded,e.g.byloadingrequirejsAFTERCesium
require(['path/to/standalone/viewerCesiumNavigationMixin'],function(viewerCesiumNavigationMixin){
//likeabovecodebutadditionallyonecandirectlyaccess
//viewerCesiumNavigationMixin
//insteadof
//Cesium.viewerCesiumNavigationMixin
}
c. 如果您正在為整個項目（包括cesium）使用requirejs，那么您必須使用AMD兼容版本。
[html] view plain copy
<head>
<!--otherstuff...-->
<scripttype="text/javascript"src="path/to/require.js"></script>
<scripttype="text/javascript">
require.config({
//yourconfig...
paths:{
//yourpaths...
//重要！這里必須設(shè)置，因為viewerCesiumNavigationMixin使用Cesium/...依賴
'Cesium':'path/to/cesium/Source'
}
});
</script>
<!--otherstuff...-->
</head>
加上：
[javascript] view plain copy
require([
'Cesium/Cesium',
'path/to/amd/viewerCesiumNavigationMixin'
],function(
Cesium,
viewerCesiumNavigationMixin){
//likeabovebutnowyoucannotaccessCesium.viewerCesiumNavigationMixin
//butusejustviewerCesiumNavigationMixin
});
或者：
[javascript] view plain copy
require([
'Cesium/Core/Viewer',
'path/to/amd/viewerCesiumNavigationMixin'
],function(
CesiumViewer,
viewerCesiumNavigationMixin){
//likeabovebutnowyoucannotaccessCesium.viewerCesiumNavigationMixin
//butusejustviewerCesiumNavigationMixin
});
設(shè)置插件選項
defaultResetView - >用于在使用重置導(dǎo)航重置地圖視圖時設(shè)置默認(rèn)視圖控制。接受的值是Cesium.Cartographic
和 Cesium.Rectangle.
enableCompass - >用于啟用或禁用羅盤。true是啟用羅盤，false是禁用羅盤。默認(rèn)值為true。如果將選項設(shè)置為false，則羅盤將不會添加到地圖中。
enableZoomControls - >用于啟用或禁用縮放控件。true是啟用，false是禁用。默認(rèn)值為true。如果將選項設(shè)置為false，則縮放控件將不會添加到地圖中。
enableDistanceLegend - >用于啟用或禁用距離圖例。true是啟用，false是禁用。默認(rèn)值為true。如果將選項設(shè)置為false，距離圖例將不會添加到地圖中。
enableCompassOuterRing - >用于啟用或禁用指南針外環(huán)。true是啟用，false是禁用。默認(rèn)值為true。如果將選項設(shè)置為false，則該環(huán)將可見但無效。
更多選項將在未來的插件版本中設(shè)置。
沒有requirejs加載cesium時設(shè)置選項的例子：
[javascript] view plain copy
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);
仍然有問題，請查看例子。
刪除導(dǎo)航插件并釋放資源使用：
[javascript] view plain copy
viewer.cesiumNavigation.destroy();
怎么建立cesium-navigation插件？
執(zhí)行：npm install
執(zhí)行：node build.js
開發(fā)指引
對于開發(fā)/調(diào)試，您應(yīng)該看看“Source Example”文件件。該示例直接使用源文件，因此它允許您立即使用（只需要刷新一次頁面），不需要重新構(gòu)建任何內(nèi)容即可查看更改。此外，由于使用來源，您可以輕松地調(diào)試項目（例如通過瀏覽器的開發(fā)人員控制臺或通過IDE的調(diào)試器，如Webstorm）
有沒有使用該插件的實例？
(http://larcius.github.io/cesium-navigation/)
1)指南針，導(dǎo)航儀和距離刻度將顯示在地圖的右側(cè)。
2)此插件已成功測試cesium 1.15版。 它在3D模式下適用于cesium。最近Larcius（https://github.com/Larcius）做了很多改進(jìn)，并修復(fù)了哥倫布和二維模式的一些問題。
總結(jié)
以上是生活随笔為你收集整理的cesiumjs学习笔记之三——cesium-navigation插件 【转】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梧州驾车到葫芦岛塔山阻击战纪念塔走哪条高
- 下一篇： 怎么创建具有真实纹理的CG场景岩石？