使用 Leaflet 在图像上创建叠加层答案

【问题标题】：Creating overlay on an image using Leaflet使用 Leaflet 在图像上创建叠加层
【发布时间】：2014-03-28 14:00:13
【问题描述】：

我正在尝试让 Leaflet 用于标准的非地图图像，以便我可以使用像素而不是地理纬度和经度坐标在图像上放置标记。

这是我正在尝试使用的小提琴：

http://jsfiddle.net/letsgetsilly/8Neau/4/

<div id="map" style="width: 1500px; height: 2316px"></div>

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script>

     var map = L.map('map', {
        maxZoom: 4,
        minZoom: 2,
        crs: L.CRS.Simple
     }).setView([0,50], 4);

    var southWest = map.unproject([0, 4000], map.getMaxZoom());
    var northEast = map.unproject([1500, 0], map.getMaxZoom());
    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));


    //actual image dimensions: 1500 x 2000
    var imageUrl = 'https://i.imgur.com/bXA34EQ.jpg';

    var southWestSize = map.unproject([0, 2000], map.getMaxZoom());
    var northEastSize = map.unproject([1500, 0], map.getMaxZoom());
    L.imageOverlay(imageUrl, new L.LatLngBounds(southWestSize, northEastSize)).addTo(map);

    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(map);
    }
    map.on('click', onMapClick);

    L.marker(map.unproject([800, 300])).addTo(map).bindPopup("<b>I'm a dog!</b><br />I am a popup.<br /> ").openPopup();


</script>

我在几个层面上苦苦挣扎：

我不明白如何为图片正确设置视图。传单需要什么？
我不知道如何获取图像的经纬度坐标
我不知道如何控制图像在屏幕上的位置，也不知道它的大小，以免它看起来被破坏

对于那些处于类似情况的人，我从以下来源找到了部分帮助：

Is Leaflet a good tool for non-map images?

http://omarriott.com/aux/leaflet-js-non-geographical-imagery/

http://maps.mixedbredie.net/leaflet/image.html

【问题讨论】：

嘿，让我们傻傻地，你设法得到解决方案了吗？谢谢！

标签： javascript map leaflet

【解决方案1】：

我使用一种更简单的方法来显示带有传单的大图像，然后包含一个函数来在您单击图像时显示坐标。选择兴趣点，单击，然后将坐标复制到您的代码中作为标记。

下面的代码说明了要点。我也在https://peter-thomson.com/leaflet-map-tutorial/leaflet-map-tutorial-how-to-add-markers-and-popups-to-an-image-or-diagram-displayed-using-leaflet.html写了一个教程

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Display images with icons using leaflet</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
</head>

<body>
  <h1>Display images with icons using leaflet</h1>
  <div id="image-map" style="width: 1152px; height: 864px; border: 1px solid #AAA;"></div>
  <script>
    // Using leaflet.js to pan and zoom a big image.
    var map = L.map('image-map', {
      minZoom: 1,
      maxZoom: 4,
      center: [0, 0],
      zoom: 1,
      maxBoundsViscosity: 1,
      crs: L.CRS.Simple

    });
    //zoom 4 full size image is 4608px * 3456 px
    //zoom 3 2304 * 1728
    //zoom 2 1152 * 864
    //zoom 1 576 * 432

    var image = L.imageOverlay("https://peter-thomson.com/images/Dolomites%202016%20Peter%20A/960/P1050579.JPG", [
      [0, 0],
      [432, 576]
    ]); //initial size ( at zoom 0, double size at zoom 1 )
    image.addTo(map);
    // tell leaflet that the map is exactly as big as the image
    map.setMaxBounds(new L.LatLngBounds([0, 0], [432, 576])); // prevent panning outside the image area 
    L.tileLayer('', {
      attribution: '&copy; <a href="https://peter-thomson.com">Peter Thomson 2018</a>'
    }).addTo(map);
    //note - don't change bounds after adding marker coordinates
    var popup = L.popup();

    function onMapClick(e) {
      popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
    }
    map.on('click', onMapClick);

    var DownIcon = L.Icon.extend({
      options: {

        iconSize: [40, 40], // size of the icon
        iconAnchor: [20, 40], // point of the icon which will correspond to marker's location
        popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor
      }
    });

    var downblueIcon = new DownIcon({
        iconUrl: 'https://peter-thomson.com/appdevelopmenttutorials/leaflet-map/down-blue-icon.png'
      }),
      downyellowIcon = new DownIcon({
        iconUrl: 'https://peter-thomson.com/appdevelopmenttutorials/leaflet-map/down-yellow-icon.png'
      });
    mark1 = L.marker([247.433334, 312.5], {
      icon: downyellowIcon
    }).bindPopup(L.popup({
      maxWidth: 500
    }).setContent("Duron Pass: the far point of the walk. There is a path along the ridge to the left from the top of the pass")).addTo(map);
    mark2 = L.marker([203.933334, 364.5], {
      icon: downblueIcon
    }).bindPopup(L.popup({
      maxWidth: 500
    }).setContent("We followed this path")).addTo(map);
  </script>
</body>

</html>

【讨论】：

非常感谢您发布此信息，它对我正在进行的项目帮助很大。我正在努力弄清楚如何计算坐标:)