Map和其他Mapbox GL JS类响应用户交互或状态变化而发出事件。Evented是用于绑定和取消绑定这些事件的侦听器的接口。本页面描述了Mapbox GL JS可以引发的不同类型的事件
- [
Map]当用户与Map交互时，[事件]会触发。 - [
Marker]当用户与Marker交互时，[事件]会触发。 - [
Popup]当用户与Popup交互时，[事件]会触发。 - [
GeolocationControl]当用户与GeolocationControl交互时，[事件]触发。
一、on 为指定类型的事件添加侦听器，可选地仅限于指定样式层中的功能
参数：
- type： 要监听的事件类型。当光标从该层外部或地图画布外部进入指定层的可见部分时，将触发与可选的
layerId参数兼容的事件 - layerIds ([string]| [Array]<[string])（可选）样式图层的ID。如果您提供了layerId，则只有当侦听器的位置位于这些层中的可见功能内时，才会触发侦听器，并且事件将具有包含匹配功能数组的features属性。如果不提供layerId，则侦听器将由映射上任何位置发生的相应事件触发，并且该事件将没有features属性。请注意，许多事件类型与可选的layerId参数不兼容
- function 事件触发时要调用的函数。
示例：
// Set an event listener that will fire
// when a feature on the countries layer of the map is clicked.
map.on('click', 'countries', (e) => {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(`Country name: ${e.features[0].properties.name}`)
.addTo(map);
});
// Set an event listener that will fire
// when a feature on the countries or background layers of the map is clicked.
map.on('click', ['countries', 'background'], (e) => {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(`Country name: ${e.features[0].properties.name}`)
.addTo(map);
});
1、事件
1、mousedown 当在地图中按下指向设备（通常是鼠标）时触发
2、mouseup 当地图中释放指向设备（通常是鼠标）时触发。
3、mouseover：当指向设备（通常是鼠标）在地图内移动时触发；该事件每次进入地图或任何子元素时都会触发
4、mouseenter 当指向设备（通常是鼠标）从该层外部或地图画布外部进入指定层的可见部分时触发 （只能监听内部图层）
5、mousemove： 当光标在地图内时移动指向设备（通常是鼠标）时触发；当您在地图上移动光标时，每次光标在地图中更改位置时，事件都会触发
6、mouseleave 当指向设备（通常是鼠标）离开指定图层的可见部分或从指定图层移动到地图画布外部时触发；注意： 要检测鼠标何时离开画布，独立于图层，请改用mouseout
7、mouseout 当点设备（通常是鼠标）离开地图的画布时触发（只能监听画布图层：底图）
8、click： 在地图上的同一点被按下并释放时触发
9、dblclick 被按下并快速连续两次在地图上的同一点释放时触发
10、contextmenu 当单击鼠标右键或在地图中按下上下文菜单键时触发
11、wheel 当地图中发生[wheel]事件时触发（滚轮事件）
2、监听
1、zoomstart 地图开始从一个缩放级别过渡到另一个缩放级别之前触发
2、zoomend 在地图完成从一个缩放级别到另一个缩放级别过渡后触发
3、movestart 在地图开始从一个视图过渡到另一个视图之前触发
4、move 在从一个视图到另一个视图的动画过渡期间反复触发
5、moveend 在地图完成从一个视图到另一个视图的过渡后
6、boxzoomstart 当“盒子缩放”交互开始时触发
7、boxzoomend 当“框缩放”交互结束时触发。
3、生命周期
1、load 在下载了所有必要的资源并首次视觉上完成地图渲染后立即触发
2、render 每当地图被绘制到屏幕上时，都会被触发
- 更改地图的位置、缩放、间距或方位
- 改变地图的风格
- GeoJSON源的更改
- 矢量图块、GeoJSON文件、字形或精灵的加载
3、idle 在地图进入“空闲”状态之前渲染的最后一帧后触发
- 没有相机转换正在进行中
- 所有当前请求的瓷砖都已加载
- 所有渐变/过渡动画都已完成。
4、error 发生错误时触发。这是Mapbox GL JS的主要错误报告机制
4、数据加载
1、data 当任何地图数据加载或更改时触发
2、styledata 当地图的样式加载或更改时触发
3、sourcedata 当地图的源之一加载或更改时触发，包括属于源的瓷砖加载或更改
4、dataloading 当任何地图数据（样式、源、瓷砖等）开始异步加载或更改时触发
5、styledataloading 当地图的样式开始异步加载或更改时触发、
6、sourcedataloading 当地图的源之一开始异步加载或更改时触发
二、 off 删除之前使用Map#on添加的事件侦听器，可选地仅限于特定于图层的事件
参数：
- type
(string)以前用于安装侦听器的事件类型。 - layerIds
((string | Array<string>))以前用于安装侦听器的层ID - function
(Function)之前作为侦听器安装的功能。
示例：
// Create a function to print coordinates while a mouse is moving.
function onMove(e) {
console.log(`The mouse is moving: ${e.lngLat}`);
}
// Create a function to unbind the `mousemove` event.
function onUp(e) {
console.log(`The final coordinates are: ${e.lngLat}`);
map.off('mousemove', onMove);
}
// When a click occurs, bind both functions to mouse events.
map.on('mousedown', (e) => {
map.on('mousemove', onMove);
map.once('mouseup', onUp);
});
三、once 将仅调用一次的侦听器添加到指定的事件类型中，可选地仅限于在指定样式层中的功能上发生的事件
参数：
- type:要监听的事件类型
- layerIds 同上 on
- function 事件触发时要调用的函数。
监听类型：'mousedown'”、“'mouseup'”、“'preclick'”、“'click'”、“'dblclick'”、“'mousemove'”、“'mouseenter'”、“'mouseleave'”、“'mouseover'”、“'mouseout'”、“'contextmenu'”、“'touchstart'”、“'touchend'或'touchcancel'中的一个。当光标从该图层外部或地图画布外进入指定图层的可见部分时，会触发mouseenter和mouseover事件。当光标离开指定图层的可见部分或离开地图画布时，会触发mouselea和mouseout事件
示例：
// Log the coordinates of a user's first map touch.
map.once('touchstart', (e) => {
console.log(`The first map touch was at: ${e.lnglat}`);
});
// Log the coordinates of a user's first map touch
// on a specific layer.
map.once('touchstart', 'my-point-layer', (e) => {
console.log(`The first map touch on the point layer was at: ${e.lnglat}`);
});
// Log the coordinates of a user's first map touch
// on specific layers.
map.once('touchstart', ['my-point-layer', 'my-point-layer-2'], (e) => {
console.log(`The first map touch on the point layer was at: ${e.lnglat}`);
});
