Cesium添加WMS,WMTS,地形图图,3D Tiles数据

Cesium 中,你可以添加 WMSWMTS地形图3D Tiles 数据源。以下是详细的实现方法:


1. 添加 WMS 服务

WMS(Web Map Service)是一种动态地图服务,适用于加载栅格地图图层。

代码示例

javascript 复制代码
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)是一种瓦片地图服务,适合加载高分辨率地图。

代码示例

javascript 复制代码
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:3857EPSG:4326)。
  • maximumLevel:最大缩放级别(影响加载的瓦片分辨率)。

3. 添加地形数据

Cesium 支持加载 全球地形自定义地形(如 Cesium World Terrain)。

(1)使用 Cesium World Terrain(默认全球地形)

javascript 复制代码
const viewer = new Cesium.Viewer("cesiumContainer", {
    terrainProvider: Cesium.createWorldTerrain(), // 使用 Cesium 全球地形
});

(2)加载自定义地形(如 STK 地形)

javascript 复制代码
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)

javascript 复制代码
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 模型

javascript 复制代码
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 样式

javascript 复制代码
tileset.style = new Cesium.Cesium3DTileStyle({
    color: {
        conditions: [
            ["${Height} >= 100", "color('red')"],
            ["${Height} >= 50", "color('yellow')"],
            ["true", "color('blue')"],
        ],
    },
});

(3)控制 3D Tiles 显隐

javascript 复制代码
tileset.show = false; // 隐藏
tileset.show = true;  // 显示

总结

数据类型 Cesium 加载方式 适用场景
WMS WebMapServiceImageryProvider 动态地图服务
WMTS WebMapTileServiceImageryProvider 瓦片地图服务
地形数据 CesiumTerrainProvider 全球/自定义地形
3D Tiles Cesium3DTileset 3D 模型、BIM、点云

常见问题

  1. WMS/WMTS 加载失败?

    • 检查 url 是否正确,确保服务支持 CORS
    • 确认 layerstileMatrixSetID 参数是否正确。
  2. 3D Tiles 加载慢?

    • 调整 maximumScreenSpaceError 降低渲染质量。
    • 使用 Cesium3DTilesetpreloadWhenHidden 预加载。
  3. 地形不显示?

    • 确保 terrainProvider 正确设置。
    • 检查地形数据路径或服务是否可用。

相关推荐
??? Meggie23 分钟前
【SQL】使用UPDATE修改表字段的时候,遇到1054 或者1064的问题怎么办?
android·数据库·sql
一屉大大大花卷33 分钟前
初识Neo4j之图数据库(二)
数据库·neo4j
天翼云开发者社区1 小时前
OLAP分析数据库适用场景及主流产品对比
数据库
Britz_Kevin1 小时前
从零开始的云计算生活——番外2,MySQL组复制
数据库·mysql·云计算·生活·#组复制
工藤学编程1 小时前
分库分表之实战-sharding-JDBC绑定表配置实战
数据库·分布式·后端·sql·mysql
老纪的技术唠嗑局2 小时前
单机分布式一体化数据库的架构设计与优化
数据库·分布式
GBASE2 小时前
“G”术时刻:Linux环境下通过ESQL/C方式连接南大通用GBase 8s数据库(上)
数据库
一只fish2 小时前
MySQL 8.0 OCP 1Z0-908 题目解析(23)
数据库·mysql
不拘小节曹阿蛮2 小时前
Ubuntu 20.04 ARM64架构下面安装mysql5.7.22
数据库