（二）Cesium加载WMTS服务报错400、加载TMS服务、加载本地地形数据

一、加载WMTS服务

按照网上教程发布WMTS切片服务后，使用Cesium加载时出现不加载图像，经过处理按照以下方法处理：

1.在GeoServer的WMTS找到自己发布的切片图像地址：

Ctrl+F键查找：

将此处URL复制到Cesium中使用

注意此处的URL要进行处理：

http://localhost:8080/geoserver/gwc/service/wmts/rest/cesium:县/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png

修改为：

http://localhost:8080/geoserver/gwc/service/wmts/rest/cesium:县/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png

将   {TileMatrix}修改为{TileMatrixSet}:{TileMatrix}

修改坐标系

 tileMatrixSetID: 'EPSG:900913'//通常为这个，改为其他的也可能导致不显示

style属性：

有些博主写的要设置成‘raster’，我设置了就不能显示，不知道原因。

地址很重要，一定多检查！！！

加载代码：

  const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://localhost:8080/geoserver/gwc/service/wmts/rest/cesium:县/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
    layer: 'cesium:县',
    style: '',
    format: 'image/png',
    tileMatrixSetID: 'EPSG:900913'
  })
  viewer.imageryLayers.addImageryProvider(wmtsImageryProvider)

然后已经能显示出来，但是还是会出现400错误，应该是瓦片数据范围过大，加载不及时就会返回400错误，目前没得好的解决办法，先放置，解决了再回来改。

二、加载TMS服务

1.打开TMS服务

2.Ctrl+F搜索title="你所需要的图层"，将URL地址复制，但是要在地址后面加上

/{z}/{x}/{reverseY}.png

3.代码

const tmsImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/cesium:县@EPSG:900913@png/{z}/{x}/{reverseY}.png',
  })
  viewer.imageryLayers.addImageryProvider(tmsImageryProvider)

三、加载地形数据

数据源下载:地理空间数据云 (gscloud.cn)  ,数据集选择DEM数字高程数据，下载解压。

在GeoSever中加载后，显示是黑白：

将数据设置成彩色，参考文章：GIS开发入坑(一)--GeoServer发布DEM地形图_geoserver 发布高程数据-CSDN博客

                                       

在Cesium中加载GeoServer发布的地形:                                                                                                                                                                 没找到方法！！！！                                                                                                                                                                         

还是用的CesiumLab：首页 地球可视化实验室.团队致力于提供基础应用开发，助力数字孪生从业者，开发相关业务。 (cesiumlab.com)    参考加载方法：【CesiumJS-2】自定义地图图层与加载地形服务_cesium自定义地形-CSDN博客       

代码:

  // 加载地形数据
  viewer.scene.setTerrain(
    new Cesium.Terrain(
      Cesium.CesiumTerrainProvider.fromUrl('http://localhost:9003/terrain/qQlrym3I/', {
        requestWaterMask: true,
        requestVertexNormals: true
      })
    )
  )
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(101.999731, 27.999773, 4000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0
    }
  })