如何使用Leaflet从图像中创建地图

时间:2013-09-26 00:54:09

标签: javascript openstreetmap leaflet

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

预期结果:

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?然后我可以在管道上放置标记一定长/拉。

1 个答案:

答案 0 :(得分:1)

有关问题1和2,请参阅http://omarriott.com/aux/leaflet-js-non-geographical-imagery/ 对于第三个,您可以对图像进行地理配准(或扭曲),然后将其显示在地图上,例如设置透明度。 可以使用Qgis或Mapwarper https://github.com/timwaters/mapwarper

等工具完成地理配准

(老问题,但我认为答案可能有用)