如何突出传单上的选定行？ [英] how to highlight a chosen line on a leaflet map?

问题描述

我想要一个带有数字1，..，n的收存箱

当选择了收存箱中的项目时，相应的路线在地图上突出显示。

我已开始使用传单。

如何突出显示一行？我使用重量，但它更多的边界线。

这里是我的代码：

  document.onload = loadMap ; function loadMap（）{var map = L.map（'map'）。setView（[37.8，-96]，4）; L.tileLayer（'https://api.tiles.mapbox.com/v4/ {id} / {z} / {x} / {y} .png？access_token = {accessToken}'，{attribution：'地图资料& copy;< a href =http://openstreetmap.org> OpenStreetMap< / a>贡献者，< a href =http://creativecommons.org/licenses/by-sa/2.0/ > CC-BY-SA< / a>，Imagery©< a href =http://mapbox.com> Mapbox< / a>'，maxZoom：18，id：'mapbox.streets'，accessToken ：'pk.eyJ1IjoiZW ====== V6ZTdlb2V5cyJ9.3HqHQ4BMRvSPaYe8ToA7YQ'}）。addTo（map）; var marker = L.marker（[51.5，-0.09]）。addTo（map）; var myLines = [{type：LineString，properties：{id：1}coordinates：[[-100,40]，[-105，45]，[-110，55 ]]}，{type：LineString，properties：{id：2}coordinates：[[-105，40]，[-110，45]，[-115，55 ]]}]; var myLayer = L.geoJson（）。addTo（map）; myLayer.addData（myLines） geojson = L.geoJson（myLines，{onEachFeature：onEachFeature}）。addTo（map）;} function highlightFeature（e）{var layer = e.target; layer layer.setStyle（{weight：25，color：'＃ff3300'，dashArray：''，fillOpacity：0.7}）; if（！L.Browser.ie&&！L.Browser.opera）{layer.bringToFront（）; }} function resetHighlight（e）{geojson.resetStyle（e.target）; layer.setStyle（{weight：5，color：'＃0000ff'，dashArray：''，fillOpacity：0.7}）;} function onEachFeature（feature，layer）{layer.on（{mouseover：highlightFeature，mouseout：resetHighlight， / click：zoomToFeature}）;} $（'select [name =dropdown]'）。change（function（）{var item = $（this）.val（）; alert + item）; //如何使所选行突出显示}）;  

<属性未更改线边框，它会更改笔触宽度（以像素为单位）。

weight 您会得到 border 效果，因为您要添加行两次。这里：

  myLayer.addData（myLines）; 
  

此处：

  geojson = L.geoJson（myLines，{
 onEachFeature：onEachFeature 
}）addTo（map）; 
 

当多边形悬停时，顶层的样式被更改，但因为您要添加折线两次仍然保留来自下层的折线。正如此处所述，默认行程不透明度为 0.5 （设置为 fillOpacity 对于折线是多余的，用于更改stroke-opacity opacity 属性）。来自顶层的折线变成半透明的，这使得边界效应的错觉。

因此，您可以删除此行 myLayer.addData（myLines）; ，并获得预期结果。 / p>

我做了一个小提琴，其中您的示例已更正。

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".

how do I highlight a line? I have used "weight" but it's more a border to a line. I would like to see the line is getting bolder.

here is my code:

document.onload = loadMap();

function loadMap() {
  var map = L.map('map').setView([37.8, -96], 4);


  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZW======V6ZTdlb2V5cyJ9.3HqHQ4BMRvSPaYe8ToA7YQ'
  }).addTo(map);


  var marker = L.marker([51.5, -0.09]).addTo(map);


  var myLines = [{
    "type": "LineString",
    "properties": {
      "id": "1"
    }
    "coordinates": [
      [-100, 40],
      [-105, 45],
      [-110, 55]
    ]
  }, {
    "type": "LineString",
    "properties": {
      "id": "2"
    }
    "coordinates": [
      [-105, 40],
      [-110, 45],
      [-115, 55]
    ]
  }];

  var myLayer = L.geoJson().addTo(map);
  myLayer.addData(myLines);


  geojson = L.geoJson(myLines, {
    onEachFeature: onEachFeature
  }).addTo(map);

}



function highlightFeature(e) {
  var layer = e.target;

  layer

  layer.setStyle({
    weight: 25,
    color: '#ff3300',
    dashArray: '',
    fillOpacity: 0.7
  });

  if (!L.Browser.ie && !L.Browser.opera) {
    layer.bringToFront();
  }
}

function resetHighlight(e) {
  geojson.resetStyle(e.target);


  layer.setStyle({
    weight: 5,
    color: '#0000ff',
    dashArray: '',
    fillOpacity: 0.7
  });
}


function onEachFeature(feature, layer) {
  layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight,
    // click: zoomToFeature
  });
}

$('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 ??

});

解决方案

weight property is not changing line border, it changes stroke width in pixels. You get border effect because you are adding lines twice. Here:

myLayer.addData(myLines);

And here:

geojson = L.geoJson(myLines, {
    onEachFeature: onEachFeature
  }).addTo(map);

When a polyline is hovered, top layer's style is changed, but because you are adding polylines twice, there still remains a polyline from the lower layer. As it is described here, default stroke opacity is 0.5 (setting fillOpacity is redundant for the polyline by the way, for changing stroke-opacity opacity property is used). Polyline from the top layer becomes semi-transparent, and that makes the illusion of the border effect.

So, you can just remove this line myLayer.addData(myLines); and get the expected result.

I've made a fiddle, where your example is corrected.

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