在Leaflet

Question

我正在制作一张地图，这是一张图片，我想在地图上分配真实的坐标，所以当我点击地图上的任何地方时，我应该得到真实的坐标。我已经完成了几乎所有事情，但我不知道如何为地图分配真实坐标。

我是Leaflet的新手。

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

// dimensions of the image
var w = 2000,
    h = 1500,
    url = 'http://kempe.net/images/image-of-a-floor.jpg';

// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], 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);

Answer 1

只是不要使用L.CRS.Simple并为Image Overlay指定“真实坐标”bounds。您可以放弃所有map.unproject内容。

L.imageOverlay(url, [
  [latCornerA, lngCornerA],
  [latCornerB, lngCornerB]
]).addTo(map);

然后其他所有内容都将使用默认的CRS，鼠标事件将生成一个带有相应坐标的event.latlng。