需求
加载geojson的面,轮询面要素,视角切换到轮询的面,并高亮展示与获取当前面要素的属性。
cesium版本1.104
实现思路
创建高亮的实体对象,加载geojson面,获取到每个entity,设置定时器进行轮询,轮询到当前entity,
- 首先清除高亮实体对象,
- 根据轮询到的当前entity的position创建新的线,线材质高亮,赋值给高亮实体
- 获取轮询实体的属性
- 根据属性id请求接口获取详情或直接显示实体属性
代码
let soilInterval = null
let index = 0
let hightEntity = null
Cesium.GeoJsonDataSource.load("features.json")
.then(dataSource=> {
viewer.dataSources.add(dataSource);
setTimeout(()=>{
soilIntervalFunc(dataSource)
soilInterval = setInterval(()=>{
soilIntervalFunc(dataSource)
},7000)
},15000)
});
async function soilIntervalFunc(dataSource){
let entities = dataSource.entities.values
// 循环轮询
if(index === entities.length-1) index = 0
if (hightEntity) {
dataSource.entities.remove(hightEntity);
}
// 取消实体选定状态
viewer.selectedEntity = null;
// 视角跟随到轮询实体
viewer.flyTo(entities[index], {
destination:entities[index],
offset: {
heading: Cesium.Math.toRadians(0), // 偏航角(默认朝北)
pitch: Cesium.Math.toRadians(-45), // 俯仰角
roll: Cesium.Math.toRadians(0) // 翻滚角(默认为0)
},
duration: 2 // 飞行时间(单位:秒)
}).then(resolve=>{
// 获取轮询实体的属性
console.log(entities[index]._properties)
// 这里写展示属性或请求查询详情的逻辑
})
hightEntity = dataSource.entities.add({
polyline: {
positions: entities[index].polygon.hierarchy._value.positions,
width: 12,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: .7, // 一个数字属性,指定发光强度,占总线宽的百分比。
color: Cesium.Color.ORANGERED,
}),
clampToGround: true,
},
})
index++
}