Cesium加载广告牌(三)
加载完成广告牌之后,如何对广告牌进行操作?这里实现鼠标左键点击获取广告牌信息的功能。
在加载广告牌的过程中,已经对广告牌进行了许多属性的设置,但是并没有对广告牌的唯一值进行规范。设置唯一值并不是在billboard的属性内设置,而是在外层的Entity内进行声明。同时Entity中也有name属性。这里需要注意的是id是唯一值,不能与其他id值相同,name可以。
let bill = new Cesium.Entity({
id:"200222",
position: new Cesium.Cartesian3.fromDegrees(120.62521517, 31.42803100),
billboard: {
image: "./img/laboratory.png",
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scale: 1,
scaleByDistance: new Cesium.NearFarScalar(30000, 1, 45000, 0.4),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
}
})
这里有一点需要强调,代买只是声明了一个Entity实例,并没有进行添加,因此需要将Entity添加仅viewer实体中才可以使用。
viewer.entities.add(bill)
如果写成 viewer.entities.add({})
形式,就不需要额外添加。
添加完成后需要写入点击事件。
let handlerPoint = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
handlerPoint.setInputAction(function(event) {
},Cesium.ScreenSpaceEventType.LEFT_CLICK)
在点击事件里面采用viewer.scene.pick()
方法,通过坐标位置,拾取实体(Entity),图元(Primitive),3DTiles
对象,返回的是scene中指定位置最上层的对象。例如点击获取Entity的pick对象,通过pick.id
可以拾取当前的entity对象。拾取后,可以用于改变对象的属性参数,如颜色,图片等。
let handlerPoint = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
handlerPoint.setInputAction(function(event) {
const pick = window.viewer.scene.pick(event.position);
console.log(pick)
},Cesium.ScreenSpaceEventType.LEFT_CLICK)
这里的pick中就存储了广告牌的信息,然后根据获取的广告牌的id不同,可以进行接下来的其他操作。
标签:viewer,广告牌,Entity,pick,Cesium,new,加载 From: https://www.cnblogs.com/DTCLOUD/p/17341222.html