How to add GeoServer vector tiles in ArcGIS using ArcGIS JS API

Question

I am trying to display vector tile layers from GeoServer in ArcGIS using JavaScript API. I have referred this.here they have used tegola service but i want to add "application/x-protobuf;type=mapbox-vector" which is published in GeoServer.

In OpenLayers I am able to display using Mapbox vector tiles service is "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/Cadastral:CADASTRAL@EPSG:900913@pbf/{z}/{x}/{y}.pbf"

Same thing I want to add in ArcGIS. How to add it in ArcGIS using JavaScript API?

Answer 1

The solution I found is using a GridSet in Google Mercator that has 512x512 tiles like EPSG:900913x2 and flipping the Y axis using flipY=true. I am not sure if it really always needs to be 512x512 tiles in size, but ESRI at least requires it for Pro and it's also working in JS.

My final settings look like:

const vecSettings = {
    style: {
      "version": 8,
      "sources": {
        "sample": {
          "type": "vector",
          "scheme": "tms",
          "tiles": [
            `http://localhost:8080/geoserver/sample/gwc/service/tms/1.0.0/sample:sample@EPSG:900913x2@pbf/{z}/{x}/{y}.pbf?token=${jwt}&flipY=true`
          ],
          "minZoom": 0,
          "maxZoom": 19
        }
      },
      "layers": [
        {
          id: 'sample',
          type: "circle",
          source: "sample",
          "source-layer": "sample",
          layout: {},
          paint: {
            "circle-color": "#31d8f9",
            "circle-stroke-color": "#000000",
            "circle-stroke-width": 2
          }
        }
      ]
    }
};
const layer = new VectorTileLayer(vecSettings);

If you are using the AuthKey plugin the token paramater can also be set in the tiles URL. Also the Geofence plugin is working in combination with GWC and Vector Tiles and all rules are applied accordingly.