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,
    },
})