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,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
4301 10
|
JavaScript 前端开发 API
007 Umi 使用 TypeScript 提升开发者体验
007 Umi 使用 TypeScript 提升开发者体验
1334 0
007 Umi 使用 TypeScript 提升开发者体验
|
6月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
JavaScript 定位技术 异构计算
WebGis——从零开始vue使用cesium添加点线(四)
WebGis——从零开始vue使用cesium添加点线(四)
|
11月前
Cesium制作鹰眼效果
这篇文章介绍了如何在Cesium中实现鹰眼(概览)功能,让用户可以从高空视角俯瞰整个三维地理场景。
233 1
Cesium制作鹰眼效果
|
10月前
|
SQL 监控 关系型数据库
MySQL如何查看每个分区的数据量
通过本文的介绍,您可以使用MySQL的 `INFORMATION_SCHEMA`查询每个分区的数据量。了解分区数据量对数据库优化和管理具有重要意义,可以帮助您优化查询性能、平衡数据负载和监控数据库健康状况。希望本文对您在MySQL分区管理和性能优化方面有所帮助。
985 1
|
存储 网络安全 API
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
3170 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
存储 JSON 定位技术
4.Cesium中实体Entity的增删改查及性能优化(超详细)
Cesium 作为一个功能强大的 WebGL 三维地球仪库,内置了丰富的三维地图展示能力。在 Cesium 中,我们可以通过 Entity(实体)在三维场景中添加和控制各种三维对象,如点、线、面、模型等。本文将介绍 Cesium 中实体的增删改查操作。
3584 0
|
前端开发 JavaScript 搜索推荐
react-app框架——使用monaco editor实现online编辑html代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
737 3