cesium【03-图层】

一、初始化图层参数：
imageryProvider：图层资源，baseLayerPicker为false才有效
terrainProvider：地形资源

let container = 'cesiumContainer'
let options = {
    baseLayerPicker:false,//默认true,图层选择器，右上角
    //图层资源，baseLayerPicker为false才有效
    imageryProvider:new Cesium.UrlTemplateImageryProvider({
        url:'http://t2.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=b0b6f6127490e1226b057bf3e90dfa45',//用于请求图块的URL模板
        subdomains:'abc',//子域名
        tileWidth:256,//图像图块的可选像素宽度。
        tileHeight:256,//图像图块的可选像素高度。
    }),
    //地形资源
    terrainProvider:new Cesium.CesiumTerrainProvider({
        url:'https://terrain.gbim360.com/',//地形服务
        requestVertexNormals:true,//用于指示客户端是否应从服务器请求其他照明信息
    })
}
let viewer = new Cesium.Viewer(container, options)

 

二、初始化之后图层的操作：

/**
 * 添加图层
 * imageryProvider:图层资源
 * index:添加图层的索引。如果省略，该图层将添加到所有现有图层的顶部
 */
 viewer.imageryLayers.addImageryProvider(imageryProvider,index)

/**
 *删除某一个图层 
 * layer:要删除的图层对象
 */
viewer.imageryLayers.remove(layer)

/**
 * 删除所有图层
 */
viewer.imageryLayers.removeAll()

/**
 * 销毁所有图层
 */
viewer.imageryLayers.destroy()

更多操作技巧请查看上图中的API

 

三、常用图层资源类型

