传单geojson搜索和缩放

嗯，我想结合2个例子来从我的geojson文件搜索，并选择它时，将放大该属性。传单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>'; 
     }

来源

2014-01-29 Ajudoonor

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

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

来源

2014-01-29 18:46:53

传单geojson搜索和缩放

回答

相关问题