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

Leaflet does not show local image as overlay

本文关键字：显示 叠加 图像 地图 单不会      更新时间：2023-09-26

我正在尝试通过传单展示我的形象。我的 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文件时，传单只显示灰色背景。

我错过了什么吗？

您不需要unproject()坐标。

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

如果不看一个实时示例，我只能猜测您正在将地图的边界设置为图像覆盖范围之外的区域。

相关文章：