Leaflet 如何使用传单覆盖在地图中正确地拟合图层？

我已经实现了下面的代码，我需要在地图上放置一个图层，这是我使用QGIS制作的。但是坐标不正确，我该怎么办？问题是坐标错误，或者有一种方法可以使用覆盖正确地匹配地图中的图层

var；
变量初始坐标=[-14.91，-43.20]；
var initialZoomLevel=4；
//在“地图”分区中创建地图，将视图设置为给定位置并缩放
map=L.map（‘热图’）.setView（初始坐标，初始ZoomLevel）；
L.map（'map'{
crs:L.crs.EPSG4326
});
//添加OpenStreetMap平铺层
//L.tileLayer（'https://cartodb-basemaps-{s} .global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png'{
//属性：“©；©；”，
//最大缩放：19
//}）.addTo（map）；
L.tileLayer（'https://stamen-tiles-{s} .a.ssl.fastly.net/toner lite/{z}/{x}/{y}{r}.{ext}'{
属性：“地图平铺依据，&mdash；地图数据&mdash；”，
子域：“abcd”，
最小缩放：0，
maxZoom:18，
分机：png
}).addTo（地图）；
// [[5.32, -28.95], [-33.1999, -73.9]]
var imageUrl='/images/temperatureMapDefault.png'，//temperatureMapDefault.png
imageBounds=[[5.32，-28.95]，-33.1999，-73.9]；//[ymin，xmin][ymax，xmax]]
L.imageOverlay（imageUrl，imageBounds）.addTo（map）；

边界框的坐标工作正常；问题在于预测

您的QGIS项目和输出图像使用的是EPSG:4326。传单使用EPSG:3857（球形墨卡托）进行展示。如果您尝试将拉伸的EPSG:4326图像覆盖在EPSG:3957图像上，则上边缘和下边缘将合适，但您将经历垂直移动

通过在EPSG:4326中创建一个带有国家边界的更大图像，您可以更清楚地看到这一点。我鼓励你进行实验

---

请阅读相关文档，以便将您的QGIS项目配置为使用不同的CRS。

谢谢@IvanSanchez，您再次帮助了我！

var L;

var initialCoordinates = [-14.91, -43.20];
var initialZoomLevel = 4;

// create a map in the "map" div, set the view to a given place and zoom
map = L.map('heatmap').setView(initialCoordinates, initialZoomLevel);

L.map('map', {
    crs: L.CRS.EPSG4326
});

// add an OpenStreetMap tile layer
// L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
//   attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
//   maxZoom: 19
// }).addTo(map);

L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: 'abcd',
    minZoom: 0,
    maxZoom: 18,
    ext: 'png'
}).addTo(map);

// [[5.32, -28.95], [-33.1999, -73.9]]
var imageUrl = '/images/temperatureMapDefault.png', //temperatureMapDefault.png
    imageBounds = [[5.32, -28.95], [-33.1999, -73.9]]; // [[ymin, xmin][ymax, xmax]]
L.imageOverlay(imageUrl, imageBounds).addTo(map);