Proj4Leaflet 不适用于各种磁贴服务器
Proj4Leaflet not working with various tile servers
我按照 Proj4Leaflet 主页上的介绍使用他们的示例投影(下面的代码)创建了一个基本的滑动地图。这没有问题,但使用的是维护 Proj4Leafet 公司的磁贴服务器,具体来说:http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png
当我尝试使用替代图块服务器时,例如 Mapbox 的 https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}
(我使用自己的标记)、CartoDB 的 http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png
或 OSM 的 http://a.tile.openstreetmap.org/{z}/{x}/{y}.png
,地图根本就没有' t 渲染,我得到一张空白的灰色地图。
是否可以将其他图块服务器与 Proj4Leaflet 一起使用,或者我的配置中是否存在与它们不兼容的内容?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leaflet GeoJSON</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="map"></div>
<script src="js/require.js"></script>
<script>
requirejs.config({
baseUrl: 'js',
paths: {
"leaflet": "http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet"
}
});
requirejs(['leaflet', 'proj4', 'proj4leaflet'],
function (L, proj4, proj4leaflet) {
// SWEREF99 TM (EPSG:3006) with map's pixel origin at SWEREF99 TM coordinate (0, 0)
var crs = new L.Proj.CRS(
'EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [8192, 4096, 2048, 1024, 512, 256, 128,
64, 32, 16, 8, 4, 2, 1, 0.5],
origin: [0, 0]
});
var map = new L.map('map',
{
center: [59.35, 18.066667],
zoom: 10,
maxZoom: 14,
minZoom: 0,
crs: crs
});
L.tileLayer('http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png', {
maxZoom: crs.options.resolutions.length,
minZoom: 0,
continuousWorld: true,
attribution: 'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>, Imagery © 2013 <a href="http://www.kartena.se/">Kartena</a>'
}).addTo(map);
});
</script>
</body>
</html>
Mapbox 将仅提供 Web Mercator (EPSG:3857) 中的图块。要将 proj4Leaflet 与分块数据一起使用,您需要已经投影的分块(例如 NASA 为极点提供立体投影中的分块地图)。您将需要找到或建立一个切片服务器,该服务器设置为以您想要的投影 (EPSG:3006) 输出。
proj4 将动态转换矢量数据,例如 geojson。
Proj4Leaflet 是一个 Leaflet 插件,用于当您需要使用 Leaflet 不支持的坐标参考系统 (CRS) 时。几乎每个 tileprovider 都使用 EPSG3857,这是 Leaflet 的默认 CRS:
The most common CRS for online maps, used by almost all free and commercial tile providers. Uses Spherical Mercator projection. Set in by default in Map's crs option.
Mapbox、CartoDB 和 OSM 都提供 EPSG3857 tilesets。来自 Mapbox 的帮助页面:
Mapbox supports the popular Web Mercator projection, and currently does not support any other projections as output. Web Mercator is a nearly conformal projection that is adopted by the vast majority of web maps and its use allows you to combine Mapbox’s maps with other layers in the same projection. Commonly this projection is referred to as EPSG:900913 or EPSG:3857.
https://www.mapbox.com/help/projection-support/
不用看我打赌您会在 CartoDB 和 OSM 上找到相同的答案。如果您需要使用 EPSG3006,则需要坚持使用在该投影中提供图块的提供商。这是一个:http://maps.omniscale.com/en/openstreetmap/epsg-3006
我按照 Proj4Leaflet 主页上的介绍使用他们的示例投影(下面的代码)创建了一个基本的滑动地图。这没有问题,但使用的是维护 Proj4Leafet 公司的磁贴服务器,具体来说:http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png
当我尝试使用替代图块服务器时,例如 Mapbox 的 https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}
(我使用自己的标记)、CartoDB 的 http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png
或 OSM 的 http://a.tile.openstreetmap.org/{z}/{x}/{y}.png
,地图根本就没有' t 渲染,我得到一张空白的灰色地图。
是否可以将其他图块服务器与 Proj4Leaflet 一起使用,或者我的配置中是否存在与它们不兼容的内容?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leaflet GeoJSON</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="map"></div>
<script src="js/require.js"></script>
<script>
requirejs.config({
baseUrl: 'js',
paths: {
"leaflet": "http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet"
}
});
requirejs(['leaflet', 'proj4', 'proj4leaflet'],
function (L, proj4, proj4leaflet) {
// SWEREF99 TM (EPSG:3006) with map's pixel origin at SWEREF99 TM coordinate (0, 0)
var crs = new L.Proj.CRS(
'EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [8192, 4096, 2048, 1024, 512, 256, 128,
64, 32, 16, 8, 4, 2, 1, 0.5],
origin: [0, 0]
});
var map = new L.map('map',
{
center: [59.35, 18.066667],
zoom: 10,
maxZoom: 14,
minZoom: 0,
crs: crs
});
L.tileLayer('http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png', {
maxZoom: crs.options.resolutions.length,
minZoom: 0,
continuousWorld: true,
attribution: 'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>, Imagery © 2013 <a href="http://www.kartena.se/">Kartena</a>'
}).addTo(map);
});
</script>
</body>
</html>
Mapbox 将仅提供 Web Mercator (EPSG:3857) 中的图块。要将 proj4Leaflet 与分块数据一起使用,您需要已经投影的分块(例如 NASA 为极点提供立体投影中的分块地图)。您将需要找到或建立一个切片服务器,该服务器设置为以您想要的投影 (EPSG:3006) 输出。
proj4 将动态转换矢量数据,例如 geojson。
Proj4Leaflet 是一个 Leaflet 插件,用于当您需要使用 Leaflet 不支持的坐标参考系统 (CRS) 时。几乎每个 tileprovider 都使用 EPSG3857,这是 Leaflet 的默认 CRS:
The most common CRS for online maps, used by almost all free and commercial tile providers. Uses Spherical Mercator projection. Set in by default in Map's crs option.
Mapbox、CartoDB 和 OSM 都提供 EPSG3857 tilesets。来自 Mapbox 的帮助页面:
Mapbox supports the popular Web Mercator projection, and currently does not support any other projections as output. Web Mercator is a nearly conformal projection that is adopted by the vast majority of web maps and its use allows you to combine Mapbox’s maps with other layers in the same projection. Commonly this projection is referred to as EPSG:900913 or EPSG:3857.
https://www.mapbox.com/help/projection-support/
不用看我打赌您会在 CartoDB 和 OSM 上找到相同的答案。如果您需要使用 EPSG3006,则需要坚持使用在该投影中提供图块的提供商。这是一个:http://maps.omniscale.com/en/openstreetmap/epsg-3006