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

Question

我想绘制一张地图上绘制的路线很少。

我想要一个带有数字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: '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 ?? }); 

Answer 1

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

myLayer.addData(myLines);

和这里：

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

当多边形悬停时，顶层的样式会更改，但由于您要添加两次折线，因此仍然会保留下层的折线。 如它被描述在这里 ，默认行程不透明度是0.5（设定fillOpacity是多余的用于由方式折线，用于改变冲程不透明度opacity属性使用）。 顶层的折线变为半透明，这就产生了边框效果的错觉。

所以，你可以删除这行myLayer.addData(myLines); 并获得预期的结果。

我做了一个小提琴 ，你的例子得到纠正。