接觸到的加載數據類型：源地圖、shp、Geojson、png、wms、地形底圖
一.Cesium加載各類底圖
#此類加載的本質在於 new Cesium.ImageryProvider()
Api defination：“Provides imagery to be displayed on the surface of an ellipsoid. This type describes an interface and is not intended to be instantiated directly.”
imagerProvider不能直接實例化，必須使用具體的接口
var viewer = new Cesium.Viewer("cesiumContainer",
{imageryProvider:new Cesium.加載數據方式{
url:加載數據類型}),
其他控件設置
});
二.官方的ImageryProvider詳細說明：
Cesium內置以下ImageryProvider：
- Web Map Service (WMS) – OGC標准，用於從分布式地理空間數據庫中請求地理區域的地圖塊。在Cesium中，請參見WebMapServiceImageryProvider。
- Tile Map Service (TMS) – 訪問瓦片圖的Rest接口。瓦片圖被轉換為MapTiler或GDAL2Tiles.參見TileMapServiceImageryProvider。
- OpenGIS Web Map Tile Service (WMTS) – 一個OGC標准，用於在互聯網上提供預先繪制的地理參考瓦片圖。在Cesium中，請參見WebMapServiceImageryProvider。
- OpenStreetMap – 訪問OpenStreetMap瓦片圖或任何Slippy瓦片圖。有幾種方式可以host these tiles 在Cesium中，請參加createOpenStreetMapImageryProvider。
- Bing Maps – 使用Bing Maps REST Services訪問瓦片圖。 在https://www.bingmapsportal.com/創建Bing地圖的keys。在Cesium中, 請參見BingMapsImageryProvider。
- Esri ArcGIS MapServer – 使用ArcGIS Server REST API來訪問ArcGIS MapServer上的瓦片圖. 在Cesium中,請參見ArcGisMapServerImageryProvider。
- Google Earth Enterprise – 提供對存儲Google Earth Enterprise服務器中的圖層的訪問。在Cesium中，請參見GoogleEarthImageryProvider。
- Mapbox – 使用Mapbox API訪問瓦片圖. 創建一個賬戶並提供access token. 在Cesium中, 請參見MapboxImageryProvider。
- Standard image files – 從圖片中創建圖層。在Cesium中, 請參見SingleTileImageryProvider。
- Custom tiling schemes – 使用UrlTemplateImageryProvider,通過使用URL模板，我們可以連接到大量圖像源。 例如, TMS的url模板是 //cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg.
- Tile coordinates – 通過繪制每個瓦片圖周圍的邊界並用其水平、X和Y坐標標記它，顯示如何在特定的瓦片方案中將地球划分為多個瓦片圖。
三、完成的Base加載封裝
用的最多的主要是UrlTemplateImageryLayer,url模版的影像加載，加載如google這類商業底圖；SingleTileImageryProvider,單一瓦片影像加載，如單張圖片；
TileCoordinatesImageryProvider,瓦片坐標影像加載，加載經緯度網格圖；WebMapServiceImageryProvider,WMS格式服務影像加載，也就是加載本地服務器發布的影像圖。
加載3dTiles等3D格式數據，不在本文梳理，另外總結。
//1.加載url模版的地圖影像UrltemplateImageryProvider，如google/高德/百度等
addGoogleImagery(){
//UrltemplateImageryProvider自定義加載影像方式
return new Cesium.UrlTemplateImageryProvider({
url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
})
}
//3.加載圖片 圖片地址及西南東北范圍（單位度），圖片也可以是其他形狀（修改rectangle）
addPicImagery(picurl,west,south,east,north){
let opts = {
url:picurl,
rectangle:Cesium.Rectangle.fromDegrees(west,south,east,north)
};
return new Cesium.SingleTileImageryProvider(opts)
}
//4.加載json格式
//#直接加載
addJsonImagery(jsonurl){
let viewer = this._viewer;
//一種方式
viewer.dataSources.add(Cesium.GeoJsonDataSource.load(jsonurl,{
stroke:Cesium.Color.RED,
strokeWidth:5,
fill:Cesium.Color.RED.withAlpha(0.1),
//fill:new Cesium.Color(0, 0, 0, 0)//設置純透明后，必須點擊到polygon邊界才顯示提示框
}));
//另一種方式
// let promise = Cesium.GeoJsonDataSource.load(jsonurl);
// promise.then(function(jsondata){
// viewer.dataSources.add(jsondata);
// let entities =dataSources.entities.values;
// for (let entity of entities) {
// entity.polygon.fill=false;//設置無填充后，必須點擊到polygon邊界才顯示提示框
// entity.polygon.outline = true;
// entity.polygon.outlineColor = Cesium.Color.RED;
// entity.polygon.width=5//無效，polygon.width不能超過1
// }
// })
}
//5.加載kml格式
AddKmlData(url){
let viewer = this._viewer;
var promiseKml = new Cesium.KmlDataSource.load(url, {
clampToGround:true
});
promiseKml.then(kmlData => {
viewer.dataSources.add(kmlData);
let entities = kmlData.entities.values;
for (let entity of entities) {
entity.polyline.show = true;
entity.polyline.material = new Cesium.PolylineGlowMaterialProperty({
glowPower:0.5,
color:Cesium.Color.BLUE
})
}
});
}
//6.發布的wms地圖服務
//使用Geoserver發布，網上有很多教程如何使用，使用接口WebMapServiceImageryProvider
addWmsImagery(wmsurl,wmslayer){
let viewer = this._viewer;
let wmsImage = new Cesium.WebMapServiceImageryProvider({
url:wmsurl（"http://127.0.0.1:8083/geoserver/cesium/wms",
layers : wmslayer（cesium:圖層）,
fill : false,
parameters : {
service : "WMS",
format : "image/png",
transparent : true
}
});
viewer.imageryLayers.addImageryProvider(wmsImage);
//viewer.imageryLayers.add(wmsImage);
}
//7.加載tiff地形，首先地形文件一定要有坐標，坐標系是非常重要的，接口使用WebMapServiceImageryProvider,使用geoserver發布
addTiffImagery(tiffurl,tifflayer){
let viewer = this._viewer;
let tiffProvider = new Cesium.WebMapServiceImageryProvider({
url:tiffurl,
layers: tifflayer,
parameters:{
service:"WMS",
format:"image/png",
transparent:true
}
});
viewer.imageryLayers.addImageryProvider(tiffProvider);
}
//8.加載BingMaps，url好像已經失效
addBingMaps(){
return new Cesium.BingMapsImageryProvider({
url : 'https://dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.ROAD
})
}
//9.加載ArcGIS World Street Maps
addArcGISMap(){
return new Cesium.ArcGisMapServerImageryProvider({
url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
});
}
//10.加載OpenStreetMaps
addOpenStreetMap(){
return new Cesium.Cesium.createOpenStreetMapImageryProvider({
url : 'https://stamen-tiles.a.ssl.fastly.net/watercolor/',
fileExtension: 'jpg',
credit: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
});
}
//11.加載Tile Coordinates 坐標網格
addTileCoord(){
return new Cesium.TileCoordinatesImageryProvider();
}
轉載：別人翻譯的影像圖層教程
https://www.jianshu.com/p/98d4c0b2c618