Cesium快速入门

Appearance

底图更换 ​

Cesium 默认使用 Bing Maps 作为地图源，但由于 Bing Maps 在国内可能存在访问限制，开发者常需替换为更适合国内使用的地图服务,以下以天地图为例来更换底图

前置工作 ​

添加 wmts 影像图层 ​

WebMapTileServiceImageryProvider添加 wmts 影像，下面为天地图加载

js
const tiandituProvider = new Cesium.WebMapTileServiceImageryProvider({
  url:
    "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
    "密钥",
  layer: "img",
  style: "default",
  format: "tiles",
  tileMatrixSetID: "w", // 天地图使用 Web 墨卡托投影（EPSG:3857），需确保 tileMatrixSetID: "w"
  subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名
  maximumLevel: 18,
  credit: new Cesium.Credit("天地图影像"),
});
// 将天地图影像添加到viewer实例的影像图层集合中
const layer = viewer.imageryLayers.addImageryProvider(tiandituProvider);
// 设置透明度
layer.alpha = 0.9;

// 同时添加地理标注
const labelProvider = new Cesium.WebMapTileServiceImageryProvider({
  url:
    "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&tileMatrix={TileMatrix}&tileRow={TileRow}&tileCol={TileCol}&style=default&format=tiles&tk=" +
    "密钥",
  layer: "img",
  style: "default",
  format: "tiles",
  tileMatrixSetID: "w",
  subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名轮询
  maximumLevel: 18,
  credit: new Cesium.Credit("天地图影像"),
});
// 添加到viewer实例的影像图层集合中
viewer.imageryLayers.addImageryProvider(labelProvider);

天地图

添加 xyz 影像瓦片 ​

UrlTemplateImageryProvider添加 xyz 影像，下面为高德地图瓦片加载

js
const gaodeProvider = new Cesium.UrlTemplateImageryProvider({
  url: "https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
  subdomains: ["1", "2", "3", "4"],
});
viewer.imageryLayers.addImageryProvider(gaodeProvider);

添加顶级影像瓦片 ​

SingleTileImageryProvider添加顶级影像瓦片，下面为单张图片加载

js
const singleTileLayer = Cesium.ImageryLayer.fromProviderAsync(
  Cesium.SingleTileImageryProvider.fromUrl(img, {
    rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
  })
);
// singleTileLayer.alpha = 0.1; // 设置透明度
viewer.imageryLayers.add(singleTileLayer);

img 图片： 原图

添加后效果图，可通过alpha属性设置透明度 效果图