传单不将本地图像显示为叠加层

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 将地图坐标转换为 屏幕像素 坐标。 您不想这样做，除非您要测量屏幕像素或在屏幕上定位自定义元素。

在没有查看实际示例的情况下，我只能猜测您将地图的边界设置为图像覆盖范围之外的区域。

传单不将本地图像显示为叠加层

Leaflet does not show local image as overlay

html

javascript

leaflet