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 1 ... 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>

具有单个图像png文件的leafletjs自定义地图，其中显示了多个地图

1 个答案: