Can’t show the Orthophoto TMS layer {x} and {y} files on leaflet

ODM
1

ODM output orthophoto tiles file, URL: http://www.ciaowin35.com/orthophoto_tiles/{z}/{x}/{y}.png

xml URL:odm_orthophoto.tif

{z} is displayed as the correct folder through leaflet, but {x} and {y} open the wrong folder (folder number is incorrect).

I received 404 page not found. Can someone help me?

Thank
right

<!DOCTYPE html>
<html>
  <head>
    <title>Orthophoto Tiles Example</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
    <style>
      #map {
        width: 100%;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.map('map').setView([23.357184352842168, 120.69514493688749], 22);
      L.tileLayer('http://www.ciaowin35.com/orthophoto_tiles/{z}/{x}/{y}.png', {
	     tms: true,

	  ttribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	   
      }).addTo(map);
    </script>
  </body>
</html>

xy_error
xy_error1905×635 202 KB

1 Like
2

Welcome!

Did you generate the tiles and XML via the --tiles flag? It should just work.

3

Thanks for your help

Yes, I generated an orthophoto and selected the output tiles format. But it cannot be displayed correctly in leaflet.
This troubled me for a long time

1 Like
4

Are you able to share your tilesets and code so folks can take a look?

5

tiles URL (my server): http://www.ciaowin35.com/orthophoto_tiles/{z}/{x}/{y}.png

tiles file (google drive) link: orthophoto_tiles - Google Drive

My leaflet code shown

<!DOCTYPE html>
<html>
  <head>
    <title>Orthophoto Tiles Example</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
    <style>
      #map {
        width: 100%;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.map('map').setView([23.357184352842168, 120.69514493688749], 22);
      L.tileLayer('http://www.ciaowin35.com/orthophoto_tiles/{z}/{x}/{y}.png', {
	     tms: true,

	  ttribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	   
      }).addTo(map);
    </script>
  </body>
</html>```


Thanks
1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.