Cesium关于添加billboard的几个问题

爱吃煎饼的蛋蛋

已于 2022-04-30 19:20:26 修改

阅读量3.4k

点赞数

文章标签：前端 javascript

于 2022-04-30 19:18:50 首次发布

本文链接：https://blog.csdn.net/qq_43546520/article/details/124516733

版权

1、将billboard添加到模型或地形上方

let entity = viewer.entities.add({
    billboard: {
        image: require('./img/tjd.png'),
        //heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,  //广告牌贴地
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
    },
});

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(e => {
    position  = viewer.scene.pickPosition(e.position); //用来添加广告牌
    if (!position) return;
    let cartographic = Cesium.Cartographic.fromCartesian(position);
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
    let height = cartographic.height
    entity.position= Cesium.Cartesian3.fromDegrees(lng,lat,height);
    // e.position 输出结果为  Cartesian2格式，
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

2、清除3dtiles模型

if (modle){
    viewer.scene.primitives.remove(modle);
    modle = undefined;
}

3、修改鼠标光标样式

viewer._container.style.cursor = 'crosshair';//十字形
viewer._container.style.cursor = 'default'; //将光标设置为默认

4、globe的pick方法、scene的pick方法、pickPosition的对比

4.1 globe的pick方法

找到一个射线和渲染的球体表面之间的交集。结果为笛卡尔世界坐标。但是该方法忽略了地表加载的3Dtiles房屋模型数据

let windowPosion = viewer.scene.globe.pick(viewer.camera.getPickRay(e.position),viewer.scene);

4.2 scene的pick方法

scene.pick可以通过此方法获取到pick对象，通过pick.id即可拾取当前的entity对象，也可以获取Cesium3DTileFeature对象；

let pickedObject = viewer.scene.pick(e.position); //用来拾取 Entity 和3Dtiles

4.3 scene.pickPosition

通过viewer.scene.pickPosition(e.position)获取，可以获取场中任意点击处的对应的世界坐标。

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(e => {
    console.log(handler );    //方法内容 e.position 输出结果为  Cartesian2格式，
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);