试图在 Leaflet 中使用 EPSG:3857

Question

我正在尝试让传单使用 EPSG:3857 作为输入坐标系。我使用 porj4leaflet 来实现这一点。我已经这样定义了我的地图实例：

var map = L.map('map', {
center: [8378860.13, 1481133.311008498],
zoom: 7,
crs: new L.Proj.CRS(
  'EPSG:3857',
  '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs',
    {
      resolutions: [
        8192, 4096, 2048, 1024, 512, 256, 128
      ],
      origin: [0, 0]
    }
  )
});

当我尝试运行这个时，我得到 TypeError: coordinates must be finite numbers。您可以在此处查看完整的 fiddle：https://jsfiddle.net/asdpinspdai/fckbpq0a/

根据我从文档中了解到的内容，像这样设置 crs 应该允许我以 EPSG:3857 格式将坐标传递给传单。我错过了什么吗？

非常非常感谢这里的任何帮助。谢谢

Answer 1

"finite numbers" 错误是因为 L.Map 期望 center 坐标在 -90 到 90 度和 -180 到 180 度范围内。

在您的 jsfiddle 中，您还遇到了选择 zoom:11 的问题，但在您的 CRS 定义中只有 7 个缩放级别可用。

Leaflet API 始终使用 WGS84 latitude/longitude 度数坐标，因此以这种方式使用 Proj4leaflet 不会达到您想要的效果。看到这个 explanation from the Proj4Leaflet project.

但是，EPSG:3857 已经是 Leaflet 中的默认 CRS，您可以使用其内置方法在米和 WGS84 度之间进行转换，而无需 Proj4Leaflet 或 Proj4js。见 Leaflet CRS documentation.

const proj = L.CRS.EPSG3857;

// Degrees to metres
proj.project(new L.LatLng(51,-2));             // {x: -222638.98158654, y: 6621293.722740}

// Metres to degrees
proj.unproject(new L.Point(-222600, 6621000)); // {lat: 50.998339473, lng: -1.99964982245}

当您需要将仪表坐标传递给 Leaflet 时，将它们 unproject 传送到 WGS 可能是最简单的方法，但您也可以编写一些 Leaflet 函数的重写版本。这些将采用米坐标，将它们转换为度数，然后将它们传递给原始函数。

试图在 Leaflet 中使用 EPSG:3857

trying to use EPSG:3857 in Leaflet

javascript

proj4js

leaflet