單張圖像疊加添加標記按像素座標

如何使用圖像像素座標將標記添加到單張地圖圖像疊加。單張圖像疊加添加標記按像素座標

我需要一個標誌放置，通過圖像的實際像素XY地圖通過提X，Y像素點

檢查這個小提琴鏈接瞭解更多信息座標。

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>

來源

2017-05-08 selvanathan

查看此演示 http://jsfiddle.net/1rLggm0z更多 – selvanathan

您是否閱讀過http://leafletjs.com/examples/crs-simple/crs-simple.html？ – IvanSanchez

我們可以使用傳單在地圖上放置具有實際像素x，y點的標記嗎？ – selvanathan

答案是肯定的。你的地圖中心錯了。軸原點位於左上角。

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

檢查that fiddle和that other one。

來源

2017-05-09 12:59:58

非常感謝你..它的工作原理... :) – selvanathan

它在響應式設計中無法按預期工作。你可以檢查[這裏]（http://jsfiddle.net/4whzLbve/）。 – selvanathan

單張圖像疊加添加標記按像素座標

回答

相關問題