在 mapbox 中突出显示折线特征-gl.js

Question

我正在尝试使用以下代码突出显示鼠标指针下的功能。

我的 geojson 数据与链接示例中使用的 geojson 数据之间的区别在于，该示例由多边形组成，而我的 geojson 由折线组成。我试图相应地修改代码，以便突出显示行，但它不起作用。我的 geojson 可以在这里访问：

http://iskandarblue.github.io/mapbox/data/prototype2.geojson

有什么需要更改的建议吗？

示例： https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet'/>
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v8',
    center: [37.625224, 55.744537,],
    zoom: 13
});

    map.on('style.load', function () {
        map.addSource("streets", {
            "type": "geojson",
            "data": "http://iskandarblue.github.io/mapbox/data/prototype2.geojson"
        });

        map.addLayer({
            "id": "m_streets",
            "type": "line",
            "source": "streets",
            "interactive": true,
            "layout": {},
            "paint": {
                "line-color": "#627BC1",
                "line-width": 2.5
            }
        });

        map.addLayer({
            "id": "route-hover",
            "type": "line",
            "source": "streets",
            "layout": {},
            "paint": {
                "line-color": "#627BC1",
                "line-width": 2.5
            },
            "filter": ["==", "rd_name", ""]
        });

        // When the user moves their mouse over the page, we look for features
        // at the mouse position (e.point) and within the states layer (states-fill).
        // If a feature is found, then we'll update the filter in the route-hover
        // layer to only show that state, thus making a hover effect.
        map.on("mousemove", function(e) {
            map.featuresAt(e.point, {
                radius: 5,
                layer: ["m_streets"]
            }, function (err, features) {
                if (!err && features.length) {
                    map.setFilter("route-hover", ["==", "rd_name", features[0].properties.rd_name]);
                } else {
                    map.setFilter("route-hover", ["==", "rd_name", ""]);
                }
            });
        });
    });



   //.addTo(map);


</script>
</body>
</html>

Answer 1

route-hover 层只需要设置不同的样式，对吗？这是上面代码的一个实际示例，稍作调整：https://jsbin.com/loxoquwiye/

在 mapbox 中突出显示折线特征-gl.js

highlighting polyline features in mapbox-gl.js

mapbox

mapbox-gl

mapbox-gl-js