我怎样才能更好地将选定国家/地区的国家/地区特定边界（来自 geoJson 文件）加载到传单地图上？

Question

目前我有一个 html select 标签，它是通过循环遍历 geoJson 文件（使用 PHP 解码）填充的。 select 选项的文本是国家名称，值是 iso_a3 代码。当一个国家被 selected 并且按钮被点击时，我想加载国家特定的边界。目前我只能通过使用 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 个国家继续....

Answer 1

您可以使用 array.filter。像下面的例子

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

我怎样才能更好地将选定国家/地区的国家/地区特定边界（来自 geoJson 文件）加载到传单地图上？

How can I better load country specific borders (from geoJson file) of a selected country onto a leaflet map?

javascript

php

ajax

jquery

leaflet