arcgis jsapi 4.31调用geoserver发布/{z}/{x}/{y}.png

之前的老项目用的arcgis jsapi 3.24开发的地图功能，现在由于更换了地图服务单位，需要更换底图服务，之前的底图服务是arcgis server 发布的，现在由于国产化要求，更改为开源软件geoserver发布服务了。碰到第一个问题就是地图的底图就调用不了 

底图的地址格式：http://IP：端口/mulu/{z}/{x}/{y}.png

费劲周折之后，终于调试好了，主要参考官方说明，两种用法：

第一种方法：使用通用的tile调用方式

       const TintLayer = BaseTileLayer.createSubclass({
          properties: {
            urlTemplate: null,
          },
          // Generate the tile url for a given level, row and column
          getTileUrl: function (level, row, col) {
            return this.urlTemplate
              .replace("{z}", level)
              .replace("{x}", col)
              .replace("{y}", row);
          },
        });

        // Create a new instance of the TintLayer and set its properties
        const openTopoMapTileLayer = new TintLayer({
          urlTemplate: "http://IP:端口/路径/{z}/{x}/{y}.png",
          title: "图层名称",
        });       

第二种方法：使用WebTileLayer

        const tiledLayer = new WebTileLayer({
          urlTemplate: "http://IP:端口/路径/{z}/{x}/{y}.png",
		  title: '图层名称'
        });

使用以上两种方式，解决了对/{z}/{x}/{y}.png格式的图层调用

参考地址：

ArcGIS Maps SDK for JavaScript | Overview | ArcGIS Maps SDK for JavaScript 4.32 | Esri Developer