cesium轮询高亮geojson面轮廓,并获取面要素属性

需求

加载geojson的面,轮询面要素,视角切换到轮询的面,并高亮展示与获取当前面要素的属性。

cesium版本1.104

实现思路

创建高亮的实体对象,加载geojson面,获取到每个entity,设置定时器进行轮询,轮询到当前entity,

  1. 首先清除高亮实体对象,
  2. 根据轮询到的当前entity的position创建新的线,线材质高亮,赋值给高亮实体
  3. 获取轮询实体的属性
  4. 根据属性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++
}

你可能感兴趣的:(cesium,js,cesium,js)