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

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。

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

How to fit layer correctly in map using leaflet overlay?

gis

qgis

leaflet