Vue+Cesium從入門到放棄2：Cssium加載各種地圖服務

前言

加載地圖是作爲一個GIS應用最最基礎的內容，任何一個涉及到GIS的框架都提供了豐富的地圖加載接口，Cesium也不例外。
Cesium提供的地圖加載接口可以分爲兩類：一是針對常用的在線地圖，Cesium提供了直接加載的接口，比如ArcGis(ArcGisMapServerImageryProvider)、MapBox(MapboxImageryProvider)、google earth(GoogleEarthEnterpriseImageryProvider），二是針對不同的地圖服務類型（TMS、WMS等），Cesium也提供了相應的接口。

Cesium加載google影像

const viewer=new Cesium.Viewer("cesiumContainer")//下同

viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
      }))

Cesium加載ArcGIS地圖

viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
        url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
      }))

Cesium加載天地圖

//加載影像底圖
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url:'http://t0.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={x}&TILECOL={y}&tk=你的key', 
        layer:'img',
        style:'default',
        tileMatrixSetID:'w'
      }))

//加載註記
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t0.tianditu.gov.cn/cia_w/wmts?tk=你的key',   
        layer:'cia',
        style:'default',
        tileMatrixSetID:'w',
        format:'tiles',
        maximumLevel: 18
      }))

ps:如果沒有key請前往：http://lbs.tianditu.gov.cn/home.html
添加天地圖其它圖層請訪問：http://lbs.tianditu.gov.cn/server/MapService.html

Cesium加載高德地圖

viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        url : 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
        //高德路網數據
        //url:'https://wprd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8&ltype=11'
      }))

Cesium加載騰訊地圖

viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        url : 'https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229',
        customTags : {
          sx: function(imageryProvider, x, y, level) {
            return x>>4;
          },
          sy:function(imageryProvider, x, y, level) {
            return ((1<<level)-y)>>4;
          }
        }
      }))

Cesium加載百度地圖

Cesium加載百度地圖是一件比較麻煩的事，網上有大佬寫了個BDImageryProvider，可以實現百度地圖的加載，有需要可以去搜，或聯繫博主。

其它地圖資源

參考資料：

• https://www.jianshu.com/p/1bde8a358955
• https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Imagery%20Layers%20Manipulation.html

Cesium加載自己的地圖服務

在加載自己的地圖服務之前你應該清楚你的地圖服務屬性哪種類型，TMS、WMS還是WTMS？甚至應該確定服務的版本。下面以Geoserver爲例，對不同類型的地圖服務加載過程進行說明。

TMS

//方法一
viewer.imageryLayers.addImageryProvider(
        new Cesium.createTileMapServiceImageryProvider({
          url:'http://localhost:8088/geoserver/gwc/service/tms/1.0.0/test%3Adem@EPSG%3A4326@png/{z}/{x}/{y}.png',
          tilingScheme : new Cesium.GeographicTilingScheme()
        }))

//方法2
viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url:'http://localhost:8088/geoserver/gwc/service/tms/1.0.0/test%3Adem@EPSG%3A4326@png/{z}/{x}/{reverseY}.png',
          tilingScheme : new Cesium.GeographicTilingScheme()
        }))

不知道怎麼獲得url？進入Geoserver首頁，點擊右側的TMS，在裏面找自己要加載的數據。複製href中的內容然後在後面加{z}/{x}/{y}.png

注意兩種方法url的差異

WMS

//方法一
viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url:'http://localhost:8088/geoserver/wms?&'+
            'bbox={westProjected}%2C{southProjected}%2C{eastProjected}%2C{northProjected}&'+
          '&Format=image/png&request=GetMap&layers=test:dem&width=550&height=250&srs=EPSG:3857',
          rectangle : Cesium.Rectangle.fromDegrees(117.9892707241412, 30.98809375230695, 119.02176246310914,32.01196761807578)
        }))

//方法二
viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapServiceImageryProvider({
          url:'http://localhost:8088/geoserver/test/wms',
          layers:'dem',
          rectangle : Cesium.Rectangle.fromDegrees(117.9892707241412, 30.98809375230695, 119.02176246310914,32.01196761807578)
        }))

WMTS

viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url:'http://localhost:8088/geoserver/gwc/service/wmts/rest/test:dem/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
          layer:'test:dem',
          style : '',
          format : 'image/png',
          maximumLevel: 19,
          tilingScheme: new Cesium.GeographicTilingScheme(),
          tileMatrixSetID:'EPSG:4326'//rectangle : Cesium.Rectangle.fromDegrees(117.9892707241412, 30.98809375230695, 119.02176246310914,32.01196761807578)
        }))

點擊geoserver主頁右邊的WMTS，找到要加載的數據，定位到ResourceURL標籤，其中的template就是我們要的url

tileMatrixSetID表示要加載的柵格數據集，同樣可以大這個頁面找到，如下圖

小結：理論上WMTS也可以UrlTemplateImageryProvider加載，UrlTemplateImageryProvider相比其它接口更加強大，也更加複雜，如果沒有特殊的需要，建議不要用它加載WMS和WMTS服務。

WFS

Cesium並沒有提供加載WFS服務的接口，Cesium能直接加載的矢量數據必須是geojson格式，因此利用Cesium加載WFS服務的一個可行方案是通過ajax請求WFS，將輸出格式設置爲geojson，然後利用Cesium加載ajax請求得到的geojson數據。

//利用Ajax請求WFS服務
function addWFSLayer(url,options={},callback=null){
    const defaultOptions= {
      service: 'WFS',
      version: '1.0.0',
      request: 'GetFeature',
      outputFormat: 'application/json'
    }
    if(!options['typeName']){
      alert('typeName參數必須提供')
      return
    }
    for(let key in options){
      defaultOptions[key]=options[key]
    }
    let urlString=url+'?'
    for(let key in defaultOptions){
      urlString+=`&${key}=${defaultOptions[key]}`
    }
    axios.get(urlString).then((res)=>{
      if(res.status==200){
        if(callback){
          callback(res.data)
        }
      }
    }).catch((e)=>{
      console.log(e)
    })
  }
//加載geojson
addWFSLayer('http://localhost:8088/geoserver/tiger/ows',{
        typeName:'tiger%3Atiger_roads'
      },(geojson) =>{
        _this.viewer.dataSources.add(Cesium.GeoJsonDataSource.load(geojson))
      })

Cesium加載單張圖片

viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
        url:'static/images/a.PNG',
        rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
      }))

ps:如果不設置rectangle，圖片將鋪滿整個地球。