如何在传单地图上突出显示选定的行?
问题描述
我想画一张地图,上面画了几条路线.
I want to draw a map with few routes drawn on it.
我想要一个带有数字 1,..,n 的保管箱
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.
这是我的代码:
推荐答案
weight 属性不会改变线条边框,它会改变笔画宽度(以像素为单位).您会获得 border 效果,因为您添加了两次线条.这里:
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);
这里:
geojson = L.geoJson(myLines, {
onEachFeature: onEachFeature
}).addTo(map);
当悬停多段线时,顶层的样式会发生变化,但由于您添加了两次多段线,因此仍然保留来自下层的多段线.正如 here 所述,默认笔画不透明度为 0.5(设置 <顺便说一句,code>fillOpacity
对于折线来说是多余的,用于更改 stroke-opacity opacity
属性).顶层的折线变成半透明的,这会产生边框效果的错觉.
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.
因此,您只需删除这一行 myLayer.addData(myLines);
并获得预期的结果.
So, you can just remove this line myLayer.addData(myLines);
and get the expected result.
我制作了一个 fiddle,您的示例已在其中得到纠正.
I've made a fiddle, where your example is corrected.
这篇关于如何在传单地图上突出显示选定的行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!