本文将围绕如何在 OpenLayers 中，当需要在非 OpenLayers 地图容器上进行测量时，触发或模拟地图的 "click" 和 "pointermove" 事件展开讨论。
问题背景
在使用 OpenLayers 开发测量工具时，通常会使用 ol.interaction.Draw 交互来实现绘制功能。 然而，当测量操作发生在非 OpenLayers 地图的容器上时，OpenLayers 地图上的测量更新可能会出现延迟，直到触发 "dblclick" 事件才会完成绘制。 为了解决这个问题，我们需要找到一种方法，在自定义事件处理程序中模拟或触发 OpenLayers 地图的 "click" 和 "pointermove" 事件，从而实现多个地图之间的实时同步测量。
解决方案
以下代码展示了如何在自定义事件处理程序中，通过 appendCoordinates() 方法处理点击事件，并通过模拟 ol.MapBrowserEvent 对象来触发 "pointermove" 事件。
AI舌诊面诊问诊医疗系统+诊疗商城系统源码
下载
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
this.measureHandler.containers.forEach((container, nr) => {
$(container).on("click.ol", () => {
if (this.measureHandler.viewerClick === true) {
this.lastCoord = ol.proj.transform([this.measureHandler.clickCoords[0], this.measureHandler.clickCoords[1]], "EPSG:4326", "EPSG:3857");
if (measureType !== "Polygon") {
this.coords.push(this.lastCoord);
} else {
if (this.coords.length <= 1) {
this.coords.splice(0, 0, this.lastCoord);
this.coords.push(this.lastCoord);
} else {
this.coords.splice(this.coords.length - 1, 0, this.lastCoord);
}
}
if (measureType === "Circle") {
if (this.measureHandler.activePlugins[nr] !== "Ortofoto" && this.measureHandler.activePlugins[nr] !== "Ukosne" && this.measureHandler.activePlugins[nr] !== "OSMPlugin") {
if (this.clickCount === 0) {
this.draw.appendCoordinates([this.lastCoord]);
this.clickCount++;
} else {
this.draw.finishDrawing();
this.clickCount = 0;
}
}
} else {
this.draw.appendCoordinates([this.lastCoord]);
this.clickCount++;
}
}
});
$(container).on("mousemove.ol", (evt) => {
this.maps[nr].removeLayer(this.drawLayer);
if (nr === 0) {
this.map2.removeLayer(this.drawLayer);
this.map2.addLayer(this.drawLayer);
} else {
this.map.removeLayer(this.drawLayer);
this.map.addLayer(this.drawLayer);
}
this.maps[nr].addInteraction(this.draw);
this.lastCoord = ol.proj.transform([this.measureHandler.moveCoords[0], this.measureHandler.moveCoords[1]], "EPSG:4326", "EPSG:3857");
if (measureType !== "Polygon") {
this.coords.pop();
this.coords.push(this.lastCoord);
} else {
if (this.coords.length <= 1) {
this.coords.pop();
this.coords.push(this.lastCoord);
} else {
this.coords.splice(this.coords.length - 2, 1, this.lastCoord);
}
}
if (nr === 0) {
olEvt = {
map: this.map2,
pixel: this.measureHandler.pixelObj,
coordinate: this.lastCoord,
originalEvent: {
pointerType: "mouse"
},
frameState: this.map2.frameState
};
} else {
olEvt = {
map: this.map,
pixel: this.measureHandler.pixelObj,
coordinate: this.lastCoord,
originalEvent: {
pointerType: "mouse"
},
frameState: this.map.frameState
};
}
this.draw.handlePointerMove_(olEvt);
});
$(container).on("dblclick.ol", () => {
this.draw.removeLastPoint();
this.draw.finishDrawing();
this.clickCount = 0;
});
});代码解释：
- 点击事件处理： 使用 appendCoordinates() 方法将坐标添加到绘制交互中。 需要注意的是，appendCoordinates() 方法对于圆形几何图形可能无法正常工作，因此需要针对圆形几何图形添加额外的逻辑处理。
- 鼠标移动事件处理： 无法直接触发 OpenLayers 地图的 "pointermove" 事件。 但是，ol.interaction.Draw 交互提供了一个内部方法 handlePointerMove_()，可以模拟 "pointermove" 事件。 要使用此方法，需要创建一个 ol.MapBrowserEvent 对象，并填充 map、pixel、coordinate、originalEvent 和 frameState 等属性。
- 双击事件处理： 用于完成绘制操作。
注意事项
- handlePointerMove_() 方法是 OpenLayers 的内部方法，其实现可能会在 OpenLayers 的不同版本中发生变化。 因此，在使用此方法时，需要仔细阅读 OpenLayers 的 API 文档，并进行充分的测试。
- 对于圆形几何图形，appendCoordinates() 方法可能无法正常工作。 需要针对圆形几何图形添加额外的逻辑处理，例如，在第一次点击时添加一个坐标，在第二次点击时完成绘制。
- 在创建 ol.MapBrowserEvent 对象时，需要确保各个属性的值正确。 尤其是 pixel 和 coordinate 属性，需要根据鼠标的实际位置进行计算。
总结
通过使用 appendCoordinates() 方法和模拟 ol.MapBrowserEvent 对象，可以在自定义事件处理程序中触发 OpenLayers 地图的 "click" 和 "pointermove" 事件，从而实现多个地图之间的实时同步测量。 在实际应用中，需要根据具体情况进行调整和优化，并注意 OpenLayers API 的变化。
