可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
Cesium实战(三十三)限制查看二维地图范围
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
0
点赞
0
评论
收藏
分享
举报
Cesium实战(三十三)限制查看二维地图范围
小白
关注
已关注
0
0
0
3294
发表于 2020-05-11 20:39:02
# Cesium实战(三十三)限制查看二维地图范围 有朋友希望能限制二维地图范围,之前在[Cesium实战(十一)限制底图范围](http://cesium.xin/wordpress/archives/cesium- map-limit.html)中我们提到过可以通过只加载目标范围内的地图来控制,但是并没有限制视角移动,这篇博客我们来看看如何控制视角在范围内移动。 ## 触发事件 最容易想到的思路是通过相机视角发生变动触发事件,判断当前范围是否在目标范围内, viewer.camera.changed.addEventListener(function(e){}); 如果不在就退回到之前的视图,但是情况在代码中不好控制,而且效果也不好。但是换成 viewer.clock.onTick .addEventListener(function(){}); 事件,效果就会好很多。 ## 判断思路 ![dd](http://develop.cesium.xin/image/range.jpg)![dd](data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E) 一种思路可以是相机范围完全包含在限制范围之内时,不做操作,如果相机范围与限制范围相交,则缩放到相交的范围内(可以根据实际要求来),二维相对简单,三维比较复杂,因为三维可以进行视角的俯视仰视,俯仰时,不一定能拿到正确的相机范围,这里看一下二维的视角限制代码,只是提供一个思路,三维的可以自己尝试一下~~ var west = Cesium.Math.toRadians(-77.0); var south = Cesium.Math.toRadians(38.0); var east = Cesium.Math.toRadians(-72.0); var north = Cesium.Math.toRadians(42.0); //方便查看范围 var maxExtent = new Cesium.Rectangle(west, south, east, north); viewer.entities.add({ rectangle : { coordinates : maxExtent, fill : false, outline : true, outlineColor : Cesium.Color.WHITE } }); var camera = viewer.scene.camera; viewer.scene.screenSpaceCameraController.inertiaTranslate = 0; viewer.clock.onTick.addEventListener(function() { if (viewer.scene.mode === Cesium.SceneMode.SCENE2D) { var topLeft = camera.pickEllipsoid(new Cesium.Cartesian2(0, 0)); var topRight = camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth, 0)); var bottomLeft = camera.pickEllipsoid(new Cesium.Cartesian2(0, viewer.canvas.clientHeight)); var bottomRight = camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth, viewer.canvas.clientHeight)); if (topLeft && topRight && bottomLeft && bottomRight) { topLeft = Cesium.Ellipsoid.WGS84.cartesianToCartographic(topLeft); topRight = Cesium.Ellipsoid.WGS84.cartesianToCartographic(topRight); bottomLeft = Cesium.Ellipsoid.WGS84.cartesianToCartographic(bottomLeft); bottomRight = Cesium.Ellipsoid.WGS84.cartesianToCartographic(bottomRight); var visibleExtent = Cesium.Rectangle.fromCartographicArray([topLeft, topRight, bottomLeft, bottomRight]); //如果不包含 if( !(Cesium.Rectangle.contains(maxExtent,topLeft) &&Cesium.Rectangle.contains(maxExtent,topRight) &&Cesium.Rectangle.contains(maxExtent,bottomLeft) &&Cesium.Rectangle.contains(maxExtent,bottomRight) )){ var validExtent =Cesium.Rectangle.intersection(maxExtent, visibleExtent,new Cesium.Rectangle()); viewer.camera.setView({ destination: validExtent }); } } else { viewer.camera.setView({ destination: maxExtent }); } } }); 结束
点击查看更多
全部评论
登录
|
注册
关于作者
小白
TA的个人主页
关注
已关注
文章
5942
粉丝
14
获赞
21
评论
26
访问
560371
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
《Google软件测试之道》读书笔记
Cesium数据(五)3D Tiles之i3dm 和 cmpt
cesium实战(三)设置地球颜色为任意纯色
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接