highlighting polyline features in mapbox-gl.js

问题

I am trying to use the following code to highlight features under the mouse pointer.

The difference between my geojson data and the geojson data used in the linked example is that the example is made up of polygons whereas my geojson is made up of polylines. I have tried to modify the code accordingly in order that lines are highlighted however it does not work. My geojson is accessible here:

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

Any advice on what needs to be changed?

Example: 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>

回答1:

The route-hover layer just needs to be styled differently right? Here's a live example of your code above with a slight adjustment: https://jsbin.com/loxoquwiye/

来源：https://stackoverflow.com/questions/35990756/highlighting-polyline-features-in-mapbox-gl-js

标签

mapbox

mapbox-gl

mapbox-gl-js