javascript - Leafletjs 自定义地图，带有显示多个地图的单个图像 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>

提前致谢

标签： javascriptleaflet

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>