单张图像叠加按像素坐标添加标记 [英] Leaflet Image Overlay Add Marker By pixel coordinates

问题描述

如何通过使用图像像素坐标向传单地图图像叠加层添加标记.

How to add an marker to leaflet map image overlay by using the image pixel coordinates.

我需要通过提及x，y像素点，通过图像的实际像素xy坐标将标记放入地图中

I need to place an marker into map by the image's actual pixel xy coordinates by mentioning the x,y pixel points

检查此Fiddle链接以获取更多信息.

Check this Fiddle link for more info.

var osmUrl = 'path/to/custom/image',
  h = 709,
  w = 709;

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

var southWest = map.unproject([0, h], map.getMaxZoom());
var northEast = map.unproject([w, 0], map.getMaxZoom());
var bounds = new L.LatLngBounds(southWest, northEast);

L.imageOverlay(osmUrl, bounds).addTo(map);
map.setMaxBounds(bounds);
// var markerData = [[0,0],[185,362],[277,593],[307,354],[472,472],[473,568],[550,516],[535,370],[230,119]];


var marker = L.marker(map.layerPointToLatLng(map.containerPointToLayerPoint([185, 362])));
marker.addTo(map);

<div id="mapid" style="width:500px;height:400px;></div>

推荐答案

答案是肯定的.您的地图中心错了.轴原点在左上角.

The answer is yes. Your map center was wrong. The axis origin is at the top-left corner.

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

检查那个小提琴和 查看全文