mapbox -gl-传单:mapbox事件不会触发
mapbox -gl-传单:mapbox事件不会触发
提问于 2019-08-21 11:17:47
我一直在寻找答案，但结果是null :D
我用传单地图。现在，我正在尝试将逻辑转移到mapbox-gl。我使用mapbox-gl-传单做这件事，因为它允许我将传单和mapbox功能结合起来。
但我面临的问题是我不能使用mapbox的events，如.on('mousemove' of 'mouseenter'等。传单事件可以正常工作，但我需要处理mapbox的事件，因为我可以将事件绑定在层上，而不是整个地图上。
下面的示例演示了如何使用mapbox-gl-leaflet处理事件。并附上一个“小提琴”示例：
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事件呢？
回答 1
Stack Overflow用户
发布于 2019-09-02 09:15:37
如果您想将传单和mapbox结合在一起，请看下面的代码片段。
- 贴有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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57590436
复制相关文章
相似问题
腾讯云开发者
