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

時間 2019-12-12

標籤 cesium navigation 使用 require es6 引用欄目 JavaScript 简体版

原文原文鏈接

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.javascript

Demo

cesium plugin /democss

Code Demo

github.com/richard1015…vue

Why did you build it?java

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.git

爲何你創建cesium-navigation插件？es6

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

How to use it?npm

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); 複製代碼