如何使用Leaflet将图像创建为地图

Question

好的，我找到了一个例子，正是我需要的。我无法弄清楚如何为我的图片设置它，也不确定这是否是实现我的目标的最佳方法。

预期结果:

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文件上，然后在某些经纬度上对该管道进行标记。

- John

Answer 1

请查看http://omarriott.com/aux/leaflet-js-non-geographical-imagery/了解第一和第二个问题。对于第三个问题，您可以进行地理参考（或变形）图像，然后将其显示在地图上，并设置透明度等属性。地理参考可以使用Qgis或类似的Mapwarper工具 https://github.com/timwaters/mapwarper 进行。 （旧问题，但我认为答案仍有用）。

- sabas