1

マウスオーバーすると強調表示される通りの geojson レイヤーがあります。

私の目的は、クリックイベントで個々の道路を赤く強調することです。一度にハイライト表示できるのは 1 つの通りのみであり、別のストリートがクリックされるまでハイライト表示されたままにする必要があります。

次のコードに何を追加する必要があるかについて何か考えはありますか? 

<!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/dark-v8',
    center: [37.625224, 55.744537,],
    zoom: 13
});

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




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

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

    map.addLayer({
    "id" : "street_toggle",
    "source": "streets",
    "type": "line",
    "layout": {"line-join": "round",
              "line-cap": "round"},
    "paint": {
        "line-color": "#FF0000",
        "line-opacity": 0.9,
        "line-width:": 3.5
      }
     });

    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', '']);
            }
        });
    });

    map.on('click', function(e) {
        map.featuresAt(e.point, {
            radius: 5,
            layer: ["street_toggle"]
        }, function (err, features) {
            if (!err && features.length) {
                map.setFilter('street_toggle', ['==', 'rd_name', features[0].properties.rd_name]);
            } else {
                map.setFilter('street_toggle', ['==', 'rd_name', '']);
            }
        });
    });


});


   //.addTo(map);


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

2 に答える 2

1 

<!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/dark-v8',
      center: [37.625224, 55.744537, ],
      zoom: 13
    });

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




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

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

      map.addLayer({
        "id": "street_toggle",
        "source": "streets",
        "type": "line",
        "layout": {
          "line-join": "round",
          "line-cap": "round"
        },
        "paint": {
          "line-color": "#FF0000",
          "line-opacity": 0.9,
          "line-width:": 3.5
        }
      });

      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', '']);
          }
        });
      });

      map.on('click', function(e) {
        map.featuresAt(e.point, {
          radius: 5,
          layer: ["street_toggle"]
        }, function(err, features) {
          if (!err && features.length) {
            map.setFilter('street_toggle', ['==', 'rd_name', features[0].properties.rd_name]);
          } else {
            map.setFilter('street_toggle', ['==', 'rd_name', '']);
          }
        });
      });


    });


     //.addTo(map);
  </script>
</body>

</html>

コードの実行時にコンソール出力を見ると、次のエラー メッセージが表示されます。

layers.street_toggle.paint.line-width:: unknown property "line-width:"

このエラーが原因で、street_toggleレイヤーがマップに追加されず、クリック インタラクションが機能していません。

この問題を解決するには、"line-width:"キーを次のように変更してください"line-width"(引用符内の誤ったコロンを削除してください)

于 2016-03-24T17:37:14.137 に答える
1

@Lucas の機能 At() は減価償却されたメソッドでなければなりませんか? 彼の結腸は確かにバグを投げましたが、少なくとも v0.16 では、道路セグメントを選択するのに役立たないでしょうか? queryRenderedFeatures() を使用します

注：このメソッドにオプションの半径パラメータがあればいいのにと思います-線を正確にクリックする必要があります。

    <!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.16.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.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/dark-v8',
         center: [37.625224, 55.744537,],
         zoom: 13
    });

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

    map.addLayer({
        "id": "m_streets",
        "type": "line",
        "source": "streets",
        "interactive": true,
        "layout": {},
        "paint": {
            "line-color": "red",
            // "line-opacity": 0.0,
           "line-width": 2.5
        }
    });

    map.on('click', function(e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['m_streets'] });
        if (!features.length) {
            return;
        }
        if (typeof map.getLayer('selectedRoad') !== "undefined" ){         
            map.removeLayer('selectedRoad')
            map.removeSource('selectedRoad');   
        }
        var feature = features[0];
        //I think you could add the vector tile feature to the map, but I'm more familiar with JSON
        console.log(feature.toJSON());
        map.addSource('selectedRoad', {
            "type":"geojson",
            "data": feature.toJSON()
        });
        map.addLayer({
            "id": "selectedRoad",
            "type": "line",
            "source": "selectedRoad",
            "layout": {
                "line-join": "round",
                "line-cap": "round"
            },
            "paint": {
                "line-color": "yellow",
                "line-width": 8
            }
        });
    });
    });

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

于 2016-04-04T20:50:41.307 に答える