我有一个图像文件列表及其相应的 jgw、pgw 格式等世界文件。我如何使用世界文件获取这些图像的真实世界坐标,以便我可以在传单上的世界地图上生成它们?
我查看了传单插件,但无法确定哪些可以帮助进行世界文件转换。
我不知道加载图像的直接解决方案或插件,但我可以为您提供一个最小的示例代码:
HTML:
<div id="leafletMap" class="leafletMap"></div>
Javascript:
import * as Leaflet from 'leaflet';
leafletMap: Leaflet.Map;
getMeta = async (url) => {
const img = new Image();
img.src = url;
await img.decode();
return img
};
leafletCreatorFunction() {
//Definitions:
let pathToYourJPG = "yourPathToJPG";
let pathToYourJGW = "jourPathToJGW";
this.leafletMap = Leaflet.map('leafletMap', {/*yourOptions*/});
//Fetching Image and TextData
Promise.all([
fetch(pathToYourJGW).then(r => r.text()),
this.getMeta(pathToYourJPG)
]).then(([jgwText, img]) => {
//Calculate the Bounding Box
let splitted = jgwText.split("\n")
let widthOf1PixelInCRSUnits = Number(splitted[0])
let heightOf1PixelInCRSUnits = Number(splitted[3])
let centerXCoordinateOfUpperLeftPixel = Number(splitted[4])
let centerYCoordinateOfUpperLeftPixel = Number(splitted[5])
let westBound = centerXCoordinateOfUpperLeftPixel - (widthOf1PixelInCRSUnits / 2)
let northBound = centerYCoordinateOfUpperLeftPixel - (heightOf1PixelInCRSUnits / 2)
let eastBound = westBound + ((img.naturalWidth) * widthOf1PixelInCRSUnits)
let southBound = northBound + ((img.naturalHeight) * heightOf1PixelInCRSUnits)
let westSouthBoundCoordinatesInWSG84= Leaflet.CRS.EPSG3857.unproject(Leaflet.point(westBound, southBound)) //important: use the correct CRS here!
let eastNorthBoundCoordinatesInWSG84= Leaflet.CRS.EPSG3857.unproject(Leaflet.point(eastBound, northBound))
//add now the imageOverlay to your map:
let myJpgJgwOverlay = Leaflet.imageOverlay(pathToYourJPG,
Leaflet.latLngBounds(westSouthBoundCoordinatesInWSG84, eastNorthBoundCoordinatesInWSG84), {
opacity: 1,
alt: "TestImage",
zIndex: 10,
interactive: false
}).addTo(this.leafletMap);
console.log("i'm happy to answer you question")
});
}
用于创建这个最小示例或提供更深入探索的方法的问答: