CesiumJS 中非 4326/3857 WMTS 数据的加载实践

CesiumJS 是一款强大的三维地球和地图可视化库，它支持加载各种格式的地理空间数据，包括 WMTS（Web Map Tile Service）数据。通常情况下，WMTS 数据使用 EPSG:4326（WGS 84）或 EPSG:3857（Web Mercator）坐标系。但在某些特定应用场景中，可能需要加载使用非标准坐标系的 WMTS 数据。

下面，我将分享一次在 CesiumJS 中加载非 4326/3857 WMTS 数据的实践经验。

一、WMTS 服务准备

在加载 WMTS 数据之前，请确保你的 WMTS 服务是可用的，并且支持所需的坐标系。如果 WMTS 服务本身不支持所需的坐标系，你可能需要先将数据转换到支持的坐标系，或者寻找其他数据源。

二、坐标转换

CesiumJS 默认使用 EPSG:3857 坐标系。如果你的 WMTS 数据使用非 4326/3857 坐标系，你需要在客户端进行坐标转换。这通常涉及到将 WMTS 数据的坐标转换为 CesiumJS 可识别的坐标。

你可以使用 Proj4JS 这样的 JavaScript 库来进行坐标转换。Proj4JS 支持多种坐标系之间的转换，包括非标准的坐标系。

三、CesiumJS 配置

在 CesiumJS 中加载 WMTS 数据，你需要配置一个 WebMapTileServiceImageryProvider 实例。这个实例需要一些关键参数，包括 WMTS 服务的 URL、图层名称、样式名称、坐标参考系等。

对于非 4326/3857 坐标系，你需要特别关注坐标参考系的设置。你需要将 WMTS 服务的坐标参考系转换为 CesiumJS 可识别的格式。这通常涉及到将 WMTS 服务的坐标参考系代码转换为 Well-Known Text (WKT) 格式。

四、示例代码

下面是一个简单的示例代码，展示了如何在 CesiumJS 中加载非 4326/3857 WMTS 数据：

```javascript
// 引入 CesiumJS 和 Proj4JS 库
import * as Cesium from ‘cesium/Cesium’;
import proj4 from ‘proj4’;

// 注册 Proj4JS 坐标转换函数
proj4.defs(‘YOUR_WMTS_CRS’, ‘+title=YOUR_WMTS_CRS +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs’);

// 创建 Cesium Viewer 实例
const viewer = new Cesium.Viewer(‘cesiumContainer’);

// 创建 WMTS 服务的 URL 模板
const wmtsUrl = ‘http://your.wmts.service/tile/{TileMatrix}/{TileMatrixSet}/{Layer}/{TileRow}/{TileCol}.png‘;

// 创建 WebMapTileServiceImageryProvider 实例
const wmtsProvider = new Cesium.WebMapTileServiceImageryProvider({
url : wmtsUrl,
layer : ‘yourLayer’,
style : ‘default’,
format : ‘image/png’,
tileMatrixSetID : ‘yourTileMatrixSet’,
subdomains : [‘’],
tilingScheme : new Cesium.WebMercatorTilingScheme(), // 使用 Web Mercator 坐标系
rectangle : Cesium.Rectangle.fromDegrees(
// 设置 WMTS 数据的覆盖范围（经度范围）
westLongitude, southLatitude, eastLongitude, northLatitude
),
minimumLevel : 0,
maximumLevel : 19,
credit : new Cesium.Credit(‘Your Credit’),
// 设置坐标转换函数
tileTransformFunction: function(tile, request, url) {
// 获取原始坐标
const levelZeroGeometry = tile.geometry;

    // 使用 Proj4JS 进行坐标转换
    const transformedGeometry = new Cesium.Rectangle(
        proj4('EPSG:4326', 'YOUR_WMTS_CRS', [levelZeroGeometry.west, levelZeroGeometry.south]),
        proj4('EPSG:4326', 'YOUR_WMTS_CRS', [levelZeroGeometry.east, levelZeroGeometry.north])
    );
    // 更新坐标
    tile.geometry = transformedGeometry;
    // 返回转换后的 URL
    return url;
}

});

// 将 WMTS 图层添加到 Viewer 的影像图层集合中
viewer.imageryLayers.add(