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

    <div id="latlng_show" style="width:420px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;">
        <div style="width:140px;height:30px;float:left;">
            <font size="3" color="white">經度：<span id="longitude_show"></span></font>
        </div>
        <div style="width:140px;height:30px;float:left;">
            <font size="3" color="white">緯度：<span id="latitude_show"></span></font>
        </div>
        <div style="width:140px;height:30px;float:left;">
            <font size="3" color="white">視角高：<span id="altitude_show"></span>km</font>
        </div>
    </div>

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);