cesium中绘制可以自由拖动的气泡弹窗

本文介绍如何在Cesium中实现自定义样式的气泡弹框,包括自由拖动及指向功能。通过直接绘制与Label标签相结合的方式,解决了原生方法无法满足样式定制和视距控制的问题。

说明

这篇博文主要解决以下几个问题:
1 cesium中绘制气泡弹框
2 气泡弹框可以自由拖动
3 气泡弹框有小尾巴可以定点指向

思路

1 cesium原生自带的Label解决了文字弹框,但是效果不是很理想,因为无法修改样式;
2 cesium原生提供的html嵌入,只是把世界坐标转换为了对应的屏幕坐标,没有办法根据视角距离去显隐控制气泡弹框
3 利用PinBuilder可以做出好的效果,但是文字效果又十分差

为了满足这些功能,所以我采用直接绘制+label标签的形式去解决这些问题
在这里插入图片描述

坐标获取

方法 作用
viewer.camera.pickEllipsoid(movement.position)
viewer.camera.getPickRay(movement.position) 获取画布上任何地方的世界坐标
viewer.scene.pick(movement.position) 获取模型信息
viewer.scene.pickPosition(movement.position) 获取球体上的坐标(但是不包含模型)
viewer.scene.drillPick(movement.position,
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李卓书

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值