如何select传单上的特定路线？

Question

我想画一张地图，上面只画了几条路线。

我想要一个带有数字 1,..,n 的保管箱

当下拉框中的项目被选中时，相应的路线会在地图上高亮显示。

我已经开始使用 "leaflet"。

1) 如何用js在地图上选择特定的特征（例如线）？

我看到了如何从特征集合中进行过滤，但没有看到如何select 从地图上的所有特征中过滤（比如属性 X）

$('select[name="dropdown"]').change(function() {

  var item = $(this).val();
  alert("call the do something function on option " + item);
  //how to make the chosen line highlighted ??

});

Answer 1

我从你的那里得到的是你的路线来自 GeoJSON 文件，每个特征都有一个属性 "id"。

您可以使用 Leaflet 的 geoJson.foreach 来迭代所有功能。对于每个功能，您然后检查它是否符合您正在寻找的标准，在您的情况下，将选择选项的值与 GeoJSON 功能 ID 进行比较。

通过将 var geojson; 放在 loadMap() 函数之外，您可以使其全局可访问，并且可以在 jQuery 函数中使用。

$('select[name="dropdown"]').change(function() {
  var item = $(this).val();

  geojson.eachLayer(function (layer) {
    try {
      if(layer.feature.geometry.properties.id == item){
        highlightFeature({ "target": layer })
      } else {
        resetHighlight({ "target": layer })
      }
    } catch(e) {}
  });
});

演示：http://plnkr.co/edit/NBTLbs?p=preview

如何select传单上的特定路线？

how to select a specific route on leaflet?

javascript

maps

jquery

google-maps

leaflet