Question

我一直在寻找问题的答案，但结果是null：D

我用的是传单地图。现在，我正在尝试将逻辑移至mapbox-gl。我正在使用mapbox-gl-leaflet来完成此操作，因为它允许我结合使用传单和地图框功能。

但是我遇到的问题是我不能使用 mapbox的事件，例如.on('mousemove'中的'mouseenter'等。小叶事件效果很好，但是由于需要使用mapbox的事件，我可以将事件绑定在图层上，而不是在整个地图上绑定。

这里的示例演示了如何使用mapbox-gl-leaflet处理事件。并附加一个jsfiddle示例：

let leafletMap = L.map('map').setView([38.912753, -77.032194], 2);

L.marker([38.912753, -77.032194])
  .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
  .addTo(leafletMap)
  .openPopup();

var gl = L.mapboxGL({
  accessToken: "pk.eyJ1IjoicGF0cmlrMDAwIiwiYSI6ImNqemw1OW9mNzBqeGMzZG4wYzZqMHI0djQifQ.G1bbUCb8OxmhGlKB_y_aat",
  style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(leafletMap);

gl._glMap.on('load', () => {
  console.log('MAPBOX map loaded');

  // let's see events on mapbox map
  gl._glMap.on('mousemove', () => { console.log('MAPBOX mousemove') });
  gl._glMap.on('mouseenter', () => { console.log('MAPBOX mouseenter') });
  gl._glMap.on('mouseout', () => { console.log('MAPBOX mouseout') });
  gl._glMap.on('mouseleave', () => { console.log('MAPBOX mouseleave') });
  gl._glMap.on('mouseover', () => { console.log('MAPBOX mouseover') });

  // let's add some layer and fire events on it

  gl._glMap.addSource('states', {
    'type': 'geojson',
    'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
  });
  gl._glMap.addLayer({
    'id': 'state-fills',
    'type': 'fill',
    'source': 'states',
    'layout': {},
    'paint': {
      'fill-color': '#627BC1',
      'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0.5 ]
    }
  });

  gl._glMap.on('mouseenter', 'state-fills', (e) => {console.log('state-fills mouseenter', e) });
  gl._glMap.on('mousemove', 'state-fills', (e) => {console.log('state-fills mousemove', e) });
  gl._glMap.on('mouseout', 'state-fills', (e) => {console.log('state-fills mouseout', e) });
  gl._glMap.on('mouseleave', 'state-fills', (e) => {console.log('state-fills mouseleave', e) });

})

// now let's see on leaflet map events
// SPOILER: they are works
leafletMap.on('mousemove', () => { console.log('LEAFLET mousemove') });
leafletMap.on('mouseenter', () => { console.log('LEAFLET mouseenter') });
leafletMap.on('mouseout', () => { console.log('LEAFLET mouseout') });
leafletMap.on('mouseleave', () => { console.log('LEAFLET mouseleave') });
leafletMap.on('mouseover', () => { console.log('LEAFLET mouseover') });

JSFIDDLE ：https://jsfiddle.net/hofshteyn/vat9skq5/2/

那我怎么在这里触发mapbox事件？

Answer 1

如果您要将传单和mapbox结合在一起，请查看以下代码段。

带地图框的传单

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Plain Leaflet API</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.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>
L.mapbox.accessToken = '<your access token here>';

var mapboxTiles = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
       attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var map = L.map('map')
  .addLayer(mapboxTiles)
  .setView([42.3610, -71.0587], 15);
</script>


</body>
</html>

如果要使用mapbox矢量图块，则应使用Leaflet.MapboxVectorTile

Mapbox-gl-leaflet：不会触发mapbox事件

1 个答案: