【WebGIS】Cesium：天地图加载

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

• 登录已有账号。如果尚未注册，请先辈行注册。
  
• 访问天地图首页，进入开辟资源，然后点击地图API。
  
• 在地图API页面，点击申请Key。
  
• 选择“创建新应用”，并填写应用的详细信息。
  
• 申请完成后，您可以检察新应用的Key。
  
• 在服务调用时，请使用刚刚申请到的Key作为Token。
  

初始化 Viewer 并加载影像

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

1. Cesium.Ion.defaultAccessToken = '你的Cesium Ion访问令牌';
3. const viewer = new Cesium.Viewer('cesiumContainer', {
4.     homeButton: false,
5.     sceneModePicker: false,
6.     baseLayerPicker: false,
7.     navigationHelpButton: false,
8.     animation: false,
9.     timeline: false,
10.     fullscreenButton: false,
11.     vrButton: false,
12.     infoBox: true,
13. });
15. // 去掉左下角的 Cesium 商标
16. viewer._cesiumWidget._creditContainer.style.display = "none";

复制代码

天地图影像加载

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

1. var MAP_KEY = '你的天地图访问密钥';
3. viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
4.     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,
5.     layer: "tdtVecBasicLayer",
6.     style: "default",
7.     format: "image/jpeg",
8.     tileMatrixSetID: "GoogleMapsCompatible"
9. }));

复制代码

矢量注记

1. viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
2.     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,
3.     layer: "tdtAnnoLayer",
4.     style: "default",
5.     format: "image/jpeg",
6.     tileMatrixSetID: "GoogleMapsCompatible"
7. }));

复制代码

影像底图

1. viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
2.     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,
3.     layer: "tdtBasicLayer",
4.     style: "default",
5.     format: "image/jpeg",
6.     tileMatrixSetID: "GoogleMapsCompatible"
7. }));

复制代码

影像注记

1. viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
2.     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,
3.     layer: "tdtAnnoLayer",
4.     style: "default",
5.     format: "image/jpeg",
6.     tileMatrixSetID: "GoogleMapsCompatible"
7. }));

复制代码

相机定位

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

1. viewer.camera.flyTo({
2.     destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
3.     orientation: {
4.         heading: Cesium.Math.toRadians(348.42),
5.         pitch: Cesium.Math.toRadians(-89.74),
6.         roll: Cesium.Math.toRadians(0)
7.     }
8. });

复制代码

暗黑色系矢量底图

创建底图

1. let imagery = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({  
2.     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,  
3.     layer: "tdtVecBasicLayer",  
4.     style: "default",  
5.     format: "image/jpeg",  
6.     tileMatrixSetID: "GoogleMapsCompatible"  
7. }));  

复制代码

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

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

该设置将返回一个矢量底图，可以在Cesium视图中进行渲染。
调整色调和对比度

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

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

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。