Блог

В настоящее время у меня есть тег выбора html, который заполняется циклическим перебором файла GeoJSON (декодируется с использованием PHP). Текст опции выбора — это название страны, а значение — это код iso_a3. Когда выбрана страна и нажата кнопка, я хотел бы загрузить границы конкретной страны. В настоящее время я могу заставить это работать только вручную, используя if / else, если, например:

 var border ;

$('#btnRun').click(function() {
     let name = $('#selCountry').val();
    $.ajax({
        url: "geoJson.php",
        type: 'POST',
        dataType: 'json',
        success: function(result) {
            if (map.hasLayer(border)) {
            map.removeLayer(border);
            }
              if (name === "CAN") {
                border = L.geoJSON(result.data.border.features[1]).addTo(map);
              } else if (name === "BHS") {
                border = L.geoJSON(result.data.border.features[0]).addTo(map);
              } else if (name === "GRL") {
                border = L.geoJSON(result.data.border.features[4]).addTo(map);
              } 
          map.fitBounds(border.getBounds());
 

Я уверен, что это ужасный способ сделать это (нужно будет сделать это для 175 стран в файле). Как я могу создать какой-то цикл, который соответствовал бы значению этого параметра (код iso_a3) соответствующему массиву для загрузки правильной границы? Или другие лучшие решения?

мой html:

 <nav>   
   <h1>Choose a country:</h1>
   <select name="sel-country" id="selCountry"></select>
   <button id="btnRun" data-modal-target="#modal">Run</button>
</nav>
 

Этот код заполняет параметры:

 $.ajax({
    url: "geoJson.php",
    type: 'POST',
    dataType: "json",
    
    success: function(result) {
        console.log(result);
        
        for (var i=0; i<result.data.border.features.length; i  ) {
            $('#selCountry').append($('<option>', {
                value: result.data.border.features[i].properties.iso_a3,
                text: result.data.border.features[i].properties.name,
            }));
           }
        }
    });
 

мой php-код:

 <?php

    $executionStartTime = microtime(true) / 1000;
    
    $result = file_get_contents('countryBorders.geo.json');

    $border = json_decode($result,true);
    $countryInfo = json_decode($result,true);
    
    $output['status']['code'] = "200";
    $output['status']['name'] = "ok";
    $output['status']['description'] = "success";
    $output['status']['executedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";

    $output['data']['border'] = $border;
    $output['data']['countryInfo'] = $countryInfo;
    
    header('Content-Type: application/json; charset=UTF-8');

    echo json_encode($output);

?>
 

Это данные, которые я использую:

 {status: {…}, data: {…}}
data:
border:
features: Array(175)
[0 … 99]
0:
geometry:
coordinates: Array(3)
0: [Array(8)]
1: [Array(6)]
2: [Array(7)]
length: 3
__proto__: Array(0)
type: "MultiPolygon"
__proto__: Object
properties:
iso_a2: "BS"
iso_a3: "BHS"
iso_n3: "044"
name: "Bahamas"
__proto__: Object
type: "Feature"
__proto__: Object
1: {type: "Feature", properties: {…}, geometry: {…}}
2: {type: "Feature", properties: {…}, geometry: {…}}
3: {type: "Feature", properties: {…}, geometry: {…}}
4: {type: "Feature", properties: {…}, geometry: {…}}
5: {type: "Feature", properties: {…}, geometry: {…}}
6: {type: "Feature", properties: {…}, geometry: {…}}
 

это продолжается для 175 стран….

Вы можете использовать array.filter . Что-то вроде приведенного ниже примера

 const filterData = result.data.border.features.filter((a) => (a.properties.iso_a3 === name));
border = L.geoJSON(filterData[0]); 
map.fitBounds(border.getBounds());