小册子和调查-开放数据:网页上的绘图
我正在使用英国军械测量示例代码来调查使用OS地图的网页上的传单。
使用APIKey版本按预期工作，映射呈现(基于OS提供的示例代码)。但是，由于这是不安全的，我正试图使OAuth2令牌版本正常工作，而且它的行为非常怪异。当使用标准3857 SRS时，坐标与现实世界( OS National Grid或Lat/Long对)和呈现风格‘断裂’无关。如果我将投影更改为UK/OS 27700，我可以让样式正常工作，但坐标仍然非常奇怪。如果我把地图中心放在伦敦的特拉法加广场( Trafalgar Square )，它与APIKey版本一起使用，那么地图就会在北海的中间，得到OAuth令牌版。
示例代码说明了这个问题：
<!DOCTYPE html>
<html>
<head>
<title>OS Vector Tile API | Basic Map (EPSG:3857) | Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://labs.os.uk/public/os-api-branding/v0.2.0/os-api-branding.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://labs.os.uk/public/os-api-branding/v0.2.0/os-api-branding.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
<script>
var apiKey = 'APIKEY FROM OPEN DATA ACCOUNT';
var token = 'WVqhoNsoc9D0AGDGYQ0A46tnu9nu'; //THis is generated elsewhere for simplicity
var serviceUrl = 'https://api.os.uk/maps/vector/v1/vts';
// Initialize the map....swap these coordinates below to see how one works and not the other
//center: [ 51.508, -0.1281 ], API Key version centres properly, but not the token version
//center: [ -50,-30 ], //These coordinates with the Token roughly centre in SW London
var mapOptions = {
minZoom: 5,
maxZoom: 15,
center: [ -50,-30 ],
zoom: 7,
};
var map = L.map('map', mapOptions);
// Load and display vector tile layer on the map.
// Uncomment this block for the API Key version
/*var gl = L.mapboxGL({
style: serviceUrl + '/resources/styles?key=' + apiKey,
transformRequest: url => {
return {
url: url += '&srs=3857'
}
}
}).addTo(map);
*/
//Uncomment this block for the OAuth2 version and also change the SRS to 3857 to see the problem
var gl = L.mapboxGL({
style: serviceUrl + '/resources/styles',
transformRequest: url => {
return {
url: url += '?srs=27700',
headers: { 'Authorization': 'Bearer ' + token }
}
}
}).addTo(map);
</script>
</body>
</html>使用上面的简单示例代码(切换块注释以允许API密钥版本或OAuth2令牌版本)，有人能解释这里发生了什么吗？
谢谢
回答 1
Stack Overflow用户
发布于 2021-06-02 16:58:04
正如注释中所建议的-- OAuth 2令牌和地图坐标是两个完全不同的东西.
但是，您可以访问映射块(使用API键或OAuth 2令牌)-- mapOptions将完全相同。在默认情况下，大多数web映射库都会使用纬度和经度指定坐标( center: [ 51.508, -0.1281 ]将在伦敦找到您)。
在使用OAuth 2令牌访问映射端点方面，以下内容可能会有所帮助：https://github.com/tmnnrs/os-data-hub-oauth2-api
https://stackoverflow.com/questions/66267779
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号