Листовка geojson поиск и масштабирование

Ну, я пытаюсь объединить 2 примера для поиска в моем файле 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>';
        }

javascript leaflet geojson
person Ajudoonor    schedule 29.01.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Если я правильно понял ваш вопрос, вам просто нужно добавить:

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

person Community    schedule 29.01.2014