使用geojson文件以编程方式添加弹出折线图像

Question

我正在使用传单绘制一系列折线。对于每个折线，我想要一个自定义弹出窗口，其中显示一个图像。我已设法为单个折线实现此功能，现在希望为一系列折线生成此功能，从json文件中读取。

    var map = L.map('map', {scrollWheelZoom:false}).setView([25.198696, 55.269794], 15);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

    var random_icon = L.icon({
            iconUrl: 'https://cdn4.iconfinder.com/data/icons/defaulticon/icons/png/256x256/media-shuffle.png',
        iconSize: [38, 95], // size of the icon
        popupAnchor: [0,-15]
        });
    var customPopup = "test image<br/><img src='http://i.imgur.com/NpZuKvK.png' alt='maptime logo gif' width='350px'/>";

    var customOptions =
        {
        'maxWidth': '500',
        'className' : 'custom'
        }

    var pointA = new L.LatLng(25.146619, 55.225746);
    var pointB = new L.LatLng(25.198696, 55.269794);
    var pointList = [pointA,pointB];

    L.polyline(pointList,{icon: random_icon,color:'red','weight':10}).bindPopup(customPopup,customOptions).addTo(map);

这会显示折线，点击该折线时会显示imgur的图像。

我现在已经创建了一个geojson文件，我已添加here。

如何加载此geojson文件b。迭代它并使用var，customPopup和url中的geojson创建以下pointList：points从geojson文件中最终呈现polyline？

Answer 1

我同意ghybs，答案在Leaflet的文档中。

首先，您需要通过Ajax请求或任何您想要的内容获取GeoJson内容。然后，只需使用L.geoJson选项。这或多或少都是你需要的（它使用JQuery）：

function genPopup(url, name){
    return name + '<br/><img src="' + url + '" alt="maptime logo gif" width="350px"/>';
}

$.get('https://gist.github.com/gac55/52ab01944be1e39e154cd2a5709de737', function (data){
    var jsondata = $.parseJSON(data);

    L.geoJson(jsondata, {
        color: 'red',
        weight: 10,
        onEachFeature: function(feature, layer){
            var furl = feature.properties.url;
            var fname = feature.properties.name;
            layer.bindPopup(
                genPopup(furl, fname),
                customOptions
            );
        }
    }).addTo(map);
});