cesium-navigation 使用(非require,es6引用)

cesium-navigation-es6(非require,es6引用)

爲何你創建cesium-navigation插件?javascript

插件形式不影響以前項目使用,es6 使用css

首先,全部的Cesiumjs sdk 不包括羅盤,導航儀(放大/縮小)和距離刻度。您可使用鼠標在地圖上導航,但這個導航插件可爲用戶提供更多的導航控制和功能。其中一些功能是:將羅盤重置爲指向北部,重置軌道,並將視圖重置爲默認邊界。html

How to use it?vue

 

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;
// 用於啓用或禁用指南針外環。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

相關文章
相關標籤/搜索