mapbox-gl | 1.5 地图事件与图层事件

简述

初步了解初始化地图、加载图层后，接下来需要学习地图事件与图层事件。

简单来说，事件是增加用户与地图的交互关系，提高地图的实用性，在交互中实现业务的拓展。

地图事件

在之前的章节中，我们接触的最早的是地图加载事件

map.on('load',()=>{

})

在前端里，接触最多的事件是点击事件，mapbox中的地图事件大体分为四类：

1. 交互
2. 移动（相机）
3. 生命周期
4. 数据加载

可以在map-events里看到详细的介绍，在这里将介绍几个常见的，让大家初步认识地图事件。

交互

// 鼠标左键
map.on('click', (e) => {
  // e 内返回点击事件本身，点击的对象，经纬度等信息
console.log(`点击的经纬度： ${e.lngLat}`);
});
// 鼠标右键
map.on('contextmenu', () => {
  // 一般用来实现地图右键菜单
});

移动

这里指的是相机的移动，也就是“我”的位置，站在某个空间坐标上，看向地图的位置，通俗点说是视窗的位置。

// 地图层级变化后触发
// 相似的还有 zoom zoomstart
// 假如想要做一个随着层级的增大而切换显示的图层，建议使用zoomend
// zoom会随层级变化一直触发，而zoomend只会在结束时触发
map.on('zoomend', () => {
console.log('层级变化结束');
});
// 地图倾斜角变化触发,效果与zoomend类似
// 相似的有 pitch, pitchstart
map.on('pitchend', () => {
});

生命周期

// 官方定义为： 在下载了所有必要的资源，并完成了地图的第一次可视化渲染后立即触发。
// 我们可以在这个时候进行地图的初始化，也可以在style.load初始化
// 无特殊情况下，推荐后者，因为后者时机更早一些
map.on('load', () => {
});
// 在渲染至屏幕时触发，可用于实时处理的一些事件
map.on('render', () => {
});

数据加载

// 类似于styledata
map.on('styledata', () => {
});

图层事件

相对于地图事件，它仅监听发生在一个图层上的事件，常用于图层的点击事件,如果未点击到图层，是不会触发事件的

map.on('click',layerName, (e) => {
});

大部分的地图交互事件，都可以用做图层交互事件，接下来将会是一个常用的点击demo供大家去尝试

demo

function clickHighlight(map) {
  // 数据
  const data = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: {
          name: "1",
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [116.38585567474364, 39.92099342895789],
              [116.38615608215332, 39.91622086779371],
              [116.39057636260985, 39.91655002062137],
              [116.39049053192137, 39.921125081103234],
              [116.38585567474364, 39.92099342895789],
            ],
          ],
        },
      },
      {
        type: "Feature",
        properties: {
          name: "2",
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [116.39104843139647, 39.92102634201797],
              [116.39117717742919, 39.91655002062137],
              [116.39503955841063, 39.91684625681369],
              [116.39469623565674, 39.920960515882015],
              [116.39104843139647, 39.92102634201797],
            ],
          ],
        },
      },
      {
        type: "Feature",
        properties: {
          name: "3",
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [116.38628482818604, 39.91576005117727],
              [116.38662815093993, 39.91227091046905],
              [116.39044761657713, 39.91243549657234],
              [116.39049053192137, 39.91618795242394],
              [116.38628482818604, 39.91576005117727],
            ],
          ],
        },
      },
      {
        type: "Feature",
        properties: {
          name: "4",
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [116.39139175415039, 39.91612212163695],
              [116.39147758483887, 39.91240257938332],
              [116.39516830444335, 39.91266591645252],
              [116.39486789703369, 39.91628669848582],
              [116.39139175415039, 39.91612212163695],
            ],
          ],
        },
      },
    ],
  };
  map.addSource("polygon", {
    type: "geojson",
    data: data,
  });

  // 添加图层
  map.addLayer({
    id: "Polygon",
    type: "fill",
    source: "polygon",
    paint: {
      "fill-color": "rgb(0,255,255)",
    },
    layout: {},
  });
  // 添加高亮图层
  map.addLayer({
    id: "highlightPolygon",
    type: "fill",
    source: "polygon",
    paint: {
      "fill-color": "#6e599f",
      "fill-opacity": 0.75,
    },
    filter: ["in", "name", "1"],
  });
  // 添加点击事件
  map.on("click", function (e) {
    var bbox = [
      [e.point.x, e.point.y],
      [e.point.x, e.point.y],
    ];
    var features = map.queryRenderedFeatures(bbox, {
      layers: ["Polygon"],
    });
    var filter = features[0].properties.name;
    map.setFilter("highlightPolygon", ["in", "name", filter]);
  });
}

有时间的小伙伴把示例自己多看看，特别是注册的点击事件这一块，接下来将讲述对图层的显隐、过滤、高亮等常见功能实现。