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

说明

这篇博文主要解决以下几个问题:
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, limit, width, height)

这里验证下,每种坐标获取的结果

1 点击空间处
2 点击球体上
3 点击模型上

当然咯,每个坐标结果是有误差的,但是对于气泡业务,这种误差可以忽略不计;这里不做探究

然后利用这些获取坐标的方法结合鼠标操作,就制作成了以下效果: