MapBox GL 事件与事件类型

1,322 阅读5分钟

Map和其他Mapbox GL JS类响应用户交互或状态变化而发出事件。Evented是用于绑定和取消绑定这些事件的侦听器的接口。本页面描述了Mapbox GL JS可以引发的不同类型的事件

  • [Map]当用户与Map交互时,[事件]会触发。
  • [Marker]当用户与Marker交互时,[事件]会触发。
  • [Popup]当用户与Popup交互时,[事件]会触发。
  • [GeolocationControl]当用户与GeolocationControl交互时,[事件]触发。

一、on 为指定类型的事件添加侦听器,可选地仅限于指定样式层中的功能

参数:

  1. type: 要监听的事件类型。当光标从该层外部或地图画布外部进入指定层的可见部分时,将触发与可选的layerId参数兼容的事件
  2. layerIds ([string]| [Array]<[string])(可选)样式图层的ID。如果您提供了layerId,则只有当侦听器的位置位于这些层中的可见功能内时,才会触发侦听器,并且事件将具有包含匹配功能数组的features属性。如果不提供layerId,则侦听器将由映射上任何位置发生的相应事件触发,并且该事件将没有features属性。请注意,许多事件类型与可选的layerId参数不兼容
  3. 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添加的事件侦听器,可选地仅限于特定于图层的事件

参数:

  1. type(string)以前用于安装侦听器的事件类型。
  2. layerIds((string | Array<string>))以前用于安装侦听器的层ID
  3. 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 将仅调用一次的侦听器添加到指定的事件类型中,可选地仅限于在指定样式层中的功能上发生的事件

参数:

  1. type:要监听的事件类型
  2. layerIds 同上 on
  3. function 事件触发时要调用的函数。

监听类型:'mousedown'”、“'mouseup'”、“'preclick'”、“'click'”、“'dblclick'”、“'mousemove'”、“'mouseenter'”、“'mouseleave'”、“'mouseover'”、“'mouseout'”、“'contextmenu'”、“'touchstart'”、“'touchend''touchcancel'中的一个。当光标从该图层外部或地图画布外进入指定图层的可见部分时,会触发mouseentermouseover事件。当光标离开指定图层的可见部分或离开地图画布时,会触发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}`);
});