0

我不确定将军械测量矢量切片添加到 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"
/>

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

在此处输入图像描述

4

1 回答 1

0

答案来自 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' }}}
/>
于 2022-01-24T23:10:08.190 回答