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不同,能够进行接下来的其余操作。