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:
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.
<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:
// 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:
// 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:
<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
// 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
}
<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
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
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:
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
viewer.cesiumNavigation.destroy();
viewer.cesiumNavigation.setNavigationLocked(true/false);
How to build it?
npm install
node build.js
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 refresh is needed) see your changes without rebuilding anything. Furthermore due to working with the sources you can easily debug the project (e.g. via the developer console of the browser or via a debugger of your IDE like Webstorm)
Is there a demo using the plugin?
This is the demo:
(http://larcius.github.io/cesium-navigation/)
What about the license?
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。