MapMouseEvent

事件对象字段

事件类型

地图级与图层级

地图级事件只给位置，不给要素。图层级事件把图层 id 作为第二个参数， 回调里才有 features，且只包含该图层命中的要素。

/* 地图级：只有位置 */
map.on('click', function (e) {
  console.log(e.lngLat.toArray());
});

/* 图层级：带要素 */
map.on('click', 'station-dots', function (e) {
  var f = e.features[0];
  console.log(f.properties.name, e.lngLat.toArray());
});

e.features[0].geometry 是简化后的几何，用于判断足够， 不要拿它做精确面积或拓扑计算。需要原始坐标时按属性回查源数据。

手动查询要素

需要一次拿到多个图层的命中结果，用 map.queryRenderedFeatures，参数可以是像素点或屏幕矩形。

map.on('click', function (e) {
  var hits = map.queryRenderedFeatures(e.point, {
    layers: ['station-dots', 'zones-fill']
  });

  hits.forEach(function (f) {
    console.log(f.layer.id, f.properties);
  });
});

高频事件的处理

mousemove 每帧触发。在回调里做查询或重计算会直接拖慢地图。 需要实时坐标时把结果写进一个固定节点，或者用 requestAnimationFrame 合并处理：

var pending = null;

map.on('mousemove', function (e) {
  pending = e.lngLat;
  if (!pending.__queued) {
    pending.__queued = true;
    requestAnimationFrame(function () {
      label.textContent = pending.lng.toFixed(4) + ', ' + pending.lat.toFixed(4);
    });
  }
});

指针样式也要成对设置。只在 mouseenter 改光标、 忘了在 mouseleave 改回来，是交互里最常见的残留问题。