Leaflet无法将本地图片作为叠加层显示。

Question

我正在尝试使用leaflet显示我的图片。我的HTML和图片文件位于同一个文件夹中。我的图片大小为1920x1080。

我在互联网上搜索并编写了以下代码：

<div id="map"></div>
<script>
    var map = L.map('map', {
    maxZoom: 20,
    minZoom: 20,
    crs: L.CRS.Simple
    }).setView([0, 0], 20);

    var imageUrl = 'test.jpg';
    var southWest = map.unproject([1920, 0], map.getMaxZoom());
    var northEast = map.unproject([0, 1080], map.getMaxZoom());

    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

    var imageBounds = [[1920, 0], [0, 1080]];

    L.imageOverlay(imageUrl, imageBounds).addTo(map);
</script>

地图有样式：

<style>
    #map { height: 480px; }
</style>

当我打开HTML文件时，leaflet只显示灰色背景。我有什么遗漏吗？

- Mr.D

Answer 1

您不需要对坐标进行unproject（）。

unproject将地图坐标转换为屏幕像素坐标。除非您正在测量屏幕像素或定位自定义元素，否则您不希望这样做。

如果没有查看实时示例，我只能猜测您将地图边界设置为超出图像覆盖范围的区域。

- IvanSanchez