cesium【04-自定義圖層選擇器】

自定義baseLayerPicker（圖層選擇器）

設置自定義圖層需要設置 imageryProviderViewModels屬性，前提是baseLayerPicker =true（圖層選擇器）

設置地形需要terrainProviderViewModels屬性

 

 

var viewer = new Cesium.Viewer('cesiumContainer',{
    //圖層選擇器
    baseLayerPicker:true,
    //獲取或設置可用於圖像選擇的ProviderViewModel實例數組。
    imageryProviderViewModels:getImageryProviderArr(),
    //獲取或設置可用於地形選擇的ProviderViewModel實例數組。
    terrainProviderViewModels:getTerrainProviderViewModelsArr(),
});

//圖層
function getImageryProviderArr(){
    return [
        new Cesium.ProviderViewModel({
            //圖層的名稱。
            name:'圖層一',
            //顯示項目被隱藏的工具提示
            tooltip:'圖層一',
            //代表圖層的圖標
            iconUrl:'img/1.jpg',
            //一個函數或命令，用於創建一個或多個提供程序，這些提供程序將在選擇此項目時添加到地球儀中。
            creationFunction:function(){
                return new Cesium.ArcGisMapServerImageryProvider({
                    url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                })
            }
        }),
        new Cesium.ProviderViewModel({
            //圖層的名稱
            name:'圖層二',
            //顯示項目被隱藏的工具提示
            tooltip:'圖層二',
            //代表圖層的圖標
            iconUrl:'img/2.jpg',
            //一個函數或命令，用於創建一個或多個提供程序，這些提供程序將在選擇此項目時添加到地球儀中
            creationFunction:function(){
                return new Cesium.ArcGisMapServerImageryProvider({
                    url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
                })
            }
        })
    ]
}

//地形
function getTerrainProviderViewModelsArr(){
    return[
        new Cesium.ProviderViewModel({
            //圖層的名稱
            name:'無地形',
            //顯示項目被隱藏的工具提示
            tooltip:'WGS84標准球體',
            //代表圖層的圖標
            iconUrl:'img/3.jpg',
            //一個函數或命令，用於創建一個或多個提供程序，這些提供程序將在選擇此項目時添加到地球儀中
            creationFunction:function(){
                return new Cesium.EllipsoidTerrainProvider({
                    ellipsoid:Cesium.Ellipsoid.WGS84
                })
            }
        }),
        new Cesium.ProviderViewModel({
            //圖層的名稱
            name:'地形',
            //顯示項目被隱藏的工具提示
            tooltip:'STK在線地形',
            //代表圖層的圖標
            iconUrl:'img/4.jpg',
            //一個函數或命令，用於創建一個或多個提供程序，這些提供程序將在選擇此項目時添加到地球儀中
            creationFunction:function(){
                return new Cesium.CesiumTerrainProvider({
                    url:Cesium.IonResource.fromAssetId(1),
                    requestWaterMask:!0,
                    requestVertexNormals:!0
                })
            }
        })
    ]
}