「GIS教程」Cesium自定义底图方法汇总

在之前的文章《快速搭建一个Cesium应用示例》中小编用最简单的方式介绍了Cesium的使用方法。这里面有一个核心的内容就是要注册 Cesium ion, 什么是Cesium ion呢？Cesium ion 是 Cesium 提供的一个云平台，旨在简化 3D 地理空间数据的托管、流式传输和可视化。它专为使用 CesiumJS 库的开发者设计，帮助他们更高效地管理和展示大规模 3D 地理空间数据。

这个东西好用归好用，但它需要注册帐号，并且其官网和服务均在海外，导致国内用户的访问速度并不够快。偶尔也是出现抽风的问题。那么如何避开 Cesium ion 的束缚，使用自定义的底图服务呢？

imageryLayers

在解决这个问题之前，先来了解下一个类：ImageryLayers，它是 CesiumJS 中的一个核心类，用于管理和显示地图影像图层。它允许用户在 3D 地球或 2D 地图上叠加多个影像图层（如卫星图像、地形图、自定义地图等），并控制它们的显示顺序、透明度、可见性等属性。ImageryLayers 提供了灵活的 API，使开发者能够轻松创建、管理和操作影像图层。

下面是DeepSeek给出的Demo

// 创建 Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer');

// 获取 Viewer 的 ImageryLayerCollection
const imageryLayers = viewer.imageryLayers;

// 添加 Bing Maps 影像图层
const bingLayer = imageryLayers.addImageryProvider(
    new Cesium.BingMapsImageryProvider({
        url: 'https://dev.virtualearth.net',
        key: 'your-bing-maps-key',
        mapStyle: Cesium.BingMapsStyle.AERIAL
    })
);

// 添加 WMS 影像图层
const wmsLayer = imageryLayers.addImageryProvider(
    new Cesium.WebMapServiceImageryProvider({
        url: 'https://example.com/wms',
        layers: 'layer-name',
        parameters: {
            transparent: true,
            format: 'image/png'
        }
    })
);

// 设置 WMS 图层的透明度
wmsLayer.alpha = 0.5;

// 将 Bing Maps 图层移到最上层
imageryLayers.raiseToTop(bingLayer);

// 隐藏 WMS 图层
wmsLayer.show = false;

使用静态图片作底图

在之前的文章《「GIS数据」分享ECharts-GL官方底图数据》小编不是分享过几张ECharts的底图吗，用在这里正正好，详细方法

const staticImgLayer = new Cesium.SingleTileImageryProvider({
    url: "/你的图片路径.jpg",
    tileWidth: 5400, // 设置图片的宽度
    tileHeight: 2700, // 设置图片的高度
    rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
});

viewer.imageryLayers.addImageryProvider(staticImgLayer);

效果如图：

使用天地图底图服务

如果嫌弃静态图片的底图分辨率太低，可以尝试下使用天地图的底图，不过天地图的服务也要注册开发者帐号申请Key哦。天地图Key的申请教程可以参考：《「GIS教程」QGIS添加国内底图图源（天地图、高德）》

具体的代码如下：

//天地图影像
const customImageLayer =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='+ tiandituToken,
    layer:'img',
    style:'default',
    format:'tiles',
    tileMatrixSetID:'w',
    subdomains:['t0','t1','t2','t3','t4','t5','t6','t7'],
    credit:new Cesium.Credit('天地图影像'),
    maximumLevel:18
})

viewer.imageryLayers.addImageryProvider(customImageLayer);

其中 tiandituKey 需要替换为你申请到的天地图的Key哦。

更多Cesium学习笔记汇总

见这里：----> Cesium学习笔记整理汇总