传单：在自定义侧边栏中使用复选框切换 GeoJSON 图层

Question

我的地图顶部有一个自定义边栏。侧边栏内有复选框：

<label><input type="checkbox" name="points" value="addressPoints" /> COUNTY</label>

我希望地图加载时预加载了 none 个 GeoJSON 图层，并希望能够通过单击复选框打开图层。

下面是我正在使用的Javascript：

//Create Variable called 'map' and Set Options
var map = L.map('map', {
    center: [35.132703, -92.347412], //Faulkner County
    zoom: 11,
    minZoom: 8, 
    maxZoom: 18,
    keyboard: true,
    zoomControl: false,
}); 

//Add Base Map Tile Layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); //ROADMAP
//L.tileLayer('http://{s}.tiles.mapbox.com/v3/moklick.lh736gg3/{z}/{x}/{y}.png').addTo(map); //SATELLITE
//L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png').addTo(map); //TERRAIN
//L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png').addTo(map); //HEATMAP



//Create Variable for Default Polygon Style
var defaultStyle = {
    color: "#3498db",
    weight: 2,
    opacity: 1,
    fillOpacity: 0.4,
    fillColor: "#3498db"
};

//Create Variable for Highlighted Polygon Style on Mouseover
var highlightStyle = {
    color: "#e74c3c",
    weight: 3,
    opacity: 1,
    fillOpacity: 0.3,
    fillColor: "#e74c3c"
};

var onEachFeature = function(feature, layer){
    layer.bindPopup("<h4>Voting Precinct:</h4>" + feature.properties.NAME10),
    layer.setStyle(defaultStyle);
    (function(layer, properties) {
        layer.on("mouseover", function (e) {
            layer.setStyle(highlightStyle);
        });
        layer.on("mouseout", function (e) {
            layer.setStyle(defaultStyle);
        });
    })(layer, feature.properties.NAME10);
};

/*//Add GeoJSON for County Outline
L.geoJson(faulknerCounty, {
    style: defaultStyle,
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.popupContent);
        layer.setStyle(defaultStyle);
    (function(layer, properties) {
        layer.on("mouseover", function (e) {
            layer.setStyle(highlightStyle);
        });
        layer.on("mouseout", function (e) {
            layer.setStyle(defaultStyle);
        });
    })(layer, feature.properties.NAME10);
}
}).addTo(map);*/

/*//Add GeoJSON for Voting Precincts
L.geoJson(votingPrecincts, {
    style: defaultStyle,
    onEachFeature: onEachFeature
}).addTo(map);*/

//Add GeoJSON for JP Districts
L.geoJson(jpDistricts, {
    style: defaultStyle,
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h4>Justice of the Peace District: " + feature.properties.district);
        layer.setStyle(defaultStyle);
    (function(layer, properties) {
        layer.on("mouseover", function (e) {
            layer.setStyle(highlightStyle);
        });
        layer.on("mouseout", function (e) {
            layer.setStyle(defaultStyle);
        });
    })(layer, feature.properties.district);
}
}).addTo(map)

/*//Add GeoJSON for School Districts
L.geoJson(schoolDistricts, {
    style: defaultStyle,
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h4>School District: " + feature.properties.name);
        layer.setStyle(defaultStyle);
    (function(layer, properties) {
        layer.on("mouseover", function (e) {
            layer.setStyle(highlightStyle);
        });
        layer.on("mouseout", function (e) {
            layer.setStyle(defaultStyle);
        });
    })(layer, feature.properties.name);
}
}).addTo(map);*/

new L.Control.GeoSearch({
    provider: new L.GeoSearch.Provider.Google(),
    position: 'topright',
    showMarker: false,
    retainZoomLevel: false,
}).addTo(map);

Answer 1

创建（但不要 .addTo(map)）每个你需要的 geoJSON 层...所以你的 init 看起来像 var schoolDistricts = L.geoJSON(....，然后观察你的复选框上的 change 事件使用 map.addLayer(layerToAdd) 和 map.removeLayer(layerToRemove) 添加或删除适当的图层。

传单：在自定义侧边栏中使用复选框切换 GeoJSON 图层

Leaflet: Toggle GeoJSON layers with Checkboxes in custom sidebar

toggle

geojson

leaflet