Mapbox 具有弹出值和路由和的行
我是Mapbox的新手，在文档中很难找到这个答案；有这么多，一开始有点让人不知所措。我正在本地进行一些计算，并将结果上传为geojson，其中包括许多道路的路段和每个路段的编号。例如，路段A的数值为1，路段B的数值为3。我想做两件事：Mapbox 具有弹出值和路由和的行,mapbox,Mapbox,我是Mapbox的新手，在文档中很难找到这个答案；有这么多，一开始有点让人不知所措。我正在本地进行一些计算，并将结果上传为geojson，其中包括许多道路的路段和每个路段的编号。例如，路段A的数值为1，路段B的数值为3。我想做两件事： 将其设置为使这些路段具有显示值的弹出框。我目前正在加载它们，并根据这个值显示它们的颜色，但我似乎找不到一种方法来为那些显示该值的片段添加一个弹出窗口；我找到的所有弹出文档都集中在点上 创建一个选项，该选项将通过将沿途遇到的段的所有数值相加来评估导航路线。因此，如果
我在浏览器中完成所有这些，所以就我所知，并没有任何SDK是必需的，尽管我认为mapbox GL可能是必需的。我不知道从哪里开始；任何帮助都将不胜感激 这是可能的。您还可以将onClick事件侦听器替换为侦听onHover或else的事件侦听器。要使其正常工作，只需用访问令牌替换
添加GeoJSON行
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
mapboxgl.accessToken=''；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v9',
中心：[-122.486052，37.830348]，
缩放：15
});
map.on（'load'，function（）{
map.addLayer({
“id”：“路线”，
“类型”：“行”，
“来源”：{
“类型”：“geojson”，
“数据”：{
“类型”：“功能”，
“财产”：{
“姓名”：“你好，世界！”
},
“几何学”：{
“类型”：“行字符串”，
“坐标”：[
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971],
[-122.48404026031496, 37.83049717427869],
[-122.48348236083984, 37.829920943955045],
[-122.48356819152832, 37.82954808664175],
[-122.48507022857666, 37.82944639795659],
[-122.48610019683838, 37.82880236636284],
[-122.48695850372314, 37.82931081282506],
[-122.48700141906738, 37.83080223556934],
[-122.48751640319824, 37.83168351665737],
[-122.48803138732912, 37.832158048267786],
[-122.48888969421387, 37.83297152392784],
[-122.48987674713133, 37.83263257682617],
[-122.49043464660643, 37.832937629287755],
[-122.49125003814696, 37.832429207817725],
[-122.49163627624512, 37.832564787218985],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
}
},
“布局”：{
“线路连接”：“圆形”，
“线帽”：“圆形”
},
“油漆”：{
“线条颜色”：“#888”，
“线宽”：8
}
});
地图上的“点击”、“路线”功能（e）{
新建mapboxgl.Popup（）
.setLngLat（e.lngLat）
.setHTML（e.features[0].properties.name）
.addTo（地图）；
});
//当鼠标位于状态层上时，将光标更改为指针。
map.on（'mouseenter'，'route'，function（）{
map.getCanvas（）.style.cursor='pointer'；
});
//离开时将其更改回指针。
map.on（'mouseleave'，'route'，function（）{
map.getCanvas（）.style.cursor=''；
});
});