リーフレットイメージオーバーレイマーカーをピクセル座標で追加

Question

イメージピクセル座標を使用してリーフレットマップイメージオーバーレイにマーカーを追加する方法。

は、私は、x、yの画素点

チェック詳細はこのフィドルのリンクを言及することにより、画像座標の実際のピクセルxyをマップにマーカーを配置する必要があります。

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>

Answer 1

答えはイエスです。あなたのマップセンターは間違っていました。軸の原点は左上隅にあります。

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

チェックthat fiddleとthat other oneを確認します。