如何在传单地图上突出显示所选行？

Question

我想画一幅画上几条路线的地图。

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

的保管箱

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

我已经开始使用＆＃34;传单＆＃34;。

如何突出显示一条线？我用过＆＃34; weight＆＃34;但它更像是一条线的边界。我希望看到这条线越来越大。

这是我的代码：

＆＃13;

＆＃13;

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 ??

});

＆＃13;

＆＃13;

＆＃13;

Answer 1

weight属性未更改线条边框，它会以像素为单位更改笔触宽度。您将获得 border 效果，因为您要添加两次行。这里：

myLayer.addData(myLines);

在这里：

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

当多边形线悬停时，顶层的样式会发生变化，但由于您要添加两次折线，因此仍然会保留下层的折线。正如描述here，默认笔划不透明度 0.5 （顺便说一下，设置fillOpacity对于折线是多余的，因为更改笔触不透明度opacity属性是用过的）。顶层的折线变为半透明，这就产生了边框效果的错觉。

因此，您可以删除此行myLayer.addData(myLines);并获得预期结果。

我做了fiddle，你的例子已经更正了。