【WebGIS】Cesium：天地图加载

天地图是中国国家基础地理信息系统，由中国测绘地理信息局和国家地理信息公共服务平台共同开发和运营。它提供多项地理信息服务，包括地图数据、地理编码、路径规划以及地理搜索等。天地图的目标是为各行业提供高质量、全面的地理信息数据和解决方案。

天地图调用申请

登录已有账号。如果尚未注册，请先进行注册。

访问天地图首页，进入开发资源，然后点击地图API。

在地图API页面，点击申请Key。

选择“创建新应用”，并填写应用的详细信息。

申请完成后，您可以查看新应用的Key。

在服务调用时，请使用刚刚申请到的Key作为Token。

初始化 Viewer 并加载影像

在加载影像之前，首先需要初始化 Cesium Viewer。以下是使用 Cesium 初始化 Viewer 并去掉一些不必要的 UI 控件的示例代码：

Cesium.Ion.defaultAccessToken = '你的Cesium Ion访问令牌';const viewer = new Cesium.Viewer('cesiumContainer', {    homeButton: false,    sceneModePicker: false,    baseLayerPicker: false,    navigationHelpButton: false,    animation: false,    timeline: false,    fullscreenButton: false,    vrButton: false,    infoBox: true,});// 去掉左下角的 Cesium 商标viewer._cesiumWidget._creditContainer.style.display = "none";

天地图影像加载

中国的天地图（Tianditu）提供了丰富的影像与矢量数据，通过 Cesium 可以轻松地将天地图的服务加载到三维地球中。下面是如何加载天地图的矢量图层、影像图层及其注记图层的示例。

矢量底图

var MAP_KEY = '你的天地图访问密钥';viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({    url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + MAP_KEY,    layer: "tdtVecBasicLayer",    style: "default",    format: "image/jpeg",    tileMatrixSetID: "GoogleMapsCompatible"}));

矢量注记

viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({    url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + MAP_KEY,    layer: "tdtAnnoLayer",    style: "default",    format: "image/jpeg",    tileMatrixSetID: "GoogleMapsCompatible"}));

影像底图

viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({    url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + MAP_KEY,    layer: "tdtBasicLayer",    style: "default",    format: "image/jpeg",    tileMatrixSetID: "GoogleMapsCompatible"}));

影像注记

viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + MAP_KEY,    layer: "tdtAnnoLayer",    style: "default",    format: "image/jpeg",    tileMatrixSetID: "GoogleMapsCompatible"}));

相机定位

加载完成影像后，可以通过相机定位到特定的地区（如中国）：

viewer.camera.flyTo({    destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),    orientation: {        heading: Cesium.Math.toRadians(348.42),        pitch: Cesium.Math.toRadians(-89.74),        roll: Cesium.Math.toRadians(0)    }});

暗黑色系矢量底图

创建底图

let imagery = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({      url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + MAP_KEY,      layer: "tdtVecBasicLayer",      style: "default",      format: "image/jpeg",      tileMatrixSetID: "GoogleMapsCompatible"  }));  

此代码使用 Cesium.WebMapTileServiceImageryProvider 类来添加一个WMTS（Web Map Tile Service）图层。具体配置包括：

url：指定底图的服务地址，这里我们使用天地图提供的矢量服务。layer：图层的名称。style：图层样式，这里使用默认样式。format：指定图块格式为JPEG。tileMatrixSetID：使用Google Maps兼容的平铺矩阵集。

该配置将返回一个矢量底图，可以在Cesium视图中进行渲染。

调整色调和对比度

为了创建一个视觉上更具冲击力的暗黑色系效果，我们对底图的色调和对比度进行了调整：

imagery.hue = 3; // 图层色调  imagery.contrast = -1.2; // 图层对比度  

imagery.hue：此属性用于调整底图的色调。例如设置为3可能会使颜色偏向于蓝色或绿色，具体效果依赖于底图的原始色调。imagery.contrast：此属性设置对比度。负值（如-1.2）会降低对比度，使图像的颜色更加柔和，并增强暗色区域的细节，从而使底图视觉上更加协调和沉稳。