插件源码地址:https://github.com/alberto-acevedo/cesium-navigation cesium-navigation cesium-navigation是一个cesium的插件,提供指南针、导航仪和距离刻度用户图形界面。 1、为什么你建立cesium-navigation插件? 首先,所有的Cesiumjs sdk 不包括罗盘,导航仪(放大/缩小)和距离刻度。您可以使用鼠标在地图上导航,但这个导...
4)创建cesium时引用的容器id要和之前定义的dom元素id值一致,即本例中的testCesium,它可以修改,但要两处同时修改。 步骤4:添加cesium-navigation导航 npm install cesium-navigation-es6 --save 步骤5:配置cesium-navigation导航 在TestView中引入cesium-navigation,在cesium的引用代码后添加引用代码: 在定义的cesium vie...
运行cesium项目后,通过f12观察HTML代码可知cesium-navigation-es6的结构如下所示: HTML结构 其中.distanceLegendDiv为cesium-navigation-es6的比例尺组件,一般在屏幕左下角,navigationDiv是指北针及缩放组件,一般在屏幕右上角,展开后可看到详细的id和class名称。 constnavigationMode=document.getElementsByClassName('navigation-...
1、下载指定版本 cnpm i cesium-navigation-es6@1.0.9 -S 2、引入插件 importCesiumNavigationfrom'cesium-navigation-es6/viewerCesiumNavigationMixin' 3、修改源文件(由于会出现两中错误报错,所以修改源文件,具体原理 Cesium 1.63 版本之前是用的AMD的方式进行编译的) ```报错信息:"export ‘default’ (imported a...
1、为什么需要cesium-navigation插件? 所有的Cesiumjs sdk 不包括罗盘,导航仪(放大/缩小)和距离刻度。您可以使用鼠标在地图上导航,但这个导航插件可为用户提供更多的导航控制和功能。其中一些功能是:将罗盘重置为指向北部,重置轨道,并将视图重置为默认边界。
yarn add cesium-navigation-es6 二、使用插件 按 照官方代码示例代码示例,修改了几个配置,显示所有功能( 罗盘、缩放控件、比例尺 )。 importCesiumNavigationfrom"cesium-navigation-es6"; varoptions = {}; // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle...
为什么你建立cesium-navigation插件? 首先,所有的Cesiumjs sdk 不包括罗盘,导航仪(放大/缩小)和距离刻度。您可以使用鼠标在地图上导航,但这个导航插件可为用户提供更多的导航控制和功能。其中一些功能是:将罗盘重置为指向北部,重置轨道,并将视图重置为默认边界。
cesium-navigation-umd 修改说明 使用说明 编译说明 其他 cesium-navigation-umd 这是一个基于cesium-navigation-es6 迁移的仓库。但是原作者仅提供es6模式下的引用,需要npm安装。我使用rollup重新编译了原作者的release。去掉了dev依赖。dist中内容为编译产物。可以直接引用。
CesiumNavigation new CesiumNavigation(viewerCesiumWidget, options) Example new CesiumNavigation(viewer, { enableCompass: true, // 罗盘 enableZoomControls: true, // 缩放控制器 enableDistanceLegend: true, // 比例尺 enableCompassOuterRing: true, // 罗盘外环 view: { // 初始化视角 "x": ...
import{Viewer,Rectangle}from"cesium";import'cesium/Build/Cesium/Widgets/widgets.css';importCesiumNavigationfrom"cesium-navigation-es6";constviewer=newViewer("cesiumContainer",{animation:false,timeline:false});constoptions={};// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic...