Функция Ajax для сбора geoJSON FeatureCollection и последующего вывода всплывающих окон на слой карты листка

Question

Я пытаюсь создать функцию ajax, в которой я использую форму для передачи значения bbox скрипту PHP, который затем использует параметры bbox для вывода FeatureCollection вернуться к обратному вызову ajax.

Из этого я использую JSON.parse(), а затем пытаюсь отобразить часть описания каждой функции как всплывающее окно над соответствующей точкой.

Я потратил бесчисленные часы, пытаясь выяснить, что происходит в моем коде, но я просто не могу понять, как это работает.

Вот мой HTML для формы:

<select name="bbox" id="bbox" onchange="ajaxrequest()"> 
    <option name="Select" value="Select">Please Select</option> 
    <option name="Hampshire" value="-1.40,50,-1.39,51&format=geojson">Hampshire</option> 
</select> 

Вот моя функция AJAX:

function ajaxrequest() 
{ 
    var bbox = document.getElementById("bbox").value; 
    //alert(bbox); 
    var request = new Ajax().sendRequest 
     ('points.php', 
      { method: 'GET', 
       parameters: 'bbox=' + bbox, 
       callback: resultsReturned } 
     ); 
} 

А вот AJAX обратного вызова, который содержит коллекцию особенность GeoJSON в тексте ответа:

function resultsReturned (xmlHTTP) 
{ 
    //alert(xmlHTTP.responseText); 
    var geojson = JSON.parse(xmlHTTP.responseText); 

    for(var i=0; i<geojson.features.length; i++) 
    { 
     var layer = new L.geojson(); 
     layer.addData(geojson.features[i]); 
    } 
} 

Был бы очень признателен, если бы кто-то мог наполнить меня тем, как закончить потому что это убивает меня.

Заранее спасибо.

Answer 1

Я думаю, что вы ищете это то:

function resultsReturned (xmlHTTP) 
{ 
    var features = JSON.parse(xmlHTTP.responseText); 
    L.geoJson(features).addTo(map); 
} 

(см http://leafletjs.com/examples/geojson.html)

Если вы хотите связать всплывающее окно для каждой функции:

function resultsReturned (xmlHTTP) 
{ 
    var features = JSON.parse(xmlHTTP.responseText); 
    L.geoJson(features, 
     { onEachFeature: 
       function(feature,layer) { 
        layer.bindPopup(feature.properties.description); 
       } 
     }).addTo(map); 
} 

Answer 2

решенный Я добавил этот код к моей функции init. Обратите внимание на «нуль», так как это необходимо, чтобы обратный вызов AJAX мог заполнить его.

layer = new L.GeoJSON(null, 
    { onEachFeature: function(feature,layer) 
     { 
      layer.bindPopup(feature.properties.description); 
     } 
    }).addTo(map); 

Моя начальная функция AJAX вызова такой же, как писал выше, и ответ AJAX был немного изменен следующим образом:

function resultsReturned (xmlHTTP) 
{ 
    //alert(xmlHTTP.responseText); 
    var features = JSON.parse(xmlHTTP.responseText); 

    for(var i=0; i<features.features.length; i++) 
    { 
     layer.addData(features.features[i]); 
    } 

} 

Спасибо за помощь @flup помог мне понять то, как кодирование работает