Cesium自定义底图方法汇总

Cesium自定义底图方法汇总

在之前的文章《快速搭建一个Cesium应用示例》中，小编用最简单的方式介绍了Cesium的使用方法。这里面有一个核心的内容就是要注册 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);

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