0

次のコードを使用して、マウス ポインターの下の機能を強調表示しようとしています。

私の 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>
4

1 に答える 1