注：当前使用的是 ol [9.2.4] 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

❝

在GIS开发中最重要的信息就是位置属性，要保证决策的准确性其中一项关键就是要明确位置信息。通过GIS可以帮助用户解决是什么，在哪里的问题，从而辅助用户做出相应判断。在OpenLayers中可以通过两种方式获取位置信息，分别是getEventPixel和evt.pixel，这两种方式都会返回地图像素坐标。

在 OpenLayers 中，map.getEventPixel(evt.originalEvent) 和 evt.pixel 皆可用于获取与事件相关的像素坐标，但它们的来源和使用场景有所不同。本文以获取事件像素坐标为例对《OpenLayers 事件与浏览器原生事件对比》进行讲解。

1. OpenLayers 原生事件对象

event.pixel属于OpenLayers封装的事件对象，用于直接获取OpenLayers事件对象中的像素坐标。以下截图是一些OpenLayers封装事件类型，包括地图事件、选择事件、绘制事件等多种类型。有关更多OpenLayers事件信息，可参考文章：

其详细介绍如下：

• 返回值：

• 返回一个 ol/pixel 类型的数组，输出为鼠标在地图上的像素坐标，以[x, y]形式进行表示。

• 使用场景：

• 在OpenLayers事件监听器中直接使用，无需额外转换。
• 适用于OpenLayers内置事件处理的场景。

2. 浏览器事件对象

getEventPixel(evt.originalEvent)属于Map对象用于获取浏览器事件对象相对于视图的地图像素坐标的方法，它可以将原生 DOM 事件（如 MouseEvent）的屏幕坐标转换为地图的像素坐标。其详细介绍如下：

• 参数：

• evt.originalEvent：原生 DOM 事件对象（例如 MouseEvent）。

• 返回值：

• 返回一个 ol/pixel 类型的数组，输出为鼠标在地图上的像素坐标，以[x, y]形式进行表示。

• 使用场景：

• 当需要将 DOM 事件的屏幕坐标转换为地图像素坐标时使用。
• 适用于自定义事件处理或与非OpenLayers代码交互的场景。

3. 区别对比

4. 示例代码

使用 map.getEventPixel(evt.originalEvent)

// 监听地图鼠标移动事件
map.on("pointermove", evt => {
    // 若正在拖拽地图，则退出
    if (evt.dragging) return
    const pixel = map.getEventPixel(evt.originalEvent)
    console.log("原生（DOM）事件坐标:", pixel);
    showPopupInfo(pixel)
})

使用 evt.pixel

// 监听地图鼠标点击事件
map.on("click", evt => {
    // 若正在拖拽地图，则退出
    if (evt.dragging) return
    console.log("OpenLayres地图事件坐标:", pixel);
    showPopupInfo(evt.pixel)
})

5. 使用场景

场景 1：自定义事件处理如果需要基于原生 DOM 事件（如 MouseEvent）进行自定义处理，可以使用 map.getEventPixel(evt.originalEvent)：

document.addEventListener("mousemove", (event) => {
    const pixel = map.getEventPixel(event);
    console.log("原生事件像素坐标:", pixel);
});

场景 2：OpenLayers 内置事件处理在OpenLayers事件监听器中，直接使用 evt.pixel 更加方便：

map.on("pointermove", (evt) => {
    console.log("OpenLayres地图事件坐标:", evt.pixel);
});

6. 总结

❝

OpenLayers示例数据下载，请在公众号后台回复：ol数据

全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试

❝

GIS之路公众号已经接入了智能助手，欢迎大家前来提问。

欢迎访问我的博客网站-长谈GIS：http://shanhaitalk.com