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.
Demo
Code Demo
https://github.com/richard1015/cesium-vue-example /(cesium-print,cesium-navigation-es6)
Why did you build it?
First of all the Cesiumjs sdk does not includes a compass, navigator (zoom in/out), and 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.
為什么你建立cesium-navigation插件?
首先,所有的Cesiumjs sdk 不包括羅盤,導航儀(放大/縮?。┖途嚯x刻度。您可以使用鼠標在地圖上導航,但這個導航插件可為用戶提供更多的導航控制和功能。其中一些功能是:將羅盤重置為指向北部,重置軌道,并將視圖重置為默認邊界。
How to use it?
QuickStart
$ 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;
// 用于啟用或禁用指南針外環(huán)。true是啟用,false是禁用。默認值為true。如果將選項設置為false,則該環(huán)將可見但無效。
options.enableCompassOuterRing= true;
let viewer = new Cesium.Viewer("cesiumContainer");
CesiumNavigation(viewer, options);
Other Cesium Plugin
參考文章
http://www.itdecent.cn/p/dd364b59b774
http://www.itdecent.cn/p/fb237c7eb48c
https://blog.csdn.net/Prepared/article/details/68940997?locationNum=10&fps=1