MapBox-gl.js में पॉलीलाइन सुविधाओं पर प्रकाश डाला

वोट
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>
14/03/2016 को 12:50
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
2

route-hoverपरत सिर्फ स्टाइल किया जा करने के लिए अलग तरह से सही जरूरत है? यहाँ एक मामूली समायोजन के साथ ऊपर अपने कोड की एक जीवित उदाहरण है: https://jsbin.com/loxoquwiye/

14/03/2016 को 14:51
का स्रोत उपयोगकर्ता

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