Cesium（二）加载Cesium3DTileset&Cesium3DTileFeature模型高亮显示&实时显示经纬度以及高度

下面是三个示例，分别是加载Cesium3DTileset、点击模型，使得模型高亮、实时显示经纬度，所有代码均借鉴网上已有的代码，这里只做演示。

效果gif

一、加载Cesium3DTileset

//加载三维模型灰模
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: "http://localhost:9002/api/folder/edc012f6fdc94baca5b2a838f8b558fd/tileset.json",
}));
viewer.scene.primitives.add(tileset);

tileset.readyPromise.then(function (tileset) {
    viewer.scene.primitives.add(tileset);
    viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0));
}).otherwise(function (error) {
    console.log(error);
});
tileset.style = new Cesium.Cesium3DTileStyle({
    color: {
        conditions: [
            ['${floor} >= 8', 'rgba(45, 0, 75, 0.5)'],
            ['${floor} >= 7', 'rgb(102, 71, 151)'],
            ['${floor} >= 6', 'rgb(170, 162, 204)'],
            ['${floor} >= 5', 'rgb(224, 226, 238)'],
            ['${floor} >= 4', 'rgb(252, 230, 200)'],
            ['${floor} >= 3', 'rgb(248, 176, 87)'],
            ['${floor} >= 2', 'rgb(198, 106, 11)'],
            ['true', 'rgb(127, 59, 8)']]
    }
});

二、模型高亮显示

//高亮显示代码
var previousPickedEntity = {
    feature: undefined,
    originalColor: undefined
};
handler.setInputAction(function (movement) {
    var pickingEntity = scene.pick(movement.position); 
    //判断选择是否为Cesium3DTileFeature
    if (pickingEntity instanceof Cesium.Cesium3DTileFeature) {
        //判断以前是否选择要素
        if (pickingEntity != previousPickedEntity.feature) {
            if (previousPickedEntity.feature != undefined) {
                //还原前选择要素的本颜色
                previousPickedEntity.feature.color = previousPickedEntity.originalColor;
                //将当前选择要素及其颜色添加到previousPickedEntity
                previousPickedEntity.feature = pickingEntity;
                previousPickedEntity.originalColor = pickingEntity.color;
            }
            //将当前选择要素及其颜色添加到previousPickedEntity
            previousPickedEntity.feature = pickingEntity;
            previousPickedEntity.originalColor = pickingEntity.color;
        }
        //将模型变为黄色高亮
        pickingEntity.color = Cesium.Color.YELLOW;
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

三、实时显示经纬度坐标
1、html

    

        

            经度：
        
        

            纬度：
        
        

            视角高：km
        
    

2、js

//< !--经纬度实时显示 -->
var longitude_show = document.getElementById('longitude_show');
var latitude_show = document.getElementById('latitude_show');
var altitude_show = document.getElementById('altitude_show');
var canva = viewer.scene.canvas;
handler.setInputAction(function (movement) {
    //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
    var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
    if (cartesian) {
        //将笛卡尔三维坐标转为地图坐标（弧度）
        var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
        //将地图坐标（弧度）转为十进制的度数
        var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
        var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
        var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
        longitude_show.innerHTML = log_String;
        latitude_show.innerHTML = lat_String;
        altitude_show.innerHTML = alti_String;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);