在按钮单击时将 geojson 图层添加到地图答案

【问题标题】：add geojson layer to map on button click在按钮单击时将 geojson 图层添加到地图
【发布时间】：2021-12-28 10:31:47
【问题描述】：

我目前正在尝试实现一个项目，在该项目中，我们可以在单击外部按钮时向地图添加不同类型的 geojson 图层。我可以通过简单地将它们添加到地图上来添加这些图层。但我真的希望能够单击外部地图按钮以允许这些图层出现，而不是从一开始就将它们放在我的地图上。

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://d3js.org/d3.v6.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
        <!--ajout de jquery-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
        <div id="heading" class="heading">
            <h1 id="h1">hello to this project</h1>
        </div>

        <div id="left" class="left">
            <p style="color: blanchedalmond;">This is where we will have our selection tools</p>
            <input type=”clickbox” id=”CH” style=”font-size: larger”>Territoire Suisse<br>
            <input type=”checkbox” id=”Cantons” style=”font-size: larger” >Cantons Suisse
        </div>

        <div id="map_container" class="map_container">
            <div id="map" class="map"></div>
        </div>
        <div id="info" class="info">
            <button id="toggle-Limite_CH" onclick="load_ch()">Frontières_nationales</button>
            <button id="change-Limite_cantonales">Frontières_cantonales</button>
            <button id="change-Limite_districts">Frontières_districts</button>
            <button id="change-Limite_communales">Frontières_communales</button>
        </div>

        <script src="map.js"></script>
        <script src="canton.geojson" type="text/javascript"></script>
    </body>
</html>

还有 JS


//////////////////////////////////////////////////
////////// IMPLEMENTATION DE CARTE ///////////////
//////////////////////////////////////////////////

// Options de carte
let myMap = L.map('map', {
    
    // Gestion des parametres
    center: [46.7, 8.2],
    minZoom: 1,
    maxZoom: 18,
    zoom: 7.5,  
});

// Ajout de nos couches de base (layers)

const ESRI = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri and the GIS User Community'
})

const osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
});

const googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    tileSize: 256,
    subdomains:['mt0','mt1','mt2','mt3']
});

const googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{
    tileSize: 256,
    subdomains:['mt0','mt1','mt2','mt3']
});


// Ajout de la couche geo tile pour le load de la page
ESRI.addTo(myMap);

// Ajout du controller en haut a droite pour changer de couche
const controlLayers = L.control.layers().addTo(myMap);

// Ajout des couches de bases au controller
controlLayers.addBaseLayer(ESRI, 'ESRI');
controlLayers.addBaseLayer(osmLayer, 'OpenStreeMap');
controlLayers.addBaseLayer(googleSat, 'Satellite');
controlLayers.addBaseLayer(googleTerrain, 'Terrain');


// Ajout de l'échelle à la carte
L.control.scale({
  position: 'bottomleft'
}).addTo(myMap);


//chargement des donéées geojson à l'aide de JQuery
// <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</script>
// Limites administratives Suisses
const Suisse = $.getJSON("ch.geojson", function (data) {
    var limite_suisse = L.geoJSON(data, 
        {
            onEachFeature: function onEachFeature(feature, layer) {
                layer.bindPopup('<strong>' + feature.properties.NAME ); // On affiche le nom du canton lorsqu'on click dessus
        }
    });
        controlLayers.addOverlay(limite_suisse, 'Limite Suisse');
});

// Limites Cantonale
const Cant = $.getJSON("canton.geojson", function (data) {
    var limite_canton = L.geoJSON(data,
        {
            onEachFeature: function onEachFeature(feature, layer) {
                layer.bindPopup('<strong>' + feature.properties.NAME ); // On affiche le nom du canton lorsqu'on click dessus
        }
        });
        controlLayers.addOverlay(limite_canton, 'Limite cantonale');
});


/// HERE IS WHERE I AM STUCK WITH MY BUTTONs

const button_ch = function load_ch(){
    const Suisse = $.getJSON("ch.geojson", function (data) {
        var limite_suisse = L.geoJSON(data, 
            {
                onEachFeature: function onEachFeature(feature, layer) {
                    layer.bindPopup('<strong>' + feature.properties.NAME ); // On affiche le nom du canton lorsqu'on click dessus
            }
        }).addTo(myMap);
    });
}

如果有人可以在这里给我一点帮助，我将不胜感激，因为我很困惑--'

【问题讨论】：

标签： javascript dictionary button leaflet geojson

【解决方案1】：

我的这个项目可能会有所帮助： https://github.com/krijnsent/krijnsent.github.io/blob/master/muralsonamap/index.html（工作版本：https://krijnsent.github.io/muralsonamap/）。

基本上你需要什么：

几个函数
将数据添加到 LayerGroup
向您的按钮添加一些活动的 javascript，例如在我的文本框中：oninput="update_highlight();" （在您的情况下：onclick）
layer_group.clearLayers() 用于清理地图中的信息

【讨论】：