如何使用传单叠加在地图中正确拟合图层？

Question

我已经实现了以下代码，我需要在地图上放置一个图层，这是我使用 QGIS 制作的。但是坐标不能正常工作，我该怎么办？问题是坐标错误还是有办法使用叠加层正确地将图层拟合到地图中？

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);

Answer 1

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

您的 QGIS 项目和输出图像正在使用 EPSG:4326。 Leaflet 使用 EPSG:3857（球形墨卡托）进行展示。如果您尝试将拉伸后的 EPSG:4326 图像覆盖在 EPSG:3957 图像上，则顶部和底部边缘将适合，但您会遇到垂直偏移。

您可以通过在 EPSG:4326 中创建带有国家边界的更大图像来更清楚地看到这一点。我鼓励你尝试一下。

请阅读https://docs.qgis.org/2.18/en/docs/user_manual/working_with_projections/working_with_projections.html 和相关文档，以便配置您的 QGIS 项目以使用不同的 CRS。