爲何你創建cesium-navigation插件?javascript
插件形式不影響以前項目使用,es6 使用css
首先,全部的Cesiumjs sdk 不包括羅盤,導航儀(放大/縮小)和距離刻度。您可使用鼠標在地圖上導航,但這個導航插件可爲用戶提供更多的導航控制和功能。其中一些功能是:將羅盤重置爲指向北部,重置軌道,並將視圖重置爲默認邊界。html
How to use it?vue
$ npm install cesium-navigation-es6 --save
<template> <div id="cesiumContainer"></div> </template> <script type="text/javascript"> import Cesium from "cesium/Cesium"; import "cesium/Widgets/widgets.css"; import CesiumNavigation from "cesium-navigation-es6"; var options = {}; // 用於在使用重置導航重置地圖視圖時設置默認視圖控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle. options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50); // 用於啓用或禁用羅盤。true是啓用羅盤,false是禁用羅盤。默認值爲true。若是將選項設置爲false,則羅盤將不會添加到地圖中。 options.enableCompass= true; // 用於啓用或禁用縮放控件。true是啓用,false是禁用。默認值爲true。若是將選項設置爲false,則縮放控件將不會添加到地圖中。 options.enableZoomControls= false; // 用於啓用或禁用距離圖例。true是啓用,false是禁用。默認值爲true。若是將選項設置爲false,距離圖例將不會添加到地圖中。 options.enableDistanceLegend= false; // 用於啓用或禁用指南針外環。true是啓用,false是禁用。默認值爲true。若是將選項設置爲false,則該環將可見但無效。 options.enableCompassOuterRing= true; let viewer = new Cesium.Viewer("cesiumContainer"); CesiumNavigation(viewer, options);
Is there a demo using the plugin ?java
This is the demo:git
(https://github.com/richard1015/cesium-vue-example)es6
參考文章github
https://www.jianshu.com/p/dd364b59b774shell
https://www.jianshu.com/p/fb237c7eb48cnpm
https://blog.csdn.net/Prepared/article/details/68940997?locationNum=10&fps=1