Cesiumjs – How to set default imagery provider.

phpmind-cesiumjs-set-default-image-layer

If you want to use the BaseLayerPicker, then you need to specify what imagery and terrain seletions are available. It’s more code bu just as straight forward. Here’s a full example that adds two possible terrains and 2 possible imagery providers. It makes the second one active by default by setting the selectedXXX properties, otherwise the first index would be active instead.


var providerViewModels = [];
providerViewModels.push(new Cesium.ProviderViewModel({
    name : 'Bing Maps Aerial',
    iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/bingAerial.png'),
    tooltip : 'Bing Maps aerial imagery \nhttp://www.bing.com/maps',
    creationFunction : function() {
        return new Cesium.BingMapsImageryProvider({
            url : '//dev.virtualearth.net',
            mapStyle : Cesium.BingMapsStyle.AERIAL
        });
    }
}));

providerViewModels.push(new Cesium.ProviderViewModel({
    name : 'Bing Maps Aerial with Labels',
    iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/bingAerialLabels.png'),
    tooltip : 'Bing Maps aerial imagery with label overlays \nhttp://www.bing.com/maps',
    creationFunction : function() {
        return new Cesium.BingMapsImageryProvider({
            url : '//dev.virtualearth.net',
            mapStyle : Cesium.BingMapsStyle.AERIAL_WITH_LABELS
        });
    }
}));

var terrainViewModels = [];
terrainViewModels.push(new Cesium.ProviderViewModel({
    name : 'WGS84 Ellipsoid',
    iconUrl : Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/Ellipsoid.png'),
    tooltip : 'WGS84 standard ellipsoid, also known as EPSG:4326',
    creationFunction : function() {
        return new Cesium.EllipsoidTerrainProvider();
    }
}));


terrainViewModels.push(new Cesium.ProviderViewModel({
    name : 'STK World Terrain meshes',
    iconUrl : Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/STK.png'),
    tooltip : 'High-resolution, mesh-based terrain for the entire globe. Free for use on the Internet. Closed-network options are available.\nhttp://www.agi.com',
    creationFunction : function() {
        return new Cesium.CesiumTerrainProvider({
            url : '//assets.agi.com/stk-terrain/world',
            requestWaterMask : true,
            requestVertexNormals : true
        });
    }
}));

var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProviderViewModels : providerViewModels,
    selectedImageryProviderViewModel : providerViewModels[1],
    terrainProviderViewModels : terrainViewModels,
    selectedTerrainProviderViewModel : terrainViewModels[1]
});


Share

Leave a Reply

Your email address will not be published. Required fields are marked *