如何在 React-Leaflet 中使用 Ordnance Survey 矢量切片？

Question

我不确定将 Ordnance Survey 矢量切片添加到 React-Leaflet 应用程序的正确语法。

https://labs.os.uk/public/os-data-hub-examples/os-vector-tile-api/vts-3857-basic-map 处的示例代码从 Mapbox 加载了一些矢量切片库：

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js"></script>
<script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>

然后使用此 JavaScript 语法加载 OS 矢量切片：

// Load and display vector tile layer on the map.
var gl = L.mapboxGL({
    style: 'https://api.os.uk/maps/vector/v1/vts/resources/styles?key=' + apiKey,
    transformRequest: url => {
        return {
            url: url += '&srs=3857'
        }
    }
});

（我已验证我的 OS api 密钥在独立演示中有效。）

如何使用 React 和 Leaflet 完成等效的工作？

我正在使用 React-Leaflet to add Leaflet functionality to my React app, and I've tried adding react-leaflet-vector-tile-layer - 我已经验证这适用于 Mapbox Studio 提供的矢量切片图层：

<VectorTileLayer
  styleUrl="mapbox://styles/my-org/my-style"
  accessToken="my-key"
/>

我也在尝试将这种方法用于 Ordnance Survey 矢量切片图层，但它不起作用，因为我的语法可能有误：

<VectorTileLayer
  styleUrl="https://api.os.uk/maps/vector/v1/vts/resources/styles?key=my-key"
/>

未显示错误消息，但 OS 矢量切片图层未显示在地图上。在开发人员控制台中，我可以看到已下载 PBF 文件，但它没有绘制在地图上。这可能是因为我在他们的示例中缺少 transformRequest 函数吗？假设它是必需的，我如何在使用 react-leaflet-vector-tile-layer 时添加此转换请求？

Answer 1

答案来自 react-leaflet-vector-tile-layer 库的开发者 Ted Piotrowski。我需要使用以下语法添加 transformRequest 参数：

<VectorTileLayer
  styleUrl="https://api.os.uk/maps/vector/v1/vts/resources/styles?key=my-key"
  transformRequest={url => { return { url: url += '&srs=3857' }}}
/>

如何在 React-Leaflet 中使用 Ordnance Survey 矢量切片？

How to use Ordance Survey vector tiles with React-Leaflet?

leaflet

react-leaflet

vector-tiles

mapbox-api-vectortiles