How to load VectorTilesSource according to the slicing rules provided by postgres

[liangyuan1]

We use PostGIS to provide real-time vector slice data for MapBox rules, with interface addresses of http//: ip: rot/${z}/${x}/${y} for discarding request data, and use style for style rendering work

Your Environment

• Version used:2.44.2
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

##code
` var mvtSource = new itowns.VectorTilesSource({
url: 'http://ip:prot/api-server/gis-server/swgBPipeLine/tile/zxyByLevel/${z}/${x}/${y}?levels=4'
})

  var mvtLayer = new itowns.ColorLayer('MVT', {
    source: mvtSource,
    addLabelLayer: { performance: true }
  })
  view.addLayer(mvtLayer)

`

openlayer demo

The example of Openlayer below can render normally when used in 2D
https://openlayers.org/en/latest/examples/vector-tile-info.html

[ftoromanoff]

Hello,
Thks again for your issue.

I tried to look at your probleme but i don't think I completly understand your need.

But I did manage to use the arcgis World_Basemap_v2 VectorTileServer using the VectorTile style as describe here (https://developers.arcgis.com/documentation/portal-and-data-services/data-services/vector-tile-services/display-vector-tiles/#get-vector-tile-styles)
Thus the code will be:

      const source = new itowns.VectorTilesSource({
        style: "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/styles/root.json",
      });

      const layer = new itowns.ColorLayer("vector-map", {
        source,
        noTextureParentOutsideLimit: true,
        addLabelLayer: true,
      });

Doing this I encountered a bug. Indeed currently itowns.VectorTile only support absolute urls and ArcGis uses relative urls.
This bug has been fixed in PR #2455.

Result:

Secondly you can use the url property when creating a VectorTileSource but you will still need to give a MVT style file associated with the data. And once again I noticed a bug, the url should be entered without $, the {z}/{y}/{x} should be internaly transform to ${z}/${y}/${x} what I fixed as well in PR #2455 .

[liangyuan1]

var mvtSource = new itowns.VectorTilesSource({
url: 'http://113.247.241.251:81/api-server/gis-server/swgBPipeLine/tile/zxyByLevel/${z}/${x}/${y}?levels=4'
})

@ftoromanoff I used the PostGIS database for slicing and wrote my own HTTP interface to produce PBFs based on x, y, and z. There is no style JSON file for rendering, only URLs. I want to use the style frontend for rendering，

code

var mvtSource = new itowns.VectorTilesSource({ url: 'http://ip:prot/api-server/gis-server/swgBPipeLine/tile/zxyByLevel/{z}/{x}/{y}?levels=4' })

Error message

[ftoromanoff]

If you want to use your own MVT data flux, you will need to create and set your own Mapbox style file with all the necessary metadata (url, and description of the differents layers and their associate Mapbox style). (https://docs.mapbox.com/style-spec/reference/root/)

Here an example with a flux consisting of only 1 layer of data:

      const source = new itowns.VectorTilesSource({
        zoom:{
          min: 14,
          max: 14,
        },
        style: {
            sources: {
                sourceTiles: {
                    type: "xyz",
                    tiles: ['https://api.bdnb.io/v2/gorenove/tiles/public/buildings/{z}/{x}/{y}.pbf']
                }
            },
            layers: [
                {
                    id: "batiment-groupe",
                    type: "fill",
                    source: "Gorenove",
                    "source-layer": "sql_statement",
                    paint: {
                        "fill-color": "#FF0000",
                        "fill-opacity": 1
                    }
                }
            ]
        },
        });

      const layer = new itowns.ColorLayer("vector-map", {
        source,
        noTextureParentOutsideLimit: true,
        addLabelLayer: true,
      });

What you can try to do as well is to use a TMS source if you don't want to use the Mapbox Vector Tile standard.