CesiumJS WMTS的奇葩数据坐标加载方式

2024-01-24 00:34:36

在GIS应用中，地图是必不可少的元素。CesiumJS作为一款3D地图引擎，支持加载各种数据源，其中就包括WMTS（Web Map Tile Service）数据。然而，CesiumJS默认仅支持4326和3857这两种投影方式的WMTS数据，而我国常用的其他投影方式，例如高斯投影、兰伯特投影等，是不支持的。

面对这种情况，我们如何加载非4326/3857的WMTS数据呢？本文将介绍一种方法，通过修改CesiumJS的源代码来实现这一目标。

前提条件

在开始之前，您需要确保已安装了以下软件：

CesiumJS
Node.js
Visual Studio Code或其他代码编辑器

步骤

克隆CesiumJS仓库

git clone https://github.com/CesiumGS/cesium.git

安装依赖项

npm install

修改CesiumJS源代码

打开CesiumJS仓库中的/Source/Widgets/ImageryProviderViewModels/WebMapTileServiceImageryProviderViewModel.js文件，找到以下代码：

// Check if the WMTS data is in a supported projection.
if (projection !== "EPSG:4326" && projection !== "EPSG:3857") {
  throw new DeveloperError(
    "The WMTS data is not in a supported projection. Only EPSG:4326 and EPSG:3857 are supported."
  );
}

将这段代码替换为：

// Check if the WMTS data is in a supported projection.
if (projection !== "EPSG:4326" && projection !== "EPSG:3857" && projection !== "YOUR_PROJECTION") {
  throw new DeveloperError(
    "The WMTS data is not in a supported projection. Only EPSG:4326, EPSG:3857 and YOUR_PROJECTION are supported."
  );
}

将YOUR_PROJECTION替换为您要加载的WMTS数据的投影方式，例如EPSG:4548。

构建CesiumJS

npm run build

创建CesiumJS项目

创建一个新的CesiumJS项目，并添加以下代码：

// Create the viewer.
const viewer = new Cesium.Viewer("cesiumContainer");

// Add the WMTS layer.
const imageryLayer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
  url: "YOUR_WMTS_URL",
  layers: "YOUR_WMTS_LAYER",
  projection: "YOUR_PROJECTION"
}));

// Zoom to the WMTS layer.
viewer.zoomTo(imageryLayer);