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,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
3325 10
|
11月前
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
196 1
|
11月前
|
数据可视化 定位技术
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
83 0
|
11月前
|
数据可视化 容器
漏刻有时数据可视化Echarts组件开发(6):象形柱图实现水塔水位的动画
漏刻有时数据可视化Echarts组件开发(6):象形柱图实现水塔水位的动画
64 0
|
11月前
|
数据可视化 定位技术 数据格式
漏刻有时数据可视化Echarts组件开发(18):渐变透明柱状图和地图map结合的案例
漏刻有时数据可视化Echarts组件开发(18):渐变透明柱状图和地图map结合的案例
123 0
|
11月前
|
定位技术 API
Cesium开发:常用地图事件
Cesium开发:常用地图事件
246 0
|
11月前
|
JavaScript API
Cesium开发:模拟建筑楼板数据
Cesium开发:模拟建筑楼板数据
184 0
|
数据可视化 前端开发 JavaScript
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
3238 0
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
三维组态部件动画解决方案
三维组态部件动画解决方案
三维组态部件动画解决方案
|
前端开发 数据可视化 定位技术
Threejs - 搭建三维场景
Threejs - 搭建三维场景
Threejs - 搭建三维场景