1

I followed the introduction on the home page of Proj4Leaflet to create a basic slippy-map with their example projection (code below). This is working without issue, but is using the tile servers of the company that maintains Proj4Leafet, specifically: http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png

When I try to use an alternative tile server, such as Mapbox's https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken} (where I use my own token), CartoDB's http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png or OSM's http://a.tile.openstreetmap.org/{z}/{x}/{y}.png the map simply doesn't render and I get a blank grey map.

Is it possible to use other tile servers with Proj4Leaflet, or is there something in my configuration that is incompatible with them?

<!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>
4

2 回答 2

4

Proj4Leaflet 是一个 Leaflet 插件，用于当您需要使用 Leaflet 开箱即用不支持的坐标参考系统 (CRS) 时。几乎每个 tileprovider 都使用 EPSG3857，这是 Leaflet 的默认 CRS：

最常见的在线地图 CRS，几乎所有免费和商业瓷砖供应商都在使用。使用球形墨卡托投影。在 Map 的 crs 选项中默认设置。

Mapbox、CartoDB 和 OSM 都服务于 EPSG3857 瓦片集。从 Mapbox 的帮助页面：

Mapbox 支持流行的 Web Mercator 投影，目前不支持任何其他投影作为输出。Web Mercator 是一种几乎等角投影，被绝大多数 web 地图采用，它的使用允许您将 Mapbox 的地图与同一投影中的其他图层结合起来。这种预测通常被称为 EPSG:900913 或 EPSG:3857。

https://www.mapbox.com/help/projection-support/

不用看我打赌你会在 CartoDB 和 OSM 上找到相同的答案。如果您需要使用 EPSG3006，您需要坚持使用在该投影中提供瓷砖的提供商。这是一个： http: //maps.omniscale.com/en/openstreetmap/epsg-3006

于 2015-12-01T17:34:06.443 回答
2

Mapbox 将仅在 Web Mercator (EPSG:3857) 中提供瓦片。要将 proj4Leaflet 与平铺数据一起使用，您需要已经投影的平铺（例如，NASA在两极的立体投影中提供平铺地图）。您将需要找到或建立一个瓷砖服务器，该服务器设置为在您想要的投影中输出 (EPSG:3006)。

然而，proj4 将即时转换矢量数据，例如 geojson。

于 2015-12-01T17:28:00.950 回答