当前位置：首页 > news >正文

Opnelayers：封装Popup

news 来源：原创 2025/6/9 16:35:14

一、概述

我之前在文章 OpenLayers：封装Tooltip-CSDN博客中封装了一个Overlay的子类Tooltip，实现了一些原生的Overlay所不具备的功能。现在我更进一步封装一个Tooltip的子类Popup。所以请先阅读我的上一篇文章。

在我的设计中Popup完全继承Tooltip原有的功能。它新增的功能只有一个，那就是Popup默认隐藏，并会与一个目标相关联，这个目标可以是一个要素或是一个坐标位置，只有鼠标点击或悬停到关联目标上，Popup才会显示。

二、实现弹出功能

我的基本思路就是，首先增加两个属性target和trigger，target决定popup所绑定的目标是什么，trigger则表示触发提示框弹出的方式。然后去侦听地图对应的事件（鼠标点击或者鼠标移动事件），在事件处理函数中去判断目标是否被点击到了（或是否悬停在其上方），若被点击到则显示提示框，没被点击到就隐藏提示框。

1.新增target和trigger属性

target属性表示popup所关联的对象，在我的设想中target可以支持四种类型：

Featrue，一个要素，例如new Feature(new Point(...))
Geomtry，一个几何图形，例如 Point、LineString、Ploygon等对象。
Coordinate，一个坐标，例如[112 , 23]
Extent，一个坐标范围，例如[112.9 , 23.5 , 113.4 , 23.7]

/*** 所绑定的目标对象。* @type { Feature | Geometry | import("ol/coordinate").Coordinate | import("ol/extent").Extent}* @private*/
this.target = options.target;

trigger属性表示触发弹出的方式，它有两种值'click' | 'hover'

/*** 弹窗的触发方式。* @type {'click' | 'hover'}* @private*/
this.trigger = options.trigger;

2.侦听地图事件

我要根据触发方式的不同来侦听不同的地图事件。如果trigger 为 'click' 则侦听地图的click事件，如果trigger 为 'hover' 则侦听地图的pointermove 事件。

