Cesium 定位到tile

实现效果

2 功能拆解

2.1 定位到符合条件的tile

这个比较简单，主要利用scenetree.json 来实现

    Cesium.Resource.fetchJson({
        url:'Cesium/Cesium3DTiles/tiles/scenetree.json'
    }).then(res=>{
        res.scenes[0].children.forEach(item => {
            dataLists.push({
                id:item.id,
                name: item.name,
                sphere: item.sphere,
            })
        })

    })

然后根据名称或者id 遍历数据，操作相机

  dataLists.forEach(item=>{
            if(item.name =='225'){
                    let sphere = item.sphere
                    let center = new Cesium.Cartesian3(sphere[0], sphere[1], sphere[2])
                     const boundingSphere = new Cesium.BoundingSphere(center, sphere[3])
                    viewer.camera.flyToBoundingSphere( boundingSphere, {
                        offset: new Cesium.HeadingPitchRange(3.5, -0.5, 200),
                        duration: 2,
                    })
            }
        })

2.2 修改制定tile的颜色

思路一 获取feature

  let features =[]
    tileset.tileLoad.addEventListener(tile=>{
        const content = tile._content
        let featuresLength = content.featuresLength

        for(let i =0;i<featuresLength;i++){
            let feature = content.getFeature(i)
            features.push({feature:feature,name:feature.getProperty('name'),id:feature.getProperty('id')})
        }
    })

  features.forEach((item)=>{
            if(item.name == '225' ){
              item.feature.color = Cesium.Color.fromCssColorString('#11eae6')
            }else{{
                item.feature.color = Cesium.Color.fromCssColorString('#fff').withAlpha(0.5)
            }}
        })

思路二 利用Cesium3DTileStyle

 con = [
            ['${name} ==="227" ', 'color("purple", 0.9)'], //符合条件项
            ['true', 'rgba(255,255,255,0.5)'] //其他项
        ]
        tileset.style = new Cesium.Cesium3DTileStyle({
            color:{
                conditions:con
            }
        })