当鼠标悬停在传单地图上时显示边缘信息？

Question

我已经（收到）一个带有传单地图的 html 页面。我想在鼠标悬停（或悬停？）时显示边缘（链接）信息。我可以通过以下命令从 html-javascript 获取数据 `Roads.toGeoJSON().features

Roads.eachLayer(function (layer) {
            layer.on({
              'mouseout': function(){
                  layer.setStyle({fillColor: colorscale(mydata.speed)})
            },
              'mouseover': layer.bindPopup(layer.feature.properties.edge_id)
          })
        });

其中 Roads 等于 geo_json_118de89d5f914e07964f4fe5889a9bb6 定义为

var geo_json_118de89d5f914e07964f4fe5889a9bb6 = L.geoJson(null, {
                smoothFactor: 1,
                onEachFeature: geo_json_118de89d5f914e07964f4fe5889a9bb6_onEachFeature,
            
                style: geo_json_118de89d5f914e07964f4fe5889a9bb6_styler,
        });

为了更好地理解这里是 html 文件的示例 https://jsfiddle.net/5ptfuqk9/

Answer 1

L.Tooltip 对这种情况很有帮助。默认情况下，它仅在鼠标悬停时显示。 Doku

geo_json_6e3c60c8b0b046c1a06eb56942730a3a.eachLayer(function (layer) {
            layer.bindTooltip("Id "+layer.feature.properties.edge_id)
        });

https://jsfiddle.net/falkedesign/7esauf9q/

当鼠标悬停在传单地图上时显示边缘信息？

Dispalying Edges information when mouseover leaflet map?

javascript

jquery

geojson

leaflet

folium