使用循环在 Leaflet 上搜索数据

Question

有没有办法从不同层和不同 propertyName 中查找数据？我有几个具有不同属性的 GeoJSON 数据文件。目前只能搜索一个GeoJSON。

为了循环和调用数据，我正在使用此代码：

maplink_var = [source1.geojson,source2.geojson,etc]; 

var <?= $i['maplink_var']; ?> = new L.GeoJSON(<?= $i['maplink_var']; ?>, {
  style: function(feature) {
      ...
    },
  onEachFeature: function(feature, marker) {
      ...
    }
});

下面是查找数据的代码：

var searchControl = new L.Control.Search({
  layer: source1,source2,source3,
  propertyName: ['propNameSource1','propNameSource2','propNameSource3'],
  marker: false,
  moveToLocation: function(latlng, title, map) {
    var zoom = map.getBoundsZoom(latlng.layer.getBounds());
    map.setView(latlng, zoom); // access the zoom
  }
});

searchControl.on('search:locationfound', function(e) {
  e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
  if(e.layer._popup) e.layer.openPopup();
}).on('search:collapsed', function(e) {
  featuresLayer.eachLayer(function(layer) { 
    featuresLayer.resetStyle(layer);
  }); 
});

map.addControl( searchControl );

如果我在属性上给数组命名，加载时堆栈，出现 none 的数据，我会收到错误消息。

Answer 1

如 documentation layer is a L.LayerGroup. Thus you can pass multiple layers like this (source 中所述：

var searchControl = new L.Control.Search({
  layer: L.layerGroup([source1, source2, source3]),
  ...
})

至于 propertyName：所有 GeoJSON 文件的属性名称必须相同。创建 L.GeoJSON（未测试）时试试这个：

onEachFeature: function(feature, layer) {
  const p = feature.properties
  p.title = p.propNameSource1 || p.propNameSource2 || p.propNameSource3 //create new property 'title'
}

title 是 propertyName 的默认值，因此您甚至不必在创建 L.Control.Search.

时设置它

使用循环在 Leaflet 上搜索数据

Using looping for searching data on Leaflet

javascript

maps

google-maps

geojson

leaflet