如何更好地将选定国家的特定国家边界(从geoJson文件)加载到传单地图上?

Question

目前我有一个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个国家继续如此....

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());