将GeoJSON与Leaflet地图一起使用以提供国家边界

如何解决将GeoJSON与Leaflet地图一起使用以提供国家边界

有人可以帮我解决传单图问题吗？

我已经设法针对使用同一文件中对象坐标的单个国家（阿鲁巴）。当从下拉列表中选择该国家时，地图将适合边界，并且该国家周围会出现样式化的边框。我有一个包含所有国家/地区边界数据的Geojson文件，但无法应用。我一直在尝试使用AJAX，但没有任何乐趣。

对于下拉列表中的所有国家/地区，我都需要一种与Aruba相同的方法。单个JS文件的数据太多。

任何帮助将不胜感激。

我只在帖子中添加了相关文件。

// Add jQuery click event for the dropdown menu button
$(document).ready(function(){
    $("#selCountry").change(function(){
        

        // Target the second map id.
        let mymap2 = L.map('mapid-001').setView([53.5500,2.4333],6);

        // Use a new token in the boilerplate code to generate a new map for the chosen country.
        var satellite = L.tileLayer('https://api.mapbox.com/styles/v1/jed-boyle/cke2ojbj013x519oqxxyw8ni9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiamVkLWJveWxlIiwiYSI6ImNrZHJtbWljbTFmajgycXRhdmh0bGh2azMifQ.tSGyJ-aWbBQcYkovbUBNxg',{
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',maxZoom: 18,id: 'mapbox/streets-v11',tileSize: 512,zoomOffset: -1,accessToken: 'pk.eyJ1IjoiamVkLWJveWxlIiwiYSI6ImNrZHJtbWljbTFmajgycXRhdmh0bGh2azMifQ.tSGyJ-aWbBQcYkovbUBNxg'

        }).addTo(mymap2);

        let = dark = L.tileLayer('https://api.mapbox.com/styles/v1/jed-boyle/cke43l2xm0sre19lqmkzfrmvv/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiamVkLWJveWxlIiwiYSI6ImNrZHJtbWljbTFmajgycXRhdmh0bGh2azMifQ.tSGyJ-aWbBQcYkovbUBNxg',accessToken: 'pk.eyJ1IjoiamVkLWJveWxlIiwiYSI6ImNrZHJtbWljbTFmajgycXRhdmh0bGh2azMifQ.tSGyJ-aWbBQcYkovbUBNxg'
        });

        var baseMaps = {
            "satellite": satellite,"dark": dark
        };

        L.control.layers(baseMaps).addTo(mymap2);
        
        
        
        // Boundries
            
            let geoData = [{
            "type": "Feature","properties": { "ADMIN": "Aruba","ISO_A3": "ABW","ISO_A2": "AW" },"geometry": { "type": "MultiPolygon","coordinates": [ [ [ [ -69.996937628999916,12.577582098000036 ],[ -69.936390753999945,12.531724351000051 ],[ -69.924672003999945,12.519232489000046 ],[ -69.915760870999918,12.497015692000076 ],[ -69.880197719999842,12.453558661000045 ],[ -69.876820441999939,12.427394924000097 ],[ -69.888091600999928,12.417669989000046 ],[ -69.908802863999938,12.417792059000107 ],[ -69.930531378999888,12.425970770000035 ],[ -69.945139126999919,12.44037506700009 ],12.447211005000014 ],[ -69.958566860999923,12.463202216000099 ],[ -70.027658657999922,12.522935289000088 ],[ -70.048085089999887,12.531154690000079 ],[ -70.058094855999883,12.537176825000088 ],[ -70.062408006999874,12.546820380000057 ],[ -70.060373501999948,12.556952216000113 ],[ -70.051096157999893,12.574042059000064 ],[ -70.048736131999931,12.583726304000024 ],[ -70.052642381999931,12.600002346000053 ],[ -70.059641079999921,12.614243882000054 ],[ -70.061105923999975,12.625392971000068 ],12.632147528000104 ],[ -70.00715084499987,12.5855166690001 ],[ -69.996937628999916,12.577582098000036 ] ] ] ] } }
            ]

            let addedGeoJSON = L.geoJSON(geoData,{
                style : function(feature) {
                    return {
                        "color": "blue","weight": 5,"opacity": 0.65
                    }
                },onEachFeature: function(feature,layer) {
                if(feature.geometry.type==='MultiPolygon'){
                    layer.bindPopup(feature.geometry.coordinates.join(','));
                }
            }
            }).addTo(mymap2)

            mymap2.fitBounds(addedGeoJSON.getBounds(),{padding: [10,10]});





        // Add a marker.
        let marker = L.marker([lat,lng]).addTo(mymap2);

        // Add a popup with the county name and country name data.

        countryName = result['data'][0]['countryName']
        continentName = result['data'][0]['continentName']
        marker.bindPopup(capital + "<br>"+ countryName +"<br>" + continentName).openPopup();
        })

    })

#mapid-001 { 
    margin-bottom: 15px;
    height: 100vh;
    width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Simple Sidebar - Start Bootstrap Template</title>
  <!-- Description -->
  <meta name="description" content="AJAX/PHP/CURL/JSON golocation app">
  <!-- Leaflet -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
  <!-- Bootstrap core CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="libs/css/simple-sidebar.css" rel="stylesheet">
  <link href="libs/css/styles.css" rel="stylesheet">

</head>

<body>

  <div class="d-flex" id="wrapper">

    <!-- Page Content -->
    <div id="page-content-wrapper">

      <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
        <button class="btn btn-primary" id="menu-toggle">Toggle Info Menu</button>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="dropdownSection">
            <!-- <button id="fit">Fit to Kenya</button> -->
                <select id="selCountry">
                                    <option>Choose a Country</option>
                                    <option disabled>_________</option>
                                    <option value="AF">Afghanistan</option>
                                    <option value="AX">Åland Islands</option>
                                    <option value="AL">Albania</option>
                                    <option value="DZ">Algeria</option>
                                    <option value="AS">American Samoa</option>
                                    <option value="AD">Andorra</option>
                                    <option value="AO">Angola</option>
                                    <option value="AI">Anguilla</option>
                                    <option value="AG">Antigua and Barbuda</option>
                                    <option value="AR">Argentina</option>
                                    <option value="AM">Armenia</option>
                                    <option value="AW">Aruba</option>
                                    <option value="AU">Australia</option>
                                    <option value="AT">Austria</option>
                                    <option value="AZ">Azerbaijan</option>
                                    <option value="BH">Bahrain</option>
                                    <option value="BD">Bangladesh</option>
                </select>
            </li>
          </ul>
        </div>
      </nav>
  
      <div id="mapid-001"></div>
      

    </div>
    <!-- /#page-content-wrapper -->

  </div>
  <!-- /#wrapper -->

  <!-- Bootstrap core JavaScript -->
  <script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
  <script
  src="http://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
  <script src="libs/js/user-location.js"></script>
  <script src="libs/js/chosen-country.js"></script>
  <script src="libs/js/data-sections.js"></script>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
  <script src="libs/js/layers-control.js"></script>
  
  
  
  <!-- Menu Toggle Script -->
  <script>
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
  </script>

</body>

</html>