cesium入门学习3-影像图层ImageryLayer

加载影像提供者（数据源）

WebMapTileServiceImageryProvider

WebMapTileServiceImageryProvider 是用于加载符合 Web Map Tile Service (WMTS) 标准的地图图像数据的提供者。WMTS 是一种用于分发地图瓦片的标准协议，通常用于加载动态地图图层。

  const token = "caa53d689dd366e2122a80ea23a45144";
    var imgProvider = new Cesium.WebMapTileServiceImageryProvider({
      url:
        "http://192.168.9.212:8888/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" +
        token,
      layer: "tdtCvaLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
    });

UrlTemplateImageryProvider

UrlTemplateImageryProvider 则是用于加载基于 URL 模板的地图图像数据的提供者。您可以通过指定一个 URL 模板，来动态地加载地图瓦片数据。这种方式常用于自定义的地图服务或第三方地图服务。

 let url =
    "http://175.178.29.93:8888/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tkcaa53d689dd366e2122a80ea23a45144";
  var mapOption = {
    url: url,
  };
  var imgProvider = new Cesium.UrlTemplateImageryProvider(mapOption);

加载天地图

 //天地图平面地图加载
    let url =
      "https://t4.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=2cf56b2e77c1be9a456ef411d808daad";

  //加载天地图平面注记地图加载
    let url =
      "https://t4.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=2cf56b2e77c1be9a456ef411d808daad";

  //天地图影像地图加载
    let url =
      "https://t4.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=2cf56b2e77c1be9a456ef411d808daad";

  //天地图影像地图加载
    let url =
      "https://t4.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=2cf56b2e77c1be9a456ef411d808daad";

  //天地图道路地图加载
    let url =
      "https://t4.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=2cf56b2e77c1be9a456ef411d808daad";

 addTdtLayer(url) {
    var mapOption = {
      url: url,
    };
    var imgProvider = new Cesium.UrlTemplateImageryProvider(mapOption);
    let mapLayer = this.viewer.imageryLayers.addImageryProvider(imgProvider);
    return mapLayer;
  },

//WebMapTileServiceImageryProvider 加载的方式
const token = "caa53d689dd366e2122a80ea23a45144";
  var imgProvider = new Cesium.WebMapTileServiceImageryProvider({
    url:
      "http://192.168.9.212:8888/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" +
      token,
    layer: "tdtCvaLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
  });
 viewer.imageryLayers.addImageryProvider(imgProvider);

arcgis瓦片服务加载

 let url =
      "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
 var mapOption = {
      url: url,
    };
    var imgProvider = new Cesium.UrlTemplateImageryProvider(mapOption);
    let mapLayer = this.viewer.imageryLayers.addImageryProvider(imgProvider);
    

wms

let url = "https://example.com/wms";
  let layerName = "layerName";  
var wms = new Cesium.WebMapServiceImageryProvider({
      url: url,
      layers: layerName,
      parameters: {
        transparent: true, //透明配置
        service: "WMS",
        format: "image/png",
        srs: "EPSG:4326",
      },
    });
    let wmsLayer = this.viewer.imageryLayers.addImageryProvider(wms);

高德地图

let url ="https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
var imgProvider = new Cesium.UrlTemplateImageryProvider({ url: url });
    this.viewer.imageryLayers.addImageryProvider(imgProvider);