时间戳

首页 > 解决方案 > Mapbox-gl-leaflet：mapbox 事件不会触发

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

问题描述

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

我用的是传单地图。现在我正在尝试将逻辑移至mapbox-gl. 我正在使用mapbox-gl-leaflet做这件事，因为它允许我结合传单和 mapbox 功能。

但我遇到的问题是我不能使用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 事件呢？

标签： javascriptleafletmapboxmapbox-gl-jsmapbox-gl-leaflet

解决方案

如果您想将传单和地图框结合在一起，请查看此代码片段。

  • 带有地图框的传单
<!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

推荐阅读