带有翻转坐标的传单 .png 图像映射？

编程问答 2022-08-07

问题描述

我有一个 4096x4096px .p​​ng 代表 15000x15000m。使用此代码，它将以我想要的方式完美显示，我还可以确定像素位置（0/0 左上角）：

<head>
    <link rel="stylesheet" href="scripts/leaflet.css"></script>
    <style>
    #image-map {
      width: 1024px;
      height: 1024px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
    </style>
  </head>
  <body>
    <div id="image-map"></div>

    <script src="scripts/leaflet.js"></script>
    <script>
    // Using leaflet.js to pan and zoom a big image.
    // See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html

    // create the slippy map
    var map = L.map('image-map',{
      minZoom: -1,maxZoom: 2,center: [0,0],zoom: -1,crs: L.CRS.Simple
    });

    // dimensions of the image
    var w = 4096,h = 4096,url = 'images/Bild.png';

    // calculate the edges of the image,in coordinate space
    var southWest = map.unproject([0,h],map.getMaxZoom()-1);
    var northEast = map.unproject([w,map.getMaxZoom()-1);
    var bounds = new L.LatLngBounds(southWest,northEast);

    // add the image overlay,// so that it covers the entire map
    L.imageOverlay(url,bounds).addTo(map);

    // tell leaflet that the map is exactly as big as the image
    map.setMaxBounds(bounds);
    </script>

  </body>

但我不想要像素位置，我想通过鼠标点击获得坐标（图形中间的 0 点）。限制是左上角 + 7500 / + 7500，右下角 -7500 / -7500（和 +/- 左下角，-/+ 右上角）我是初学者，我不知道如何做到这一点。这里的很多问题都有类似的问题，但我无法将它们转移到我的场景中。

感谢您的帮助

编辑：我现在已经朝着这个代码努力了。但是，这并没有考虑到覆盖的限制，显示效果不如上例。您也可以读取外面的 XY 值，导致图片不再滑回地图。坐标是可以的 - 但它们应该指向另一个方向。如何解决这个问题？我也认为我在使用 crs: L.CRS.Simple 时犯了一个错误，但是当我删除它时，图形在地图中仅显示为一条窄带。

<html>

  <head>
     <link rel="stylesheet" href="scripts/leaflet.css">
    
    <style>
    #map {
      width: 1024px;
      height: 1024px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script src="scripts/leaflet.js"></script>
<script>
    
      var map = L.map('map',{
      minZoom: -3,maxZoom: 0,zoom: -3,crs: L.CRS.Simple
    });

      url = 'images/Bild.png';

    L.imageOverlay(url,[
     [4096,-4096],[-4096,4096]
    ]).addTo(map);

    var popup = L.popup();
map.on("click",function(e) {
  popup
    .setLatLng(e.latlng)
    .setContent('<p>Lng (x): '+e.latlng.lng+'  /  Lat (y):  '+e.latlng.lat+'</p>')
    .openOn(map);
});


</script>

  </body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

boundsboundscoordinatescoordinatesimagemapleafletpanpan