1、放大

/*** 放大* @param viewer*/
const zoomIn = (viewer)=>{let position = viewer.camera.position;let cameraHeight = viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;// 每次放大 10 倍，参数可改let moveRate = cameraHeight / 10.0;viewer.camera.moveForward(moveRate);
}

2、缩小

/*** 缩小* @param viewer*/
const zoomOut =(viewer)=>{let position = viewer.camera.position;let cameraHeight = viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;// 每次缩小 10 倍，参数可改let moveRate = cameraHeight / 10.0;viewer.camera.moveBackward(moveRate);
}

3、回归初始位置

//3D初始位置
const originLocation3D ={destination: Cesium.Cartesian3.fromDegrees(117.28, 31.86, 100000.0)
}/*** 回到初始位置* @param viewer*/
const goHome = (viewer)=>{viewer.camera.flyTo(originLocation3D,{duration:1000})
}

4、全屏

/*** 全屏* @param viewer* @param domId*/
const fullScreen = (viewer,domId)=>{// Cesium.Fullscreen.requestFullscreen(document.getElementById('domId'));//或 按需Cesium.Fullscreen.requestFullscreen(viewer.scene.canvas)
}

5、前一视图和后一视图

let viewPosition=[];
let viewIndex = -1;
let addviewPositionFlag = false;
let _is3D=true;/*** 初始化地图移动监听事件* @param viewer*/
const initWatchMoveEvent=(viewer)=>{viewer.camera.moveEnd.addEventListener(()=>{if(!addviewPositionFlag){if(_is3D){viewPosition.push({destination:new Cesium.Cartesian3(Number(viewer.camera.position.x),Number(viewer.camera.position.y),Number(viewer.camera.position.z)),orientation:{heading : viewer.scene.camera.heading,pitch :viewer.scene.camera.pitch,roll :viewer.scene.camera.roll}})}else{let cp = viewer.camera.positionCartographic;viewPosition.push({destination:new Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(cp.longitude).toFixed(6),Cesium.Math.toDegrees(cp.latitude).toFixed(6),cp.height),})}viewIndex++;}addviewPositionFlag=false;})
}/*** 返回上一视图* @param viewer*/
const previousView =(viewer)=>{if (viewIndex != 0) {viewer.camera.flyTo(viewPosition[viewIndex-1])addviewPositionFlag = true;viewIndex--;}
}/*** 返回下一视图* @param viewer*/
const nextView =(viewer)=>{if (viewPosition.length == 0) {return;}if (viewIndex != viewPosition.length - 1) {viewer.camera.flyTo(viewPosition[viewIndex + 1])addviewPositionFlag = true;viewIndex++;}
}/*** 重置*/
const _resetWatchEvent=()=>{viewPosition = [];viewIndex = -1;addviewPositionFlag = false;
}

页面调用：

初始化viewer 后首先调用

//监听移动事件
initWatchMoveEvent(viewer);

tips：我这方法适用于进入地图一开始就设置了初始位置的（即默认不是整个球的），如果你没设置初始位置，则需要部分修改，否则会移动2次以上才会生效

cesium 实战记录（六）地图通用工具方法的封装相关推荐

Cesium实战记录（八）三维风场+风速热力图（水平+垂直）
目录老规矩首先看下效果一.风场 1.数据 2.原理剖析首先,第一步就是构造网格数据然后,撒粒子再然后,起风吧二.热力场老规矩首先看下效果风场v1.0(平面版,只有U V 方向风速) 三 ...
cesium 实战记录（一）底图动态配置，前端实现切换
上帝希望: 有个底图管理功能,用户配置好需要展示的底图后,在地图页面会出现相应的底图可供切换: 大概就这样吧底图切换. 思考: 1.首先要想动态管理底图,地图页面动态渲染底部的basemap组件. 那 ...
Cesium实战记录（五）天际线分析
老规矩看下效果:(版本是1.94的) 实现思路:(引用网上大佬的) 利用Cesium 的边缘检测和后期处理效果的叠加.即在地图上检测此视角下的地形边缘,叠加标价效果层,叠加针对边缘实例和前一个边缘效果 ...
Cesium 实战记录（四）绘制点线面的工具封装
老样子先看效果: 画点: (tips:我的代码里手动将点的高度提高了50m) 画线: 画面: 看下封装的类结构吧: 看下调用的操作页面: vue页面: 引入工具类: js:初始化工具,然后激活点线面 ...
python ui自动化配置文件,python UI自动化实战记录八：添加配置
添加配置文件写入测试地址等,当环境切换时只需修改配置文件即可. 1 在项目目录下添加文件 config.ini 写入: [Domain] domain = http://test.domain.cn ...
Linux实战案例（4）CentOS清除用户登录记录和命令历史方法
CentOS清除用户登录记录和命令历史方法清除登陆系统成功的记录 [root@localhost root]# echo > /var/log/wtmp //此文件默认打开时乱码,可查到ip等 ...
Cesium 实战 - 最新版（1.104.0）通过异步方式初始化地球，加载影像以及高程图层
Cesium 实战-最新版(1.104.0)通过异步方式初始化地球,加载影像以及高程图层遇到问题初始化底图初始化高程(监听载入完成事件,开启关闭高程) 初始化 3dtile 在线示例 Cesiu ...
深度学习实战（六）：从零开始实现表情识别
深度学习实战(六):从零开始实现表情识别 1. 项目简介 2. 数据获取 2.1 数据爬取 2.2 数据整理 2.3 数据清洗 2.4 提取嘴唇区域 3. 模型训练 3.1 数据接口准备 3.1.1 ...
python数据分析与挖掘项目实战记录
python数据挖掘项目实战记录取自<Python数据分析与挖掘实战>一书,整理各个项目中用到的数据处理方法: 数据预处理方法建立模型方法绘制图形对于分类问题:用模型分类:混淆矩阵 ...

cesium 实战记录（六）地图通用工具方法的封装

1、放大

2、缩小

3、回归初始位置

4、全屏

5、前一视图和后一视图

cesium 实战记录（六）地图通用工具方法的封装相关推荐

最新文章

热门文章