版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文 （Creative Commons）
浏览器打开后，右上角点击图层，cesium所带图层都是在线图层，话不多说、直接代码，可以参考注释
var viewer = new Cesium.Viewer('cesiumContainer',{
animation: true, //是否显示动画控件
shouldAnimate : true,
homeButton: false, //是否显示Home按钮
fullscreenButton: false, //是否显示全屏按钮
baseLayerPicker: true, //是否显示图层选择控件
geocoder: false, //是否显示地名查找控件
timeline: true, //是否显示时间线控件
sceneModePicker: false, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: false, //是否显示点击要素之后显示的信息
selectionIndicator:false,//绿色选中框
requestRenderMode: true, //启用请求渲染模式
scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
sceneMode: 3 //初始场景模 1 2D模式；2- 2D循环模式；3 3D模式
});
如何将cesium自带图层去掉，然后加载自定义的图层呢？
Cesium给出了扩展接口imageryProviderViewModels来实现此方法。
先将现有图层隐藏不显示,加入如下样式：
<style>
.cesium-baseLayerPicker-section:last-child{
display:none;
}
.cesium-baseLayerPicker-sectionTitle:nth-child(3){
display:none;
}
</style>
其次，自定义图层，采用tomcat将图层数据发布，下载好的地图瓦片png\jpg格式的，直接扔进tomcat的webapp下即可。
然后根据UrlTemplateImageryProvider定义图层, ProviderViewModel根据定义的图层来省城地图模型,其次将定义好的模型放入数组中，最后将数组赋值给 imageryProviderViewModels即可。
var roadMap = new Cesium.UrlTemplateImageryProvider({
url:'http://192.168.0.19:9000/MapData/roadmap/{z}/{x}/{y}.png',
fileExtension:'png'
});
var roadMapModel = new Cesium.ProviderViewModel({
name:'电子图',
iconUrl:Cesium.buildModuleUrl('/static/Cesium/Build/Cesium/Widgets/Images/ImageryProviders/OpenStreetMap.png'),
creationFunction:function(){
return roadMap;
}
});
var satelliteMap = new Cesium.UrlTemplateImageryProvider({
url:'http://192.168.0.19:9000/MapData/satellite/{z}/{x}/{y}.jpg',
fileExtension:'jpg'
});
var satelliteMapModel = new Cesium.ProviderViewModel({
name:'卫星影像图',
iconUrl:Cesium.buildModuleUrl('/static/Cesium/Build/Cesium/Widgets/Images/ImageryProviders/mapboxSatellite.png'),
creationFunction:function(){
return satelliteMap;
}
});
var terrainMap = new Cesium.UrlTemplateImageryProvider({
url:'http://192.168.0.19:9000/MapData/bjterrain/{z}/{x}/{y}.jpg',
fileExtension:'jpg'
});
var terrainMapModel = new Cesium.ProviderViewModel({
name:'地形影像图',
iconUrl:Cesium.buildModuleUrl('/static/Cesium/Build/Cesium/Widgets/Images/ImageryProviders/mapboxSatellite.png'),
creationFunction:function(){
return terrainMap;
}
});
var providerViewModels = [];
providerViewModels.push(roadMapModel);
providerViewModels.push(satelliteMapModel);
providerViewModels.push(terrainMapModel);
viewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels;//图层放入图层模型中。
viewer.baseLayerPicker.viewModel.selectedImagery=viewer.baseLayerPicker.viewModel.imageryProviderViewModels[1];//默认加载卫星影像图
效果图如下：