//图层资源
function imageryProviderFn(type){
    let layers;
    if(type === 'ArcGIS'){
        //ArcGIS 
        layers = new Cesium.ArcGisMapServerImageryProvider({
            url:'',//ArcGIS MapServer服务的URL。
            token:'',//ArcGIS令牌，用于通过ArcGIS MapServer服务进行身份验证。
            tileWidth:256,//瓦片宽度，默认值
            tileHeight:256,//瓦片高度，默认值
        })
    }else if(type === 'BingMaps'){
        //Bing Maps
        let bingStyle = {
            'AERIAL':Cesium.BingMapsStyle.AERIAL,//航空影像
            'DEMAND':Cesium.BingMapsStyle.AERIAL_WITH_LABELS_ON_DEMAND,//与路覆盖的航拍图像
            'DARK':Cesium.BingMapsStyle.CANVAS_DARK,//路线图的深色版本。
            'GRAY':Cesium.BingMapsStyle.CANVAS_GRAY,//路线图的灰度版本
            'LIGHT':Cesium.BingMapsStyle.CANVAS_LIGHT,//路线图的较浅​​版本
            'BART':Cesium.BingMapsStyle.COLLINS_BART,//柯林斯·巴特的影像
            'SURVEY':Cesium.BingMapsStyle.ORDNANCE_SURVEY,//军械测量图像。该图像仅在英国伦敦地区可见
            'ROAD_ON_DEMAND':Cesium.BingMapsStyle.ROAD_ON_DEMAND,//没有其他图像的道路
        }
        layers = new Cesium.BingMapsImageryProvider({
            url:'',//图层资源
            key:'',// Bing Maps密钥
            mapStyle:bingStyle.DEMAND,//Bing图像的类型。
        })
    }else if(type === 'OSM'){
        //OpenStreetMap
        layers = new Cesium.OpenStreetMapImageryProvider({
            url : 'https://a.tile.openstreetmap.org/',//图层资源
        })
    }else if(type === 'TMS'){
        //提供由MapTiler，GDAL2Tiles等生成的切片图像的图像提供程序 
        layers = new Cesium.TileMapServiceImageryProvider({
           url : '../images/cesium_maptiler/Cesium_Logo_Color',//服务器上图像切片的可选路径
           fileExtension: 'png',//服务器上图像的文件扩展名
           rectangle: new Cesium.Rectangle(//图像覆盖的矩形(以弧度表示)，默认是最大值
               Cesium.Math.toRadians(-120.0),
               Cesium.Math.toRadians(20.0),
               Cesium.Math.toRadians(-60.0),
               Cesium.Math.toRadians(40.0)
            )
        })
    }else if(type === 'Mapbox'){
        //Mapbox
        layers = new Cesium.MapboxImageryProvider({
            url:'',//Mapbox服务器网址
            mapId: 'mapbox.streets',//Mapbox地图ID
            accessToke:'thisIsMyAccessToken',//图像的公共访问令牌
            format:'png',//图像请求的格式
            rectangle: new Cesium.Rectangle(//图像覆盖的矩形(以弧度表示),默认是最大值
               Cesium.Math.toRadians(-120.0),
               Cesium.Math.toRadians(20.0),
               Cesium.Math.toRadians(-60.0),
               Cesium.Math.toRadians(40.0)
            )
        })
    }else if(type === 'IMAGE'){
        //提供单个顶层图像图块
        layers = new Cesium.SingleTileImageryProvider({
            url:'',//地址
            rectangle: new Cesium.Rectangle(//图像覆盖的矩形(以弧度表示),默认是最大值
               Cesium.Math.toRadians(-120.0),
               Cesium.Math.toRadians(20.0),
               Cesium.Math.toRadians(-60.0),
               Cesium.Math.toRadians(40.0)
            )
        })
    }else if(type === 'XYZ'){
        //XYZ,通过使用指定的URL模板请求图块来提供图像。
        layers = new Cesium.UrlTemplateImageryProvider({
            url:'',//用于请求图块的URL模板
            subdomains:'abc',//子域名
            tileWidth:256,//图像图块的可选像素宽度。
            tileHeight:256,//图像图块的可选像素高度。
        })
    }else if(type === 'WMS'){
        //WMS
        layers =new Cesium.WebMapServiceImageryProvider({
            url:'',//WMS服务的URL
            layers:'layers',//地图图层名称
            parameters:{
                version:'1.3.0',//wms版本
                format:'image/png',//地图请求参数类型
            },//附加参数，用于通过GetMap URL传递到WMS服务器。
            tileWidth:256,//图像图块的可选像素宽度。
            tileHeight:256//图像图块的可选像素高度。
        })
    }else if(type === 'WMTS'){
        //WMTS
        layers = new Cesium.WebMapTileServiceImageryProvider({
            url:'',//WMTS服务的URL
            format:'image/jpeg',//MIME类型,用于从服务器检索图像
            layer:'USGSShadedReliefOnly',//WMTS请求的层名称
            style:'default',//WMTS请求的样式名称
            tileMatrixSetID :'default028mm',//用于WMTS请求的TileMatrixSet的标识符
            tileWidth:256,//图像图块的可选像素宽度
            tileHeight:256,//图像图块的可选像素高度
        })
    }
    return layers;
}

 

四、常用地形资源类型

//地形
function terrainProviderFn(type){
    let terrain;
    if(type === 1){
        //谷歌地形高度图（height map）方式生成地形
        terrain = Cesium.GoogleEarthEnterpriseTerrainProvider({
            url:'',//地形资源
        })
    }else if(type ===2){
        //光滑椭球体。这个地形不请求任何服务数据，也没有任何地形起伏效果。一般用作一些太空类展示项目
        terrain = new Cesium.EllipsoidTerrainProvider({
            ellipsoid:Cesium.Ellipsoid.WGS84
        })
    }else if(type ===3){
        //高经度全球地形，地形支持光照和水面效果
        terrain = new Cesium.CesiumTerrainProvider({
            url:'https://terrain.gbim360.com/',//地形服务
            requestVertexNormals:true,//用于指示客户端是否应从服务器请求其他照明信息
        })
    }else if(type ===4){
        //这个服务数据是90米采样精度的全球数据，并且包含水深数据
        terrain = new Cesium.VRTheWorldTerrainProvider({
            url:'',
        })
    }
    return terrain;
}