MapBox जीएल में क्लिक के साथ सुविधा पर प्रकाश डाला

वोट
0

मैं सड़कों है कि जब moused ओवर हाइलाइट किया जाता है की एक GeoJSON परत होती है।

मेरे उद्देश्य अब अलग-अलग एक क्लिक करें घटना के साथ लाल रंग सड़कों को उजागर करना है। केवल एक सड़क एक समय में प्रकाश डाला जाना में सक्षम होना चाहिए, और जब तक एक अलग सड़क क्लिक किया जाता है पर प्रकाश डाला रहना चाहिए।

क्या करने के लिए के रूप में किसी भी विचार के लिए निम्न कोड में जोड़े जाने की जरूरत है?

<!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>
24/03/2016 को 13:34
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


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"(कोट के अंदर नकली पेट निकालने के लिए)

24/03/2016 को 15:37
का स्रोत उपयोगकर्ता

वोट
1

@Lucas सुविधाओं पर () एक घिस विधि होना चाहिए? उनके पेट के एक बग फेंक था, लेकिन यह मदद नहीं करता है उसे सही एक सड़क खंड का चयन करें, कम से कम 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>

04/04/2016 को 19:50
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more