Cesium polygon polyline entity label 貼地 點線面文本模型貼地 clampToGround 地面遮擋 地底遮擋 文字遮擋 道路遮擋 地形遮蓋 地圖遮蓋

 0、使用 GeoJsonDataSource 加載 geoJson 數據，渲染 Polygon、polyline、Text 貼地配置

export function renderPolygon(geojson: any, zoomto: Boolean = true) {
    const viewer = window.viewer
    const dataSource = new Cesium.GeoJsonDataSource()

    // [cesium加載geoJson數據] https://juejin.cn/post/7029592051154944007
    dataSource.load(geojson, { clampToGround: true }).then(() => {
        viewer.dataSources.add(dataSource)
        const entities = dataSource.entities.values
        for (let i = 0; i < entities.length; i++) {
            const entity = entities[i]
            // 修改 entity 樣式
            entity.polygon.material = Cesium.Color.fromCssColorString('#ff0000').withAlpha(0.5)
            // 添加 entity 的 polyline
            entity.polyline = { positions: entity.polygon.hierarchy._value.positions, width: 2, material: Cesium.Color.fromCssColorString('#ffff00') }
            // 獲取一個 entity 的中心位置
            const center = Cesium.BoundingSphere.fromPoints(entity.polygon.hierarchy._value.positions).center
            // 設置中心位置
            entity.position = center
            // 添加 text
            entity.label = {
                text: entity.properties.name,
                color: Cesium.Color.fromCssColorString('#fff'),
                font: 'normal 32px MicroSoft YaHei',
                showBackground: true,
                scale: 0.5,
                horizontalOrigin: Cesium.HorizontalOrigin.LEFT_CLICK,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                disableDepthTestDistance: 10000.0
            }
        }

        if (zoomto) {
            viewer.zoomTo(dataSource)
        }
    })

    return dataSource
}

 

 

1、entity 實體貼地（billboard 和 label 都可以配置）

可能還需要配合 heightReference: Cesium.HeightReference.CLAMP_TO_GROUND 的設置。

entity.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY; //去掉地形遮擋

entity.label.disableDepthTestDistance = Number.POSITIVE_INFINITY; //去掉地形遮擋

 

2、polyline 線條設置貼地 clampToGround: true

const lineEntitie = viewer.entities.add({
    plotType: 'MilitaryPlot',
    polyline: {
        positions: positions,
        width: 2,
        material: Cesium.Color.fromCssColorString('#0BFF0D'),
        clampToGround: true,
    },
})

 

3、polygon 貼地似乎不需要設置任何東西。但通常你需要結合邊界線 polyline，這個 polyline 需要設置 clampToGround: true

// positions 的格式是一個笛卡爾數組 [{x, y, z}, {x, y, z}, {x, y, z}, ...]
// 可以用這種方式轉經緯度數組：const positions = Cesium.Cartesian3.fromDegreesArray(points)
const entity = viewer.entities.add({
    name: 'name' + key,
    polygon: {
        hierarchy: new Cesium.PolygonHierarchy(positions),
        material: Cesium.Color.fromCssColorString('#9b9bdd').withAlpha(0.35),
        classificationType: Cesium.ClassificationType.BOTH, // classificationType: ClassificationType.TERRAIN,
    },
    polyline: {
        positions: positions,
        width: 2,
        material: Cesium.Color.WHITE.withAlpha(0.5),
        clampToGround: true,
    },
})

 

4、geojson 數據源設置貼地（未實戰測試）

let promise = Cesium.GeoJsonDataSource.load(_geojsondata, { clampToGround: true })

// ---

const geoJsonDataSource = new Cesium.CustomDataSource('聚合圖')
viewer.dataSources.add(geoJsonDataSource, { clampToGround: true })

 

5、gltf 模型貼地

據說模型貼地需要設置 heightReference: Cesium.HeightReference.CLAMP_TO_GROUND，但我自測其實不需要。先記着吧。

viewer.entities.add({
    id: `flag-1`,
    name: "flag",
    position: Cesium.Cartesian3.fromDegrees(...item.position),
    model: {
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 讓模型在地形上緊貼
        scale: 10,
        uri: './static/models/flag.glb'
    }
})

 

6、entities label 貼地

const label = viewer.entities.add({
    position: position,
    label: {
        text: name,
        fillColor: Cesium.Color.fromCssColorString('#ffffff'),
        font: '28px',
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.TOP,
        scaleByDistance: new Cesium.NearFarScalar(0, 1, 1200, 1),
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
        // eyeOffset: new Cesium.Cartesian3(0, 0, -100),
        // pixelOffset: new Cesium.Cartesian2(0, -40),
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
    },
})