传单geojson搜索和缩放

脑供体

嗯,我想结合两个例子从我GeoJSON的文件进行搜索,并选中时会放大该属性。

  1. 搜索(在GeoJSON中搜索)http://labs.easyblog.it/maps/leaflet-search/examples/

  2. 从此处放大部分(无下拉菜单)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>';
        }           
用户名

如果我正确理解了您的问题,则只需添加:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章