1

I converted the GeoTIFF file to a tiles map. I'd like to display it in react-leaflet, but the size and position are not right.

What can I do to fix it?

This is condition when displayed. (overlaid on OpenStreetMap whose position is correct) enter image description here

If working properly, it should be located in about 100-meter square a place in Japan.

This is my TileLayer component for displaying my tiles map.

<TileLayer
    url="http://localhost:3333/assets/tms/{z}/{x}/{y}.png"
    noWrap="true"
    tms="true"
/>

Here is my gdalinfo from my GeoTiff file.

Driver: GTiff/GeoTIFF
Files: GeoTiff.tif
Size is 9105, 5977
Coordinate System is:
GEOGCS["WGS 84",
    DATUM["WGS_1984",
        SPHEROID["WGS 84",6378137,298.257223563,
            AUTHORITY["EPSG","7030"]],
        AUTHORITY["EPSG","6326"]],
    PRIMEM["Greenwich",0],
    UNIT["degree",0.0174532925199433],
    AUTHORITY["EPSG","4326"]]
Origin = (138.638412499999987,35.633808000000002)
Pixel Size = (0.000000210840198,-0.000000163275891)
Metadata:
  AREA_OR_POINT=Area
  TIFFTAG_SOFTWARE=pix4dmapper
Image Structure Metadata:
  INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left  ( 138.6384125,  35.6338080) (138d38'18.28"E, 35d38' 1.71"N)
Lower Left  ( 138.6384125,  35.6328321) (138d38'18.28"E, 35d37'58.20"N)
Upper Right ( 138.6403322,  35.6338080) (138d38'25.20"E, 35d38' 1.71"N)
Lower Right ( 138.6403322,  35.6328321) (138d38'25.20"E, 35d37'58.20"N)
Center      ( 138.6393723,  35.6333201) (138d38'21.74"E, 35d37'59.95"N)
Band 1 Block=9105x1 Type=Byte, ColorInterp=Red
  NoData Value=-10000
  Mask Flags: PER_DATASET ALPHA 
Band 2 Block=9105x1 Type=Byte, ColorInterp=Green
  NoData Value=-10000
  Mask Flags: PER_DATASET ALPHA 
Band 3 Block=9105x1 Type=Byte, ColorInterp=Blue
  NoData Value=-10000
  Mask Flags: PER_DATASET ALPHA 
Band 4 Block=9105x1 Type=Byte, ColorInterp=Alpha
  NoData Value=-10000

Here is my tilemapresource.xml from my TileMapService.

<?xml version="1.0" encoding="utf-8"?>
    <TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
      <Title>GeoTiff.tif</Title>
      <Abstract></Abstract>
      <SRS>EPSG:4326</SRS>
      <BoundingBox minx="138.63841249999999" miny="35.63254780813838" maxx="138.64033219999999" maxy="35.63380800000000"/>
      <Origin x="138.63841249999999" y="35.63254780813838"/>
      <TileFormat width="256" height="256" mime-type="image/png" extension="png"/>
      <TileSets profile="raster">
        <TileSet href="0" units-per-pixel="0.00001349377265" order="0"/>
        <TileSet href="1" units-per-pixel="0.00000674688633" order="1"/>
        <TileSet href="2" units-per-pixel="0.00000337344316" order="2"/>
        <TileSet href="3" units-per-pixel="0.00000168672158" order="3"/>
        <TileSet href="4" units-per-pixel="0.00000084336079" order="4"/>
        <TileSet href="5" units-per-pixel="0.00000042168040" order="5"/>
        <TileSet href="6" units-per-pixel="0.00000021084020" order="6"/>
      </TileSets>
    </TileMap>

I tried too epsg:3857, the same CRS as OSM, but it didn't change.

Improve this question

1 Answer 1

Reset to default
1

you'd better use

L.imageOverlay(imageUrl, imageBounds).addTo(map);

see example in: https://jsfiddle.net/user2314737/Lfzrqvet/

Improve this answer
1
  • Thanks for answer @hamed. Your example is helpful, but it's a bit different from what I'm trying to achieve. Instead of displaying the GeoTiff file as is on the map, I need to display it by TMS like this.
    – satsuki
    Jun 22, 2020 at 1:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.