cesium里面没有指南针

需要安装其他的插件: cesium-navigation-es6

npm i cesium-navigation-es6 -S

安装好之后在mainjs里引入

import CesiumNavigation from 'cesium-navigation-es6'

配置一下CesiumNavigation的全局变量

Vue.prototype.CesiumNavigation = CesiumNavigation

在vue页面的初始化里加上

var options = {}
// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.
options.defaultResetView = this.Cesium.Cartographic.fromDegrees(115, 30, 2000000);
// 用于启用或禁用罗盘。true是启用罗盘,false是禁用罗盘。默认值为true。如果将选项设置为false,则罗盘将不会添加到地图中。
options.enableCompass= true;
// 用于启用或禁用缩放控件。true是启用,false是禁用。默认值为true。如果将选项设置为false,则缩放控件 将不会添加到地图中。
options.enableZoomControls= true;
// 用于启用或禁用距离图例。true是启用,false是禁用。默认值为true。如果将选项设置为false,距离图例将不会添加到地图中。
options.enableDistanceLegend= true;
// 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
options.enableCompassOuterRing= true;
this.CesiumNavigation(this.viewer, options);

地球上就会出现 罗盘 放大缩小 比例尺,根据自己的需求更改颜色或位置

=========================2020.1.3============================

如果说你安装了该插件,最后运行报错,如下:

* cesium in ./node_modules/cesium-navigation-es6/CesiumNavigation.js, ./node_modules/cesium-navigation-es6/core/registerKnockoutBindings.js and 8 others

那么你就得去关注一下你的 cesium-navigation-es6的版本了  1.0.9这个版本是可用的

安装:

npm i cesium-navigation-es6@1.0.9 -S

Cesium指南针的更多相关文章

  1. Cesium坐标系及坐标转换详解

    前言 Cesium项目中经常涉及到模型加载.浏览以及不同数据之间的坐标转换,弄明白Cesium中采用的坐标系以及各个坐标系之间的转换,是我们迈向三维GIS大门的前提,本文详细的介绍了Cesium中采用 ...

  2. Cesium中的坐标系及转换

    在我们开始学习Entity之前,我们首先需要先学习下Cesium中的坐标系,Cesium中有多个坐标系,在进行添加Entity时经常会使用到. 一.坐标系介绍 我们先来列举下Cesium中的坐标系:W ...

  3. cesium自定义气泡窗口infoWindow

    一.自定义气泡窗口与cesium默认窗口效果对比: 1.cesium点击弹出气泡窗口显示的位置固定在地图的右上角,默认效果: 2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说 ...

  4. cesium核心类Viewer简介

    1.简单描述Viewer Viewer类是cesium的核心类,是地图可视化展示的主窗口,cesium程序应用的切入口,扮演必不可少的核心角色. 官网的英文解析如下: A base widget fo ...

  5. Cesium简介以及离线部署运行

    Cesium简介 cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎,一款开源3DGIS的js库.cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区 ...

  6. Cesium教程系列汇总

    Cesium系列目录: 应用篇 入门 Cesium应用篇:1快速搭建 影像 Cesium应用篇:2影像服务(上) Cesium应用篇:2影像服务(下) 控件 Cesium应用篇:3控件(1)Clock ...

  7. Cesium原理篇:GroundPrimitive

    今天来看看GroundPrimitive,选择GroundPrimitive有三个目的:1 了解GroundPrimitive和Primitive的区别和关系 2 createGeometry的特殊处 ...

  8. Cesium原理篇:Batch

    通过之前的Material和Entity介绍,不知道你有没有发现,当我们需要添加一个rectangle时,有两种方式可供选择,我们可以直接添加到Scene的PrimitiveCollection,也可 ...

  9. Cesium原理篇:Material

    Shader 首先,在本文开始前,我们先普及一下材质的概念,这里推荐材质,普及材质的内容都是截取自该网站,我觉得他写的已经够好了.在开始普及概念前,推荐一首我此刻想到的歌<光---陈粒>. ...

随机推荐

  1. python 常用技巧 — 数组 (array)

    目录: 1. 数组每一行除以这一行的总数(numpy divide row by row sum) 2. 数组每一行或者每一列求平均 (python average array columns or ...

  2. postgres之使用python连接并操作

    取一万个随机数,插入数据库 import random import psycopg2 import string conn=psycopg2.connect(database='postgres', ...

  3. 【JS】JS以及CSS对页面的阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  4. 06-图2 Saving James Bond - Easy Version(25 分)

    This time let us consider the situation in the movie "Live and Let Die" in which James Bon ...

  5. 芒果学院Python高级开发课程

  6. VC2010 CString.Format使用报错 error C2664

    error C2664: “void ATL::CStringT<BaseType,StringTraits>::Format(const wchar_t *,...)”: 不能将参数 1 ...

  7. Vuetify按需加载配置

    自己配置vuetify按需加载的步骤,在此记录: 执行npm install vuetify –save 或 yarn add vuetify添加vuetify添加依赖执行npm install -- ...

  8. (5)C++ 循环和判断

    循环 一.for循环 ; i < ; i++) { cout << "abc"<< endl; } 或 ; i; i--) { cout <&l ...

  9. Sublime 代码段设置

    # Sublime 代码段 > 依次找到:Tools -> Developer -> New Snippet,默认代码段配置文件如下: <snippet><cont ...

  10. STL中六大组件

    1)容器(Container),是一种数据结构,如list,vector,和deques ,以模板类的方法提供.为了访问容器中的数据,可以使用由容器类输出的迭代器: 容器(container)用于存放 ...