Leaflet不會將本地圖像顯示為疊加層

Question

我試圖通過傳單展示我的形象。 我的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文件時，傳單只顯示灰色背景。

我錯過了什么？

Answer 1

您不需要unproject()坐標。

unproject將地圖坐標轉換為屏幕像素坐標。 除非您在屏幕上測量屏幕像素或定位自定義元素，否則您不希望這樣做 。

如果不看一個實例，我只能猜測你是將地圖的邊界設置為圖像覆蓋范圍之外的區域。