Cesium添加WMS,WMTS,地形图图,3D Tiles数据
在 Cesium 中,你可以添加 WMS、WMTS、地形图 和 3D Tiles 数据源。以下是详细的实现方法:
1. 添加 WMS 服务
WMS(Web Map Service)是一种动态地图服务,适用于加载栅格地图图层。
代码示例
const viewer = new Cesium.Viewer("cesiumContainer");// 添加 WMS 图层
const wmsProvider = new Cesium.WebMapServiceImageryProvider({url: "https://your-wms-server.com/wms", // WMS 服务地址layers: "layer1,layer2", // 要加载的图层parameters: {service: "WMS",format: "image/png",transparent: true,},enablePickFeatures: false, // 是否支持点击查询
});viewer.imageryLayers.addImageryProvider(wmsProvider);
参数说明
url
:WMS 服务地址。layers
:要加载的图层名称(多个用逗号分隔)。parameters
:WMS 请求参数(如format
,transparent
)。enablePickFeatures
:是否允许点击查询要素(默认false
)。
2. 添加 WMTS 服务
WMTS(Web Map Tile Service)是一种瓦片地图服务,适合加载高分辨率地图。
代码示例
const viewer = new Cesium.Viewer("cesiumContainer");// WMTS 配置
const wmtsProvider = new Cesium.WebMapTileServiceImageryProvider({url: "https://your-wmts-server.com/wmts", // WMTS 服务地址layer: "layer-name", // 图层名称style: "default", // 样式format: "image/png",tileMatrixSetID: "EPSG:3857", // 瓦片矩阵集(如 Web Mercator)maximumLevel: 18, // 最大缩放级别credit: new Cesium.Credit("Data provided by XXX"), // 数据来源声明
});viewer.imageryLayers.addImageryProvider(wmtsProvider);
参数说明
url
:WMTS 服务地址。layer
:要加载的图层名称。tileMatrixSetID
:瓦片矩阵集(如EPSG:3857
或EPSG:4326
)。maximumLevel
:最大缩放级别(影响加载的瓦片分辨率)。
3. 添加地形数据
Cesium 支持加载 全球地形 或 自定义地形(如 Cesium World Terrain)。
(1)使用 Cesium World Terrain(默认全球地形)
const viewer = new Cesium.Viewer("cesiumContainer", {terrainProvider: Cesium.createWorldTerrain(), // 使用 Cesium 全球地形
});
(2)加载自定义地形(如 STK 地形)
const customTerrainProvider = new Cesium.CesiumTerrainProvider({url: "https://your-terrain-server.com/terrain", // 地形服务地址requestVertexNormals: true, // 是否请求顶点法线(用于光照效果)requestWaterMask: true, // 是否请求水面效果
});const viewer = new Cesium.Viewer("cesiumContainer", {terrainProvider: customTerrainProvider,
});
(3)本地地形数据(如 quantized-mesh)
const localTerrainProvider = new Cesium.CesiumTerrainProvider({url: "./data/terrain", // 本地地形数据路径
});const viewer = new Cesium.Viewer("cesiumContainer", {terrainProvider: localTerrainProvider,
});
4. 加载 3D Tiles
3D Tiles 是 Cesium 的 3D 数据标准,适用于加载 倾斜摄影、BIM、点云 等数据。
(1)加载 3D Tiles 模型
const viewer = new Cesium.Viewer("cesiumContainer");const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: "https://your-3dtiles-server.com/tileset.json", // tileset.json 路径maximumScreenSpaceError: 2, // 渲染质量(数值越小越精细)dynamicScreenSpaceError: true, // 动态调整加载精度dynamicScreenSpaceErrorDensity: 0.00278, // 密度控制})
);// 定位到 3D Tiles
viewer.zoomTo(tileset);
(2)调整 3D Tiles 样式
tileset.style = new Cesium.Cesium3DTileStyle({color: {conditions: [["${Height} >= 100", "color('red')"],["${Height} >= 50", "color('yellow')"],["true", "color('blue')"],],},
});
(3)控制 3D Tiles 显隐
tileset.show = false; // 隐藏
tileset.show = true; // 显示
总结
数据类型 | Cesium 加载方式 | 适用场景 |
---|---|---|
WMS | WebMapServiceImageryProvider | 动态地图服务 |
WMTS | WebMapTileServiceImageryProvider | 瓦片地图服务 |
地形数据 | CesiumTerrainProvider | 全球/自定义地形 |
3D Tiles | Cesium3DTileset | 3D 模型、BIM、点云 |
常见问题
-
WMS/WMTS 加载失败?
- 检查
url
是否正确,确保服务支持CORS
。 - 确认
layers
或tileMatrixSetID
参数是否正确。
- 检查
-
3D Tiles 加载慢?
- 调整
maximumScreenSpaceError
降低渲染质量。 - 使用
Cesium3DTileset
的preloadWhenHidden
预加载。
- 调整
-
地形不显示?
- 确保
terrainProvider
正确设置。 - 检查地形数据路径或服务是否可用。
- 确保