如何在 React-Leaflet 中使用 Ordance Survey 矢量圖塊？

Question

我不確定將軍械測量矢量切片添加到 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 語法加載操作系統矢量切片：

// 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'
        }
    }
});

（我已經驗證我的操作系統 api 密鑰在獨立演示中有效。）

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

我正在使用React-Leaflet將 Leaflet 功能添加到我的 React 應用程序中，並且我嘗試添加react-leaflet-vector-tile-layer - 我已經驗證這適用於 Mapbox Studio 提供的矢量切片圖層：

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

我也在嘗試將這種方法用於軍械測量矢量切片圖層，但它不起作用，因為我可能語法錯誤：

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

未顯示錯誤消息，但操作系統矢量切片圖層未出現在 map 上。 在開發人員控制台中，我可以看到 PBF 文件已下載，但它沒有在 map 上繪制。 這可能是因為我在他們的示例中缺少transformRequest function 嗎？ 假設它是必需的，我如何在使用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' }}}
/>