Cesium loading billboard (3)
After the billboard is loaded, how to operate the billboard? Here, the function of obtaining billboard information by clicking the left mouse button is realized.
During the process of loading the billboard, many attributes have been set on the billboard, but the unique value of the billboard has not been regulated. The unique value is not set in the property of billboard, but declared in the Entity of the outer layer. At the same time, there is also a name attribute in Entity. It should be noted here that id is a unique value and cannot be the same as other id values, but name can.
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,
}
})
There is one point that needs to be emphasized here, the purchasing agent only declares an Entity instance, but does not add it, so Entity needs to be added only to the viewer entity before it can be used.
viewer.entities.add(bill)
If written viewer.entities.add({})in the form , no additional addition is required.
After the addition is complete, the click event needs to be written.
let handlerPoint = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
handlerPoint.setInputAction(function(event) {
},Cesium.ScreenSpaceEventType.LEFT_CLICK)
In the click event viewer.scene.pick(), the method is used to pick the entity (Entity), primitive (Primitive), and 3DTilesobject through the coordinate position, and return the topmost object at the specified position in the scene. For example, click to get the pick object of Entity, through which pick.idthe current entity object can be picked. After picking, it can be used to change the attribute parameters of the object, such as color, picture, etc.
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)
The information of the billboard is stored in the pick here, and then other operations can be performed according to the id of the obtained billboard.