在 OpenLayers 应用中，有时我们需要在非 OpenLayers 地图容器（例如，一个普通的 HTML div 元素）上进行交互，并希望这些交互能够同步更新 OpenLayers 地图上的绘制，特别是使用 ol.interaction.Draw 进行测量时。直接在非 OpenLayers 容器上触发 OpenLayers 地图的 click 或 pointermove 事件是不可能的，因为 OpenLayers 的事件监听机制只作用于其自身的地图容器。但是，我们可以通过其他方式来模拟这些事件，从而实现跨容器的交互同步。
解决方案：模拟 OpenLayers 事件
以下代码展示了如何通过自定义事件处理，以及调用 OpenLayers 内部方法来模拟 click 和 pointermove 事件，以实现跨容器的交互同步。
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;
})
})代码解释：
-
click 事件处理：
- 通过 appendCoordinates() 方法向 ol.interaction.Draw 对象添加坐标，从而模拟点击事件。但是，此方法对于 "Circle" 类型的几何图形可能不适用。因此，需要针对 "Circle" 类型添加额外的逻辑处理。
-
pointermove 事件处理：
- 由于无法直接触发 ol.Map 的 pointermove 事件，需要找到 ol.interaction.Draw 中处理鼠标移动的内部方法。通过分析 OpenLayers 的源码，可以找到 handlePointerMove_() 方法。
- handlePointerMove_() 方法需要一个 ol.MapBrowserEvent 对象作为参数。因此，需要手动创建一个包含 map、pixel、coordinate、originalEvent 和 frameState 属性的对象，并将其传递给 handlePointerMove_() 方法。
-
双击事件处理：
- 通过this.draw.removeLastPoint()移除最后一个点，并通过this.draw.finishDrawing()结束绘制。
注意事项：
- 内部方法的使用： handlePointerMove_() 是 OpenLayers 的内部方法，其实现可能会在未来的版本中发生变化。因此，在使用此方法时，需要密切关注 OpenLayers 的更新，并及时调整代码。
- 坐标转换： 在将坐标传递给 OpenLayers 之前，需要确保坐标系与 OpenLayers 地图的坐标系一致。可以使用 ol.proj.transform() 方法进行坐标转换。
- 性能优化： 频繁调用 handlePointerMove_() 方法可能会影响性能。因此，需要根据实际情况进行性能优化，例如，降低事件触发频率。
总结
通过自定义事件处理和调用 OpenLayers 内部方法，我们可以实现在非 OpenLayers 地图容器上进行交互，并同步更新 OpenLayers 地图上的绘制。这种方法可以扩展 OpenLayers 的应用场景，使其能够与其他 JavaScript 库或框架更好地集成。但是，需要注意内部方法的使用风险，并及时关注 OpenLayers 的更新。
