单张图像叠加添加标记按像素坐标

如何使用图像像素坐标将标记添加到单张地图图像叠加。单张图像叠加添加标记按像素坐标

我需要一个标志放置，通过图像的实际像素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

单张图像叠加添加标记按像素坐标

回答

相关问题