Cesium最新基础教程系列2—Viewer离线加载地图数据（高程数据，地图瓦片（卫星影像、电子地图）），Viewer属性详解，及离线自定义图层

浏览器打开后，右上角点击图层，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];//默认加载卫星影像图

效果图如下：