माउसओवर घटना MapBox के साथ काम करने के लिए नहीं कर पा रहे

वोट
2

मैं पता लगाना क्यों मुसीबत का एक सा हो रही mouseoverघटना MapBox जीएल साथ काम नहीं करता।

map.on('load', function() {
  var geoJson = '{
    type: FeatureCollection,
    crs: {
        type: name,
        properties: {
            name: urn:ogc:def:crs:OGC:1.3:CRS84
        }
    },
    features: [
    {
        type: Feature,
        properties: {
            ...
        },
        geometry: {
            type: Point,
            coordinates: [
                -118.6059,
                34.1829
            ]
        }
    }]
  }';


  map.addSource('someData', {
    type: 'geojson',
    data: geoJson,
    cluster: true,
    clusterMaxZoom: 14
  });

  map.addLayer({
    'id': 'unclustered-markers',
    'type': 'symbol',
    'source': 'someData',
    'layout': {
        'icon-image': 'circle-11'
    }
  });
});

तो वह हिस्सा काम करता है और निर्देशांक क्लस्टर के भीतर नक्शे पर प्रदर्शित कर रहे हैं। हालांकि, जब मैं कोशिश mouseoverघटना, कुछ नहीं होता।

map.on('mouseover',function(e) {
    console.log(e);                 // nothing is logged when I hover over the map or the points
    var features = map.queryRenderedFeatures(e.point, { layers: ['unclustered-markers'] });
    ...
});

अगर मैं उस घटना को बदलने के लिए clickतो घटना कंसोल के लिए लॉग होता है जब मैं मानचित्र पर क्लिक करें।

18/09/2016 को 21:50
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


3 जवाब

वोट
0

ऐसा नहीं है कि आप गलत घटना नाम का उपयोग कर रहे हैं। ध्यान दें कि यह है mousemove, नहीं mouseover। इसे ठीक करने के लिए अपने कोड बदलने के लिए:

map.on('mousemove',function(e) {
    console.log(e);                 
    //....
});

: यहाँ एक काम उदाहरण है https://jsfiddle.net/kmandov/o870ufLr/ सांत्वना घटनाओं को देखने के लिए खोलें।

19/09/2016 को 12:08
का स्रोत उपयोगकर्ता

वोट
0

जीएल जे एस आग नहीं करता mouseoverफायरिंग के बावजूद घटना mousemoveऔर moseoutघटनाओं। मुझे नहीं लगता कि वहाँ एक कारण है कि हम आग नहीं है है mouseover। हम इस घटना को जोड़ना चाहिए।

19/09/2016 को 16:37
का स्रोत उपयोगकर्ता

वोट
0

वहाँ भी है mouseenterऔर आपके आवेदन के आधार पर विचार किया जाना चाहिए। मामले में आप की गारंटी करने के पॉपअप ऊपर हो जाएगा चारों ओर एक काम इस सवाल पर ठोकर खाई है, क्योंकि MapBox लापता पॉपअप के साथ अनियमित व्यवहार दे रहा था, यहाँ है featureउपयोगकर्ता पर होवर किया है।

इसलिए तरह घटना को संभालने और माउस निर्देशांक प्राप्त करना MapBox का उपयोग करें:

map.on('mouseenter', 'layerID', (event) => {
    var x = event.originalEvent.clientX
    var y = event.originalEvent.clientY

तो फिर, यह अपने पसंदीदा डोम हैंडलर का उपयोग कर और एक जोड़ने की बात है <div>पॉपअप के लिए। जहां उपयोगकर्ता तो जैसे hovered के लिए पॉपअप की स्थिति निर्धारित करें:

{left : `${x}`, top : `${y}`, position : 'absolute', zIndex : 1}
08/08/2017 को 18:19
का स्रोत उपयोगकर्ता

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