Cesium加载wmts服务失败

开发环境：Cesium（1.7+）+vue2

首先，要加载跨域的wmts服务，需要在vue.config.js文件配置代理服务

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //关闭语法检查
  publicPath: "",
  devServer: {
    proxy: {
            "/arcgis": {
        target: "https://{你的域名}",//如https://192.128.166
        pathRewrite: { "^/arcgis": "" },
        changeOrigin: true,
        secure: false,//被代理的服务器若为hhttps协议则需要设置此参数
        logLevel: "debug",
    },
  },
});

需要访问的xml文档：https://*********/arcgis/rest/services/*******/MapServer/WMTS/1.0.0/WMTSCapabilities.xml

在xml文档下查找到resourceurl对应的url：

<ResourceURL format="image/png" resourceType="tile" template="https://{你的域名}/arcgis/rest/services/gd18_1/MapServer/WMTS/tile/1.0.0/gd18_1/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png"/>

如何检测是否配置成功？直接在浏览器访问你开启本地服务器的域名拼接上被代理的服务地址域名，如：http://localhost:8080/+arcgis/arcgis/rest/services/gd18_1/MapServer/WMTS/1.0.0/WMTSCapabilities.xml        

PS:很多人问这里url是不是配置错了多了个arcgis/。我也是看某博主的配置才这样写的，亲测有用不然也不可能出现下方的结果。

若能够成功打开对应的文档，那就是配置成功了，如下图。

到这步就成功配置好代理服务器了，那么接下来就是考虑如何正确写WebMapTileServiceImageryProvider函数来加载影像了。

---

第二步，配置WebMapTileServiceImageryProvider参数

在参考了很多博主，很多版本后，结果还是不能够成功加载影像进来。

我的数据源影像只是局部范围的，在arcmap加载服务进来后如下所示。

对应的参数设置如下

      const wmtsimg = new Cesium.WebMapTileServiceImageryProvider({
        url: '/arcgis/arcgis/rest/services/gd18_1/MapServer/WMTS/tile/1.0.0/gd18_1/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png',
        layer: 'gd',
        style: 'default',
        format: 'image/png',
        tileMatrixSetID: 'default',
        tileMatrixLabels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
        maximumLevel: 19,
        tilingScheme: new Cesium.GeographicTilingScheme({
          numberOfLevelZeroTilesX: 1,
          numberOfLevelZeroTilesY: 1,
        }),

我也不知道哪里出错了，或者少设置了什么参数。

这里放出上面参数在xml文档中的值：

<Layer>

<ows:Title>gd</ows:Title>

<ows:Identifier>gd</ows:Identifier>

<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::4326">

<ows:LowerCorner>20.11255314346319 109.3153839111305</ows:LowerCorner>

<ows:UpperCorner>25.912924467086809 116.91323190689053</ows:UpperCorner>

</ows:BoundingBox>

<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">

<ows:LowerCorner>109.3153839111305 20.11255314346319</ows:LowerCorner>

<ows:UpperCorner>116.91323190689053 25.912924467086809</ows:UpperCorner>

</ows:WGS84BoundingBox>

<Style isDefault="true">

<ows:Title>Default Style</ows:Title>

<ows:Identifier>default</ows:Identifier>

</Style>

<Format>image/png</Format>

<TileMatrixSetLink>

<TileMatrixSet>default</TileMatrixSet>

</TileMatrixSetLink>

<ResourceURL format="image/png" resourceType="tile" template="https://localhost:8080/arcgis/rest/services/gd/MapServer/WMTS/tile/1.0.0/gd/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png"/>

</Layer>

<!-- TileMatrixSet -->

<TileMatrixSet>

<ows:Title>TileMatrix using 0.28mm</ows:Title>

<ows:Abstract>The tile matrix set that has scale values calculated based on the dpi defined by OGC specification (dpi assumes 0.28mm as the physical distance of a pixel).</ows:Abstract>

<ows:Identifier>default</ows:Identifier>

<ows:SupportedCRS>urn:ogc:def:crs:EPSG::4326</ows:SupportedCRS>

<TileMatrix>

<ows:Identifier>0</ows:Identifier>

<ScaleDenominator>5.590822640286474E8</ScaleDenominator>

<TopLeftCorner>90.0 -180.0</TopLeftCorner>

<TileWidth>256</TileWidth>

<TileHeight>256</TileHeight>

<MatrixWidth>1</MatrixWidth>

<MatrixHeight>1</MatrixHeight>

</TileMatrix>

`````````<tilematrix> 1~17
`````````

<TileMatrix>
<ows:Identifier>18</ows:Identifier>
<ScaleDenominator>2132.729583849517</ScaleDenominator>
<TopLeftCorner>90.0 -180.0</TopLeftCorner>
<TileWidth>256</TileWidth>
<TileHeight>256</TileHeight>
<MatrixWidth>216527</MatrixWidth>
<MatrixHeight>50886</MatrixHeight>
</TileMatrix>

最后web端报错如下所示

希望能够抛砖引玉，得到更有效的解决办法~