Question

我的地图上有一个自定义侧边栏。侧边栏中有复选框：

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

我希望加载地图时不会预先加载任何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图层...因此您的初始化内容看起来像var schoolDistricts = L.geoJSON(....，然后在您的复选框上注意要添加的change事件或使用map.addLayer(layerToAdd)和map.removeLayer(layerToRemove)删除相应的图层。

Leaflet：在自定义侧边栏中使用Checkboxes切换GeoJSON图层

1 个答案: