好的,我找到了一个例子,正是我需要的。我无法弄清楚如何为我的图片设置它,也不确定这是否是实现我的目标的最佳方法。
预期结果:
http://maps.mixedbredie.net/leaflet/image.html
示例代码:
var map = L.map('map', {maxZoom: 17}).setView([51.495, -0.075], 14);
/* Instead of a tile layer, use a bitmap image */
var imageUrl = 'data/TM_pano.jpg';
var imageBounds = [[51.490, -0.122], [51.510, -0.028]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
L.marker([51.495, -0.075]).addTo(map)
.bindPopup("This is Table Mountain.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
map.setMaxBounds(imageBounds);
问题:
1.) 如何选择经度/纬度和图像范围?
- 例如:.setView([51.495, -0.075], 14)
- var imageBounds = [[51.490, -0.122], [51.510, -0.028]];
2.) 缩放级别为0是否应该显示整个图像?合理的限制是什么?
3.) 我可以使用实际坐标来进行这种方法吗?例如,将地下水管道映射到自定义的.jpg文件上,然后在某些经纬度上对该管道进行标记。