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

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

cesium plugin /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 不包括罗盘,导航仪(放大/缩小)和距离刻度。您可以使用鼠标在地图上导航,但这个导航插件可为用户提供更多的导航控制和功能。其中一些功能是:将罗盘重置为指向北部,重置轨道,并将视图重置为默认边界。

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;

// 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。

options.enableCompassOuterRing= true;

let viewer = new Cesium.Viewer("cesiumContainer");

CesiumNavigation(viewer, options);

Other Cesium Plugin

cesium-print /github

参考文章

https://www.jianshu.com/p/dd364b59b774

https://www.jianshu.com/p/fb237c7eb48c

https://blog.csdn.net/Prepared/article/details/68940997?locationNum=10&fps=1

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Awesome Ruby Toolbox Awesome A collection of awesome Ruby...
    debbbbie阅读 2,935评论 0 3
  • 英文文档,一开始我也是抗拒的,边翻译边看,也就花费了1个小时基本就阅读过了,我的英文基础其实很差。附上链接:链接:...
    lonecolonel阅读 10,036评论 3 1
  • # Awesome Python [![Awesome](https://cdn.rawgit.com/sindr...
    emily_007阅读 2,228评论 0 3
  • 什么是 CALayer?在 iOS 系统中,我们能够看得见摸得着的基本都是 UIView,比如一个 label、b...
    海盗军长阅读 604评论 0 0
  • 网络购物真是方便快捷。昨天小陈果要魔法棒,和她在网上选购下单,今天早晨便送到了门口。每次取快递,看到快递小哥,就感...
    月明非为夜行人阅读 1,250评论 28 40