Cesium 自定义HTML

需求 : Cesium 场景中的模型, 点击模型弹出自定义操作按钮

下面是简单伪代码,具体操作部分是可用代码

1. 创建三维场景

Cesium.Ion.defaultAccessToken = ''
var viewer = new Cesium.Viewer('map-view', {})
// 开启深度检测
viewer.scene.globe.depthTestAgainstTerrain = true
// viewer.scene.globe.depthTestAgainstTerrain = false
// 去掉版本信息
viewer._cesiumWidget._creditContainer.style.display = 'none' //隐藏版本信息
// 关闭默认实体追踪
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

2. 加载模型

const modeUrl = '/mode/PK4.gltf'
var ModeEntity = loadGLTFMode(modeUrl)
function loadGLTFMode(modeUrl, scale) {
    var position = new Cesium.Cartesian3.fromDegrees(116.181973, 40.096962, 0)
    var scale = scale || 20.0
    var heading = Cesium.Math.toRadians(-40)
    var pitch = 0
    var roll = 0
    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
    var ModeEntity = viewer.entities.add({
            position: position,
            orientation: orientation,
            model: {
                    uri: modeUrl,
                    scale: scale, // 缩放比例
                    silhouetteColor: Cesium.Color.WHITE, // 轮廓的颜色
                    silhouetteSize: 1.0, //
                    debugShowBoundingVolume: true,
                    color: Cesium.Color.CORAL,
                    colorBlendMode: Cesium.ColorBlendMode.MIX,
                    showCreditsOnScreen: true,
                    alpha: 1,
            },
    })

    console.log(ModeEntity)
    keyboardMapRoamingInit(viewer)
    return ModeEntity
    // viewer.zoomTo(ModeEntity)
}