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}`);
});