Question

好吧，我正在尝试将两个示例组合起来搜索我的geojson文件，选中它后会缩放该属性。

搜索（在GeoJSON中搜索）http://labs.easyblog.it/maps/leaflet-search/examples/
从此处缩放部分（不包含下拉列表）http://projects.bryanmcbride.com/leaflet/select_zoom.html

基本上第一个只是从第二个缩放。我已经能够让他们工作，但是分开。

代码（1。）

var featuresLayer = new L.GeoJSON(piirid, {
        style: function(f) {
            return {color: f.properties.color };
        }
    });

map.addLayer(featuresLayer);

var searchControl = new L.Control.Search({layer: featuresLayer, propertyName: 'L_AADRESS', circleLocation:false});

searchControl.on('search_locationfound', function(e) {


    e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});


}).on('search_collapsed', function(e) {

    featuresLayer.eachLayer(function(layer) {   //restore feature color
        featuresLayer.resetStyle(layer);
    }); 
});

map.addControl( searchControl );  //inizialize search control

代码2。

// Loop through the geojson features and extract bbox and name, then add the options to the "zoom" select (no jQuery)
        /*var select = document.getElementById("zoom");
        select.options[select.options.length] = new Option('Select a State', 'Select a State');
        for (each in geojson._layers) {
            var bbox = geojson._layers[each].getBounds()._southWest.lat + "," + geojson._layers[each].getBounds()._southWest.lng + "," + geojson._layers[each].getBounds()._northEast.lat + "," + geojson._layers[each].getBounds()._northEast.lng;
            select.options[select.options.length] = new Option(geojson._layers[each].feature.properties.name, bbox);
        }*/

        // Loop through the geojson features and extract bbox and name, then add the options to the "zoom" select and build autocomplete(using jquery) 
        var options = '<option value="Select a State">Select a State</option>';
        var states = [];
        for (each in geojson._layers) {
            var L_AADRESS = geojson._layers[each].feature.properties.L_AADRESS;
            var swLat = geojson._layers[each].getBounds()._southWest.lat;
            var swLng = geojson._layers[each].getBounds()._southWest.lng;
            var neLat = geojson._layers[each].getBounds()._northEast.lat;
            var neLng = geojson._layers[each].getBounds()._northEast.lng;
            var bbox = swLat + "," + swLng + "," + neLat + "," + neLng;

            // Populate states array and build autocomplete
            states.push({label: L_AADRESS, value: L_AADRESS, swlat: swLat, swlng: swLng, nelat: neLat, nelng: neLng});
            $( "#search" ).autocomplete({
                source: states,
                minLength: 3,
                select: function( event, ui ) {
                    map.fitBounds([[ui.item.swlat, ui.item.swlng],[ui.item.nelat, ui.item.nelng]]);
                }
            });
            // Add states & bbox values to zoom select options
            options += '<option value="' + bbox + '">' + geojson._layers[each].feature.properties.L_AADRESS + '</option>';
        }

Answer 1

如果我正确理解您的问题，您只需添加：

map.fitBounds(e.layer.getBounds());

到search_locationfound事件函数。这将设置您仍然可以看到整个图层的最大缩放级别。

因此，您的第一个示例中的search_locationfound事件函数将是：

searchControl.on('search_locationfound', function(e) {

    map.fitBounds(e.layer.getBounds());
    e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});

});

jsfiddle

Leaflet geojson搜索和缩放

1 个答案: