javascript - leafletjs 自定义 map ，包含显示多个 map 的单个图像 png 文件

Question

我有一个图像文件，我正在使用 leafletjs 模块来尝试缩放它，但是在执行代码时，它会显示同一图像的多次。尝试将 noWrap 选项设置为 true 但没有任何反应。 知道我该怎么做吗？

<script text="text/javascript">
var map = L.map('map', {
        maxZoom: 24,
        minZoom: 1,
        noWrap: true,
        crs: L.CRS.Simple
    }).setView([0, 0], 5);

    map.setMaxBounds(new L.LatLngBounds([0,2048], [2048,0]));

L.tileLayer('maps/map.png').addTo(map);
</script>

提前致谢

Answer 1

找到原因了...

我需要使用 imageOverlay 而不是tileLayer ... https://leafletjs.com/reference-1.3.4.html#imageoverlay

<script text="text/javascript">

var map = L.map('map', {
    minZoom: 1,
    maxZoom: 3,
    center: [0, 0],
    zoom: 1,
    crs: L.CRS.Simple
});
var w = 2048;
var h = 2048;
var url = 'maps/map_b_final.png';
var southWest = map.unproject([ 0, h], map.getMaxZoom()-1);
var northEast = map.unproject([ w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds( southWest, northEast);

L.imageOverlay( url, bounds).addTo(map);

map.setMaxBounds(bounds);
</script>