javascript - Openlayers自定义控件事件监听器获取地图
问题描述
我正在使用osm
andopenlayers
来显示两张地图。
我创建了一个自定义控件:
function getDrawPolygonControl() {
const button = document.createElement('button');
button.innerHTML = '<i class="fas fa-pen"></i>';
button.addEventListener('click', e => {
// how to get the correct map instance here????
console.log(e);
});
const element = document.createElement('div');
element.className = 'ol-draw ol-control';
element.appendChild(button);
return new ol.control.Control({element: element});
}
在我的 initMap() 函数中,我使用以下方法将其添加到相应的地图中:
const controls = [new ol.control.FullScreen(), new ol.control.Attribution(), getDrawPolygonControl()];
const map = new ol.Map({
view: view,
target: target,
controls: controls,
});
现在的问题是如何在我的 onClick 监听器中获得正确的地图实例?
解决方案
尝试更早地调用控件构造函数,以便您可以引用它:
function getDrawPolygonControl() {
const button = document.createElement('button');
button.innerHTML = '<i class="fas fa-pen"></i>';
const element = document.createElement('div');
element.className = 'ol-draw ol-control';
element.appendChild(button);
const control = new ol.control.Control({element: element});
button.addEventListener('click', e => {
console.log(control.getMap());
});
return control;
}
推荐阅读
- java - 尝试按日期查询时如何使用 Spring JPA 进行自定义查询?
- c# - 从 CMD 控制台运行已发布的 Web (C# MVC)
- python - 使用 Plotly 绘制密度直方图
- windows - 作业成功运行时出现 Rundeck 错误
- date - 在 Markdown 文本中查找和替换日期格式
- python - 如何从头开始将map和reduce函数实现为python中的递归函数?
- python - 超声波传感器不适用于树莓派
- java - 如何使用 Java 8 流对多个元素进行平面映射?
- ios - CTLine 的“光学界限”是什么?
- android - 从谷歌添加新地点SDK时的Gradle问题