For Help ： VectorSource unable to load the vector tile service i defined

[kobeyk]

Up here on the Web side, it works fine，but it doesn't work on mobile

Why does this work in the example? I want to know what the URL refers to. Is it a mapbox style or TileJSON data?

<MapboxGL.VectorSource
            id="population"
            url={'mapbox://mapbox.660ui7x6'}
            ref={(source) => {
              this._vectorSource = source;
            }}
            onPress={(e) => {
              console.log(`VectorSource onPress: ${e.features}`,e.features);
            }}
            >
            <MapboxGL.FillLayer
              id="state-population"
              sourceLayerID="state_county_population_2014_cen"
              maxZoomLevel={4}
              filter={['==', 'isState', true]}
              style={styles.statePopulation}
            />

            <MapboxGL.FillLayer
              id="county-population"
              sourceLayerID="state_county_population_2014_cen"
              minZoomLevel={4}
              filter={['==', 'isCounty', true]}
              style={styles.countyPopulation}
            />
 </MapboxGL.VectorSource>

I have two URLs, one is the following(please ignore the address, I want to be more realistic):

http://10.16.248.111:8082/datamg/services/vectortile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1359673693088064

Another is : http://localhost:8080/3, The URL points to a Style style structure,like this:

{
    "name": "智慧园区",
    "center": [
        118.98838375, 29.0688856
    ],
    "zoom": 10,
    "version": 8,
    "sources": {
        "building1": {
            "type": "vector",
            "tiles": [
                "http://10.16.248.111:8082/datamg/services/vectortile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1359673693088064"
            ],
            "tileSize": 512,
            "scheme": "xyz",
            "attribution": "<a href='http://service.imagesky.info/'>服务保障·毕方组</a>",
            "minzoom": 2,
            "maxzoom": 18
        }
    },
    "layers": [
        {
            "id": "building1",
            "type": "fill",
            "source": "building1",
            "paint": {
                "fill-extrusion-color": [
                    "interpolate", 
                    [
                        "exponential", 0.99
                    ], 
                    [
                        "get", "高度"
                    ], 0, "#52e5e7", 20, "#FF00FF", 40, "#130cb7"
                ],
                "fill-extrusion-height": [
                    "interpolate", 
                    [
                        "linear"
                    ], 
                    [
                        "zoom"
                    ], 15, 5, 16.05, 
                    [
                        "get", "高度"
                    ]
                ],
                "fill-extrusion-opacity": 0.8
            },
            "layout": {
                "visibility": "visible"
            },
            "source-layer": "园区"
        }
    ]
}

Now, my question is, I've tried both and they don't work, what should I do to make VectorSource work, thank you very much!

[kobeyk]

I tried again, and was pleasantly surprised to find that it was ok，it like this：

// pbf矢量瓦片
    const vectorSourceProps = {
      id: 'vectorSourceExample',
      tileUrlTemplates: [
        'http://localhost:8082/datamg/services/vectortile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1359673693088064',
      ],
    };

      <MapboxGL.VectorSource 
            {...vectorSourceProps}
            ref={(source) => {
              this._vectorSource = source;
            }}
            onPress={(e) => {
              console.log("geometry",e.features[0].geometry)
              alert(`建筑名称: ${e.features[0].properties.name}`);
            }}
          >
            <MapboxGL.FillLayer
               id="building3D"
               sourceID="vectorSourceExample"
               sourceLayerID="园区" // 这个很关键，这个必须匹配上，否则图层无法显示
            />
      </MapboxGL.VectorSource>

效果如下：