class Popup extends Tooltip {constructor(options) {......this.on("change:map", this.handlePopupMapChange);}/*** 处理地图变更时的回调。* @protected* @returns {void}*/handlePopupMapChange() {const map = this.getMap();if (map) {const eventType = this.trigger === "click" ? "click" : "pointermove";this.listenKeys.push(listen(map, eventType, this.handleTargetTrigger, this));} else {// 移除所有事件监听this.removeAllListeners();}}/*** 处理目标触发事件。* @protected* @param {import("ol/MapBrowserEvent").default} event 地图浏览事件对象* @returns {void}*/handleTargetTrigger(event) {const coordinate = event.coordinate;}
}

3.如何判断是否触发了target?

我的思路是这样，由于target有多种可能的类型，所以我要先将target转换成一种固定的类型，我选择全都转换为Extent 。这样问题就被转化为了鼠标当前点击（悬停）位置的坐标是否在一个Extent（也就是target）的范围内，可以利用OpenLayers内置的containsCoordinate方法来实现这样的判断。

我写了一个工具方法getTargetExtent来实现target转Extent的功能。但是遇到一个问题，当我将一个Point或Cooridnate转换为一个Extent后，其实Extent还是一个点，例如将[112 , 23]转换之后的结果就是[112 , 23 , 112 , 23]，在实际的操作中这样单独的一个坐标根本点击不到。因此当target是一个单独点位的时候，我将会转换后的Extent扩大，我会将其扩大为一个以target为中心边长10像素的Extent。

function getTargetExtent(map, target) {if (Array.isArray(target) &&target.every(item => typeof item === "number") &&target.length === 4)return target;let geometry = null;if (target instanceof Feature) {geometry = target.getGeometry();} else if (target instanceof Geometry) {geometry = target;} else if (Array.isArray(target) &&target.every(item => typeof item === "number") &&target.length === 2) {geometry = new Point(target);}if (geometry instanceof Point) {const coordinate = geometry.getCoordinates();const resolution = map.getView().getResolution();const extentSize = 5 * resolution;const extent = [coordinate[0] - extentSize,coordinate[1] - extentSize,coordinate[0] + extentSize,coordinate[1] + extentSize,];return extent;} else {return geometry.getExtent();}
}

之后在handlePopupMapChange中调用getTargetExtent方法，对target进行处理：

handlePopupMapChange() {const map = this.getMap();// 移除所有事件监听this.removeAllListeners();if (map) {this.targetExtent = getTargetExtent(map, this.target);const eventType = this.trigger === "click" ? "click" : "pointermove";this.listenKeys.push(listen(map, eventType, this.handleTargetTrigger, this));}}

最后在handleTargetTrigger中调用containsCoordinate方法进行判断。

import { containsCoordinate } from "ol/extent";/*** 处理目标触发事件。* @protected* @param {import("ol/MapBrowserEvent").default} event 地图浏览事件对象* @returns {void}*/handleTargetTrigger(event) {const coordinate = event.coordinate;// 目标被触发if (containsCoordinate(this.targetExtent, coordinate)) {this.open();} // 目标未触发else {this.isAutoClose && this.close();}}

4.控制提示框的显隐

当目标被触发时就要显示提示框，反之则要隐藏提示框。为控制提示框的显隐我专门写了open()与close()两个方法，它们本质上还是在利用Tooltip中的visibility控制显隐。当然这里也有可能会出现显隐冲突的问题，因此我新增了一个isTrigger属性来表示target是否被触发，并重写了setVisibility()方法，将isTrigger作为限制条件加入了进去。

  /*** 设置弹窗的可见性。* @override* @param {boolean} visibility 是否可见* @returns {void}*/setVisibility(visibility) {if (!this.isTrigger && this.isOnZoomRange) return;this.set("visibility", visibility);}/*** 关闭弹窗。* @returns {void}*/close() {this.isTrigger = false;this.set("visibility", false);}/*** 打开弹窗。* @returns {void}*/open() {this.isTrigger = true;this.set("visibility", true);}

最终呈现的效果如下：

popup显示控制

完整代码

import Feature from "ol/Feature";
import { Geometry, Point, Circle } from "ol/geom";
import { containsCoordinate } from "ol/extent";
import Tooltip from "./Tooltip";
import { listen } from "ol/events";import "./Popup.css";function getTargetExtent(map, target) {if (Array.isArray(target) &&target.every(item => typeof item === "number") &&target.length === 4)return target;let geometry = null;if (target instanceof Feature) {geometry = target.getGeometry();} else if (target instanceof Geometry) {geometry = target;} else if (Array.isArray(target) &&target.every(item => typeof item === "number") &&target.length === 2) {geometry = new Point(target);}if (geometry instanceof Point) {const coordinate = geometry.getCoordinates();const resolution = map.getView().getResolution();const extentSize = 5 * resolution;const extent = [coordinate[0] - extentSize,coordinate[1] - extentSize,coordinate[0] + extentSize,coordinate[1] + extentSize,];return extent;} else {return geometry.getExtent();}
}/*** Popup 弹出框覆盖物类，继承自 Tooltip。* @class* @augments Tooltip* @classdesc 自定义的 OpenLayers 弹出框覆盖物类，继承自 ol/Overlay。** @param {Object} options 配置选项* @param {Feature | Geometry | import("ol/coordinate").Coordinate | import("ol/extent").Extent} options.target 所绑定的目标* @param {'click' | 'hover'} options.trigger 触发方式*/
class Popup extends Tooltip {/*** 创建 Popup 实例。* @param {Object} options 配置选项* @param {Feature | Geometry | import("ol/coordinate").Coordinate | import("ol/extent").Extent} options.target 所绑定的目标* @param {'click' | 'hover'} options.trigger 触发方式*/constructor(options) {super(options);/*** 是否已触发弹窗显示。* @type {boolean}* @private*/this.isTrigger = false;/*** 弹窗的触发方式。* @type {'click' | 'hover'}* @private*/this.trigger = options.trigger;/*** 所绑定的目标对象。* @type { Feature | Geometry | import("ol/coordinate").Coordinate | import("ol/extent").Extent}* @private*/this.target = options.target;/*** 目标的范围。* @type { import("ol/extent").Extent}* @private*/this.targetExtent = null;/*** 是否自动关闭弹窗* @type {boolean}* @private*/this.isAutoClose =options.isAutoClose !== undefined ? options.isAutoClose : true;/*** 是否显示关闭按钮* @type {boolean}* @private*/this.isShowCloseBtn =options.isShowCloseBtn !== undefined ? options.isShowCloseBtn : false;this.set("visibility", false);this.on("change:map", this.handlePopupMapChange);}/*** 处理地图变更时的回调。* @protected* @returns {void}*/handlePopupMapChange() {const map = this.getMap();if (map) {this.targetExtent = getTargetExtent(map, this.target);const eventType = this.trigger === "click" ? "click" : "pointermove";this.listenKeys.push(listen(map, eventType, this.handleTargetTrigger, this));} else {// 移除所有事件监听this.removeAllListeners();}}/*** 处理目标触发事件。* @protected* @param {import("ol/MapBrowserEvent").default} event 地图浏览事件对象* @returns {void}*/handleTargetTrigger(event) {const coordinate = event.coordinate;if (containsCoordinate(this.targetExtent, coordinate)) {this.open();} else {this.isAutoClose && this.close();}}/*** 设置弹窗的可见性。* @override* @param {boolean} visibility 是否可见* @returns {void}*/setVisibility(visibility) {if (!this.isTrigger && this.isOnZoomRange) return;this.set("visibility", visibility);}/*** 格式化弹窗元素。* @override* @param {HTMLElement} element 弹窗元素* @returns {HTMLElement} 格式化后的弹窗元素*/formatElement(element) {const _element = super.formatElement(element);if (this.isUseContainer) {const container = _element;container.className = `ol-custom-popup ${this.getPlacement()}`;if (this.isShowCloseBtn) {const closeButton = document.createElement("div");closeButton.className = "ol-custom-popup-close";closeButton.innerHTML = "×";container.appendChild(closeButton);closeButton.addEventListener("click",function () {this.close();}.bind(this));}}return _element;}/*** 关闭弹窗。* @returns {void}*/close() {this.isTrigger = false;this.set("visibility", false);}/*** 打开弹窗。* @returns {void}*/open() {this.isTrigger = true;this.set("visibility", true);}
}export default Popup;