Cesium开发:二三维联动

简介: Cesium开发:二三维联动

费劲巴拉的想弄个cesium和二维地图的联动,先是按照原来的思路,通过二维地图的缩放范围坐标,计算cesium的观看视角和观看范围,在根据二维地图的中心点坐标,设置cesium的camera坐标一致,再实现二维地图移动时,移动三维地图。
后来发现,cesium的camera中,setview函数支持定位到一个范围,设置个rectangle的范围就行,把二维地图的缩放范围,赋予到里边即可,二维地图现在也能水平旋转了,同时在cesium中,也可以进行同步旋转,不过,二维地图控制cesium的时候,最好还是保持从上到下垂直俯视,这样计算起来简便一些,同步效果也比较好。
image.png
在cesium控制二维地图同步的时候,因为在cesium中,可以保持倾斜的视角,所以,在二维地图中的范围就不那么精确了,特别是当倾斜角pitch比较小的时候,那看的范围就很大,通过cesium中camera的computeViewRectangle计算观看的范围,同步到二维地图的范围。
测试的时候,在cesium中,离地图很近的情况,保持倾斜角pitch在10度左右,二维地图同步的范围就很大了图片,再加上cesium里的旋转,二维地图也得跟着旋转,这样同步起来的范围就误差比较大了。

相关文章
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
3664 10
|
2月前
Cesium制作鹰眼效果
这篇文章介绍了如何在Cesium中实现鹰眼(概览)功能,让用户可以从高空视角俯瞰整个三维地理场景。
52 1
Cesium制作鹰眼效果
|
2月前
|
JavaScript
ThreeJs绘制数字孪生仓库场景
这篇文章介绍了使用Three.js来构建一个数字孪生仓库的3D场景,包括创建地板和墙壁的基础步骤,并提供了相应的代码实现细节。
100 0
ThreeJs绘制数字孪生仓库场景
|
数据可视化
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
137 1
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
270 1
|
数据可视化 定位技术
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
121 0
|
7月前
|
数据可视化 定位技术 数据格式
Tableau可视化设计案例-07 多边形地图和背景图地图
Tableau可视化设计案例-07 多边形地图和背景图地图
|
定位技术 API
Cesium开发:常用地图事件
Cesium开发:常用地图事件
353 0
|
Web App开发 数据可视化 JavaScript
漏刻有时数据可视化Echarts组件开发(23):世界地图动态时间轴的散点气泡图
漏刻有时数据可视化Echarts组件开发(23):世界地图动态时间轴的散点气泡图
203 0
|
数据可视化 JavaScript 定位技术
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
565 0