# cesium-navigation
This is a Cesium plugin that adds to the Cesium map a user friendly compass, navigator (zoom in/out), and
distance scale graphical user interface.
**Why did you build it?**
First of all the Cesiumjs sdk does not include a compass, navigator (zoom in/out) nor distance scale. You can use the mouse to navigate on the map but this navigation plugin offers more navigation control and capabilities to the user.
Some of the capabilities are:
reset the compass to point to north, reset the orbit, and reset the view to a default bound.
**How did you build it?**
This plugin is based on the excellent compass, navigator (zoom in/out) and distance scale from the terriajs open source library (https://github.com/TerriaJS). The navigation UI from terriajs can not be used out of the box in Cesium because Cesium uses AMD modules with RequireJS, and the terriajs uses commonjs and Browserify, so you can't just copy the source files into Cesium and build. My work consisted on adapting the code to work within Cesium as a plugin as follows:
- Extracted the minimum required modules from terriajs.
- Converted all the modules from Browserify to requirejs.
- Using nodejs and the requirejs optimizer as well as almond the whole plugin is built and bundled in a single file even the CSS style
- This plugin can be used as a standalone script or via an AMD loader (tested with requirejs). Even in the special case where you use AMD but not for Cesium the plugin can be easily used.
**How to use it?**
*When to use which edition?*
There are two editions, a standalone edition and an AMD compatible edition. If you want to load the mixin via requireJS then use the AMD compatible edition. Otherwise use the standalone edition which includes almond to resolve dependencies. Below some examples are given for better understanding.
- If you are loading Cesium without requirejs (i.e. you have a global variable Cesium) then use the standalone edition. This edition is also suitable if you use requirejs but not for this mixin.
```HTML
<head>
<!-- other stuff -->
<script src="path/to/Cesium.js"></script>
<!-- IMPORTANT: because the cesium navigation viewer mixin depends on Cesium be sure to load it after Cesium -->
<script src="path/to/standalone/viewerCesiumNavigationMixin.js"></script>
<!-- other stuff ... -->
</head>
```
and then extend a viewer:
```JavaScript
// create a viewer assuming there is a DIV element with id 'cesiumContainer'
var cesiumViewer = new Cesium.Viewer('cesiumContainer');
// extend our view by the cesium navigaton mixin
cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin, {});
```
or a widget:
```JavaScript
// create a widget assuming there is a DIV element with id 'cesiumContainer'
var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer');
// extend our view by the cesium navigaton mixin
Cesium.viewerCesiumNavigationMixin.mixinWidget(cesiumWidget, {});
```
You can access the newly created instance via
```
// if using a viewer
var cesiumNavigation = cesiumViewer.cesiumNavigation;
// if using a widget
var cesiumNavigation = cesiumWidget.cesiumNavigation;
```
Another example if your are using requirejs except for Cesium:
```HTML
<head>
<!-- other stuff... -->
<script src="path/to/Cesium.js"></script>
<!-- IMPORTANT: loading requirejs after Cesium ensures that when requiring -->
<!-- viewerCesiumNavigationMixin the global variable Cesium is already set -->
<script type="text/javascript" src="path/to/require.js"></script>
<script type="text/javascript">
require.config({
// your config...
});
</script>
<!-- other stuff... -->
</head>
```
and code
```JavaScript
// IMPORTANT: be sure that Cesium.js has already been loaded, e.g. by loading requirejs AFTER Cesium
require(['path/to/amd/viewerCesiumNavigationMixin'], function(viewerCesiumNavigationMixin) {
// like above code but now one can directly access
// viewerCesiumNavigationMixin
// instead of
// Cesium.viewerCesiumNavigationMixin
}
```
- If you are using requirejs for your entire project, including Cesium, then you have to use the AMD compatible edition.
```HTML
<head>
<!-- other stuff... -->
<script type="text/javascript" src="path/to/require.js"></script>
<script type="text/javascript">
require.config({
// your config...
paths: {
// your paths...
// IMPORTANT: Cesium must point to either
'Cesium': 'path/to/cesium/Source'
// or to
'Cesium': 'path/to/cesium/Source/Cesium.js'
// or to
'Cesium': 'path/to/cesium/Build/Cesium'
// or to
'Cesium': 'path/to/cesium/Build/Cesium/Cesium.js'
// because viewerCesiumNavigationMixin uses 'Cesium' for dependencies
}
});
</script>
<!-- other stuff... -->
</head>
```
and the code
```JavaScript
require([
'Cesium/Cesium', // if Cesium points to Cesium directory
'Cesium', // if Cesium points to Cesium.js file
'path/to/amd/viewerCesiumNavigationMixin'
], function(
Cesium,
viewerCesiumNavigationMixin) {
// like above but now you cannot access Cesium.viewerCesiumNavigationMixin
// but use just viewerCesiumNavigationMixin
});
```
or if Cesium points to the Cesium directory
```JavaScript
require([
'Cesium/Core/Viewer',
'path/to/amd/viewerCesiumNavigationMixin'
], function(
CesiumViewer,
viewerCesiumNavigationMixin) {
// like above but now you cannot access Cesium.viewerCesiumNavigationMixin
// but use just viewerCesiumNavigationMixin
});
```
*Available options of the plugin*
```
defaultResetView --> option used to set a default view when resetting the map view with the reset navigation
control. Values accepted are of type Cesium.Cartographic and Cesium.Rectangle.
enableCompass --> option used to enable or disable the compass. Values accepted are true for enabling and false to disable. The default is true. The compass will not be added to the map if setting the option to false.
enableZoomControls --> option used to enable or disable the zoom controls. Values accepted are true for enabling and false to disable. The default is true. The zoom controls will not be added to the map if setting the option to false.
enableDistanceLegend --> option used to enable or disable the distance legend. Values accepted are true for enabling and false to disable. The default is true. The distance legend will not be added to the map if setting the option to false.
enableCompassOuterRing --> option used to enable or disable the Compass Outer Ring. Values accepted are true for enabling and false to disable. The default is true. The ring will be visible but inactive if setting the option to false.
More options will be set in future releases of the plugin.
```
Example of using the options when loading Cesium without requirejs:
```JavaScript
var options = {};
options.defaultResetView = Cesium.Rectangle.fromDegrees(71, 3, 90, 14);
// Only the compass will show on the map
options.enableCompass = true;
options.enableZoomControls = false;
options.enableDistanceLegend = false;
options.enableCompassOuterRing= true;
cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin, options);
```
*Others*
- To destroy the navigation object and release the resources later on use the following
```JavaScript
viewer.cesiumNavigation.destroy();
```
- To lock the compass and navigation controls use the following. Use true to lock mode,
false for unlocked mode. The default is false.
```JavaScript
viewer.cesiumNavigation.setNavigationLocked(true/false);
```
- if there are still open questions please checkout the examples
**How to build it?**
- run `npm install`
- run `node build.js`
- The build process also copies the files to the Example folder in order to always keep them sync with your build
**Developers guide**
For developing/debugging you should have a look at the "Source example". That example directly uses the source files and therefore it allows you to immediatley (only a page refres
没有合适的资源?快使用搜索试试~ 我知道了~
Cesium添加罗盘网速不好的可用
共51个文件
js:30个
html:6个
less:5个
0 下载量 9 浏览量
2023-11-19
21:08:44
上传
评论
收藏 1.14MB ZIP 举报
温馨提示
Cesium添加罗盘网速不好的可用
资源推荐
资源详情
资源评论
收起资源包目录
cesium-navigation-development.zip (51个子文件)
cesium-navigation-development
Examples
amd_except_cesium.html 3KB
standalone.html 3KB
Source
amd
main-build.js 2KB
main-source.js 2KB
SpirographPositionProperty_amd-source.js 6KB
mainConfig.js 538B
SpirographPositionProperty_amd-build.js 6KB
SpirographPositionProperty.js 6KB
server.js 4KB
amd_source.html 2KB
amd_build.html 2KB
build.js 498B
Build
amd.min.js 358KB
index.html 2KB
models
Cesium_Air.glb 541KB
Cesium_Ground.glb 625KB
.gitignore 38B
README.md 1KB
sources.html 766B
Source
copyrightHeader.js 273B
Core
Utils.js 2KB
registerKnockoutBindings.js 997B
KnockoutMarkdownBinding.js 2KB
createFragmentFromTemplate.js 451B
loadView.js 1KB
KnockoutHammerBinding.js 1KB
CesiumNavigation.js 7KB
Styles
cesium-navigation.less 1KB
DistanceLegend.less 933B
Navigation.less 3KB
Floating.less 372B
Core.less 5KB
ViewModels
ResetViewNavigationControl.js 4KB
NavigationViewModel.js 30KB
UserInterfaceControl.js 3KB
ZoomNavigationControl.js 5KB
NavigationControl.js 573B
DistanceLegendViewModel.js 6KB
SvgPaths
svgReset.js 419B
svgCompassOuterRing.js 2KB
svgCompassGyro.js 6KB
svgCompassRotationMarker.js 314B
viewerCesiumNavigationMixin.js 3KB
.jshintrc 911B
package.json 1KB
build.js 8KB
mainConfig.js 1KB
package-lock.json 63KB
.gitignore 2KB
README.md 9KB
bower.json 329B
共 51 条
- 1
资源评论
Webgiserin
- 粉丝: 209
- 资源: 10
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功