如何在 React-Leaflet 中使用 Ordnance Survey 矢量切片?
How to use Ordance Survey vector tiles with React-Leaflet?
我不确定将 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
时添加此转换请求?
答案来自 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' }}}
/>
我不确定将 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
时添加此转换请求?
答案来自 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' }}}
/>