底图

本示例展示如何在 Cesium 中加载和切换多种影像底图服务,包括高德地图、单张图片、XYZ 瓦片、WMS、WMTS 等多种底图服务类型,并通过 GUI 控制面板实现底图的动态切换。

核心功能

多种底图加载方式

示例实现了以下几种底图加载方式:

SingleTileImageryProvider:加载单张图片作为底图
AMapImageryProvider:加载高德地图底图服务(支持影像、电子地图等)
UrlTemplateImageryProvider:通过 URL 模板加载 XYZ 瓦片服务(支持 Mars3D、Mapbox 等)
WebMapServiceImageryProvider:加载 WMS 服务
WebMapTileServiceImageryProvider:加载 WMTS 服务(如天地图)

底图动态切换

使用 dat.gui 创建交互式控制面板,支持在多种底图类型之间无缝切换:

gui
  .add(imageryOptions, "底图类型", Object.keys(imageryTypes))
  .onChange((value) => {
    viewer.imageryLayers.removeAll();
    // 根据选择加载对应的底图
  });

图层属性调整

示例展示了如何调整图层的显示属性:

const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
layer.alpha = 0.5;        // 透明度
layer.brightness = 2.0;   // 亮度
layer.contrast = 2.0;     // 对比度
layer.hue = 2.0;          // 色调
layer.saturation = 2.0;   // 饱和度

图层顺序管理

支持对图层进行顺序调整:

viewer.scene.imageryLayers.lower(layer);        // 下移一层
viewer.scene.imageryLayers.lowerToBottom(layer); // 移到最底层
viewer.scene.imageryLayers.raise(layer);         // 上移一层
viewer.scene.imageryLayers.raiseToTop(layer);    // 移到最顶层

关键代码

初始化 Viewer

const viewer = new Viewer(el, {
  baseLayerPicker: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  geocoder: false,
  homeButton: false,
  infoBox: false,
  sceneModePicker: false,
  selectionIndicator: false,
  navigationHelpButton: false,
});

// 移除默认影像和地形
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
viewer.scene.terrainProvider = new EllipsoidTerrainProvider({});

高德地图服务

使用 @cesium-china/cesium-map 包提供的 AMapImageryProvider:

import { AMapImageryProvider } from "@cesium-china/cesium-map";

const options = {
  style: "img",  // 样式: img(影像)、elec(电子地图)、cva(中文注记)
  crs: "WGS84",  // 坐标系: WGS84 或 GCJ02(默认)
};
const provider = new AMapImageryProvider(options);
viewer.imageryLayers.addImageryProvider(provider);

XYZ 瓦片服务

const provider = new UrlTemplateImageryProvider({
  url: "//data.mars3d.cn/tile/img/{z}/{x}/{y}.jpg",
});
viewer.imageryLayers.addImageryProvider(provider);

WMS 服务

const provider = new WebMapServiceImageryProvider({
  url: "https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?",
  layers: "nexrad-n0r",
  parameters: {
    transparent: "true",
    format: "image/png",
  },
});
viewer.imageryLayers.addImageryProvider(provider);

WMTS 服务(天地图)

const token = "your_tianditu_token";
const provider = new WebMapTileServiceImageryProvider({
  url: `http://t{s}.tianditu.gov.cn/vec_c/wmts?tk=${token}`,
  layer: "vec",
  style: "default",
  format: "tiles",
  tileMatrixSetID: "c",
  subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
  tilingScheme: new GeographicTilingScheme(),
  maximumLevel: 18,
});
viewer.imageryLayers.addImageryProvider(provider);

应用场景

地图应用:提供多种底图选项,满足不同业务需求
数据可视化:在不同底图上展示业务数据
离线应用:使用本地图片作为底图
多源数据融合:叠加多个影像图层进行对比分析

注意事项

资源清理:切换底图前记得使用 removeAll() 清除现有图层,避免内存泄漏
跨域问题:使用外部底图服务时需要注意 CORS 配置
Token 管理:天地图等服务需要申请 Token,注意保护和更新
性能优化:大量图层叠加会影响渲染性能,按需加载
坐标系统:注意不同底图服务的坐标系(WebMercator vs Geographic)
- 高德地图默认使用 GCJ02 坐标系(火星坐标系),如需使用 WGS84 坐标系需要显式指定 crs: "WGS84"
- 天地图、OpenStreetMap 等使用 WGS84 坐标系
- 使用不同坐标系的底图时可能出现位置偏移,需要进行坐标转换
组件清理:页面卸载时记得销毁 Viewer 和 GUI 实例

核心功能​

多种底图加载方式​

底图动态切换​

图层属性调整​

图层顺序管理​

关键代码​

初始化 Viewer​

高德地图服务​

XYZ 瓦片服务​

WMS 服务​

WMTS 服务(天地图)​

应用场景​

注意事项​

参考资料​