Cesium开发:限制地图浏览范围

简介: Cesium开发:限制地图浏览范围

在二维地图的开发中,有maxbounds属性或者maxextent属性,能够将地图的浏览限制在一定的四至坐标范围中观看。
对比于二维地图里,三维地图多出来高度、旋转、观看角度等参数,在控制的时候,要比二维地图多控制一些东西。
Cesium中有设置观看最低、最高高度的API,能够在观看高度上进行控制,下边代码即是:

viewer.scene.screenSpaceCameraController.maximumZoomDistance =100000; 

 viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10;

设置四至范围的API并没有找到,需要根据现有API进行进一步的开发。
思路是将浏览的范围控制在事先设定好的四至范围中,实时进行检测,超出范围后,让镜头退回到设定的范围中。
实时监测的函数,使用的是preRender,此事件执行的频率还是很高的:

viewer.scene.preRender.addEventListener(function() {
    //函数内容});

Cesium的镜头视野范围,开始时用的是computeViewRectangle,计算一个观看的视野范围,计算的结果是west,east,north,south4个范围参数;
let _viewRectangle = viewer.camera.computeViewRectangle();

再拿上述4个范围参数和设定的四至范围进行比对,超出范围的部分,使用设定的四至范围,最后,将camera的观看范围,强制跳回到观看视野中,防止超出。
不过,在这样的计算情况下,场景有一定的跳动,效果不太理想,后来,就把设定的四至范围扩大了一些,判断viewer.camera.position,将观看的坐标限定在四至的坐标中,超出范围的部分,使用设定的四至范围坐标,也是进行强制跳回,这样尽管在观看的范围有一定的误差,但是,整体的效果还是好了些。

相关文章
|
定位技术
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
4099 0
干货!解决Cesium中Entity移动漂移的问题
|
编解码 JavaScript 数据可视化
Cesium中Viewer配置对照表
本文用于Cesium初始化界面的详细配置,是对这篇文章的延伸;内容不定时更新。
525 0
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
2690 0
cesium添加实体不被地形遮挡的参数设置
|
11月前
|
定位技术
Cesium修改地球的贴图为视频或者图片
这篇文章说明了如何在Cesium中修改地球的贴图,替换为自定义的图像或视频纹理。
412 1
Cesium修改地球的贴图为视频或者图片
|
11月前
Cesium制作鹰眼效果
这篇文章介绍了如何在Cesium中实现鹰眼(概览)功能,让用户可以从高空视角俯瞰整个三维地理场景。
233 1
Cesium制作鹰眼效果
|
11月前
Cesium给物体添加贴图
这篇文章讲解了在Cesium中如何为3D模型添加贴图,并提供了具体的实现步骤和代码示例。
685 2
|
11月前
|
atlas
Cesium导入geojson数据
这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。
450 2
Cesium导入geojson数据
|
11月前
ThreeJs手动控制动画播放与暂停
这篇文章介绍了如何在Three.js中手动控制动画的播放与暂停,包括设置动画混合器、监听按键事件以调整动画状态和速度的方法。
380 0
ThreeJs手动控制动画播放与暂停
|
11月前
ThreeJs制作管道水流效果
这篇文章详细说明了如何在Three.js中创建具有流动水效果的管道模型,通过使用纹理贴图的动态偏移来模拟水流的视觉效果。
639 3
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用