javascript - 带有自定义图 block 的传单自定义 map

Question

我正在尝试使用 leafletjs 制作自定义 map ，并且我已经在 0.6.x 版本中找到了它，但是当涉及到最新版本(0.7.x)时，它不起作用。

这是适用于 0.6.x 的代码

有人遇到过这个问题吗？

var mapMinZoom = 0;
    var mapMaxZoom = 5;
    var map = L.map('wu-map', {
      maxZoom: mapMaxZoom,
      minZoom: mapMinZoom,
      crs: L.CRS.Simple
    }).setView([0, 0], mapMaxZoom);

    var mapBounds = new L.LatLngBounds(
      map.unproject([0, 3072], mapMaxZoom),
      map.unproject([4352, 0], mapMaxZoom));

    map.fitBounds(mapBounds);

    L.tileLayer('images/map/{z}/{x}/{y}.png', {
      minZoom: mapMinZoom, maxZoom: mapMaxZoom,
      bounds: mapBounds,
      attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler</a>',
      noWrap: true,
      tms: false
    }).addTo(map);

Answer 1

leaflet.js 0.7 版本中存在一个错误，当 crs 选项设置为 L.CRS.Simple 值(并且不仅仅)。 Leaflet 0.7 引入了 L.CRS.getSize (一个函数，返回特定坐标引用系统的特定缩放的世界大小(以像素为单位))，默认情况下调用并返回与 相同的值>L.CRS.scale。它对于默认 CRS 效果很好，但对于其他 CRS 则失败。

我所能建议的就是从您的选项对象中删除 crs: L.CRS.Simple ，它将设置为默认值 (L.CRS.EPSG3857) :

var map = L.map('wu-map', {
  maxZoom: mapMaxZoom,
  minZoom: mapMinZoom
}).setView([0, 0], mapMaxZoom);