cesium底图切换

cesium作为三维开源框架，实现底图切换也是很容易的。

let osm = new Cesium.UrlTemplateImageryProvider({
    url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
});
let mapbox = new Cesium.MapboxImageryProvider({
    mapId: 'mapbox.dark',
    accessToken: 'pk.eyJ1IjoieW91bmdnaXMiLCJhIjoiY2o5Z3owdTViMnR5djJ3bGczaGw4ODdhZSJ9.K7Zmkra18V7CuynSW3rlRQ'
});
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: osm,
    contextOptions: {
        webgl: {
            alpha: true
        }
    },
    selectionIndicator:false,
    navigationInstructionsInitiallyVisible:false,
    homeButton:false,
    selectionIndicator: false,
    animation: false,  //是否显示动画控件
    baseLayerPicker: false, //是否显示图层选择控件
    geocoder: false, //是否显示地名查找控件
    timeline: false, //是否显示时间线控件
    sceneModePicker: false, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    infoBox: false,  //是否显示点击要素之后显示的信息
    fullscreenButton: false,
    shouldAnimate: true //动画播放
});
//flyto坐标定位点
viewer.scene.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(121.453668,31.285981, 300),  //定位坐标点，建议使用谷歌地球坐标位置无偏差
    duration:6   //定位的时间间隔
});

//设置底图切换
let basemap=1;
document.getElementById("changeBasemap").onclick=function(){
    basemap=!basemap;
    console.log(basemap)
    if(basemap==true){
        viewer.imageryLayers.addImageryProvider(osm);
    }else{
        viewer.imageryLayers.addImageryProvider(mapbox);
    }
}