Javascript 传单geojson搜索和缩放
我尝试结合两个示例从我的geojson文件中进行搜索,选中后,它将缩放该属性 在GeoJSON one中搜索 不使用下拉菜单从此处缩放零件 基本上是第一个,只是从第二个缩放。我已经能够让它们工作了,但是是分开的 代码1Javascript 传单geojson搜索和缩放,javascript,leaflet,geojson,Javascript,Leaflet,Geojson,我尝试结合两个示例从我的geojson文件中进行搜索,选中后,它将缩放该属性 在GeoJSON one中搜索 不使用下拉菜单从此处缩放零件 基本上是第一个,只是从第二个缩放。我已经能够让它们工作了,但是是分开的 代码1 var featuresLayer = new L.GeoJSON(piirid, { style: function(f) { return {color: f.properties.color }; } });
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'});
});