如何选择传单上的特定路线？ [英] how to select a specific route on leaflet?

问题描述

我想要一个有数字1，..，n

的Dropbox b
$ b

当选择保存箱中的物品时，相应的路线将在地图上高亮显示。

我已经开始使用传单。

1）如何选择js地图上的特定功能（例如行）？

我看到了如何从功能集合中筛选，但不知道如何从地图上的所有功能中选择属性X）

  $（'select [name =dropdown]'）。change（function（）{
 
 var item = $（this）.val（）; 
 alert（call the do something function on option+ item）; 
 //如何使选中的行突出显示？ ？
 
}）; 
  

解决方案

我从其他问题是，你的路线来自GeoJSON文件，每个功能都有一个属性ID。

您可以使用Leaflet的 geoJson.foreach 来迭代所有的功能。随着每个功能，你检查它是否符合你正在寻找的标准，在你的案例比较选择选项的价值GeoJSON功能ID。

通过将 var geojson; 在 loadMap（）函数之外，您可以在全局访问它，并且可以在jQuery函数中使用它。 / p>

  $（'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

I want to draw a map with few routes drawn on it.

I want to have a dropbox with numbers 1,..,n

when an item in the dropbox is chosen, the corresponding route is highlighted on the map.

I have started using "leaflet".

1) how do i choose with js a specific feature (e.g. line) on map?

I saw how to filter from a features collection, but not how to select from all features on the map (say by property 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 ??

});

解决方案

What I got from your other question is that your routes are coming from a GeoJSON file and each feature has a property "id".

You can use Leaflet's geoJson.foreach to iterate over all features. With each feature you then check if it matches the criteria you are looking for, in your case compare the selection option's value to the GeoJSON feature id.

By putting var geojson; outside of the loadMap() function you are making it globally accessible and it can be used in the jQuery function.

$('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) {}
  });
});

Demo: http://plnkr.co/edit/NBTLbs?p=preview

这篇关于如何选择传单上的特定路线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！