साथ MapBox-जीएल-js कस्टम HTML मार्कर क्लस्टरिंग

वोट
5

मैं MapBox-जीएल-js एपीआई का उपयोग कर रहा हूँ और मैं इसे उपयोग कर रहा हूँ इस प्रकार कुछ कस्टम मार्कर बनाने के लिए प्रतिक्रिया के साथ:

        let div = document.createElement('div');
        let marker = new mapboxgl.Marker(div, {
            offset: [ -20, 80 ]
        });

        marker.setLngLat(person.geometry.coordinates);

        render(
            <MapPersonIcon />,
            div,
            () => {
                marker.addTo(map);
            }
        );

परिणाम

यह महान काम किया। हालांकि मैं अब परतों के साथ पाया कार्यक्षमता यानी के रूप में ही प्रभावित कर उत्पादन, इन मार्कर क्लस्टर चाहते हैं

https://www.mapbox.com/mapbox-gl-js/example/cluster/

समूहों

किसी को पता है कि क्या यह (भी कस्टम समूहों के साथ उम्मीद है कि) संभव है या क्या यह आने वाली रिलीज़ में उपलब्ध हो जाएगा?

17/08/2016 को 15:32
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
1

उत्तर देना ही सवाल:

वर्तमान में ऐसा लगता है कि इस MapBox के GitHub के अनुसार संभव नहीं है: यहाँ छवि विवरण दर्ज

आप MapBox की मूल माकी चिह्न का उपयोग करने की आवश्यकता होगी आप अपने मार्कर क्लस्टर करना चाहते हैं (कृपया उदाहरण चित्र और यूआरएल ऊपर देखें) जब तक एक प्लगइन अपने कस्टम HTML मार्करों के लिए उपलब्ध है।

22/08/2016 को 08:56
का स्रोत उपयोगकर्ता

वोट
0

यह सुविधा MapBox जीएल js में है - https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/

चाबी छीन लेना:

जब का उपयोग कर अपने डेटा स्रोत की स्थापना map.addSource, जो आपके द्वारा निर्धारित सुनिश्चित करें cluster: trueऔर clusterRadius: intइसलिए की तरह,:

        map.addSource( 'sourceName', {
            type: "geojson",
            data: {
                type: 'FeatureCollection',
                features: [JSON]
            },
            cluster: true,
            clusterRadius: 80,
        });

यही कारण है कि अपने माउस का समूह बनाने MapBox धक्का होगा, लेकिन आप MapBox बताने के लिए जब यह उन प्रतीक समूहों क्या करने की जरूरत:

map.on( 'moveend', updateMarkers ); // moveend also considers zoomend

व्यापार (प्रासंगिकता के लिए कांट छांट):

function updateMarkers(){
    var features = map.querySourceFeatures( 'sourceName' );

    for ( var i = 0; i < features.length; i++ ) {
        var coords = features[ i ].geometry.coordinates;
        var props = features[ i ].properties;

        if ( props.cluster ){ // this property is only present when the feature is clustered
            // generate your clustered icon using props.point_count
            var el = document.createElement( 'div' );
            el.classList.add( 'mapCluster' );
            el.innerText = props.point_count;
            marker = new mapboxgl.Marker( { element: el } ).setLngLat( coords );

        } else { // feature is not clustered, create an icon for it
            var el = new Image();
            el.src = 'icon.png';
            el.classList.add( 'mapMarker' );
            el.dataset.type = props.type; // you can use custom data if you have assigned it in the GeoJSON data
            marker = new mapboxgl.Marker( { element: el } ).setLngLat( coords );
        }

        marker.addTo( map );
    }

ध्यान दें: इस कोड को कॉपी न करें, बल्कि साथ संयोजन के रूप में इसका इस्तेमाल करते हैं https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/ पूरी तस्वीर प्राप्त करने के लिए। उम्मीद है की यह मदद करेगा!

25/04/2019 को 05:04
का स्रोत उपयोगकर्ता

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