在传单中使用世界文件(jgw,pgw)

问题描述 投票:0回答:1

我有一个图像文件列表及其相应的 jgw、pgw 格式等世界文件。我如何使用世界文件获取这些图像的真实世界坐标,以便我可以在传单上的世界地图上生成它们?

我查看了传单插件,但无法确定哪些可以帮助进行世界文件转换。

leaflet gis proj
1个回答
0
投票

我不知道加载图像的直接解决方案或插件,但我可以为您提供一个最小的示例代码:

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

用于创建这个最小示例或提供更深入探索的方法的问答:

© www.soinside.com 2019 - 2024. All rights reserved.