如何在 Angular 4 中使用 OpenLayers 5 动态地将弹出窗口添加到标记中?

Question

我想知道是否有人可以引导我朝着正确的方向前进，在单击标记时动态地将弹出窗口添加到地图中。目前，OpenLayers网站上的示例一次只显示一个弹出窗口。

[http://openlayers.org/en/latest/examples/overlay.html?q=popup][1]

我正在对示例进行旋转，以使其尽可能"角度"友好并避免使用 JQuery。我不断遇到的最大的障碍是使用JQuery来完成任务，并且缺乏一个可以执行多个标记的可靠示例。

ngAfterViewInit() {
this.map.on('singleclick', (evt) => {
this.createPopup(evt);
})
}
createPopup(evt) {
const popup = new Overlay({
insertFirst: false,
element: this.popupElement.nativeElement,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -50]
});
this.map.addOverlay(popup);
const feature = this.map.forEachFeatureAtPixel(evt.pixel, (feat) => feat);
if (feature) {
const coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
this.displayPopup = true;
} else {
this.displayPopup = false;
}
}

Answer 1

我认为您附加的示例的目的是显示根据您单击的位置而不是显示的标记在地图上添加动态标记的可能性。巧合的是，它只有一个标记，你会得到弹出效果，因为它就在那里。

我不喜欢在 Angular 项目中使用 jQuery，但是，我快速尝试使用 jQuery 的弹出框方法，它适用于通过在地图上获取位置将弹出窗口添加到单个标记的情况。

我不明白你到底想实现什么，但如果你想通过显示多个标记来最终使用 jQuery，你可以调整这段代码。

我使用了Angular 6和OpenLayers 5。

TS

...
declare var $: any;
...
layer: TileLayer;
map: Map;
marker;
view: View;
vienna: Overlay;
ngOnInit() {
...
// Popup showing the position the user clicked
const popup = new Overlay({
element: document.getElementById('popup')
});
this.map.addOverlay(popup);
this.map.on('click', function(evt) {
const element = popup.getElement();
const coordinate = evt.coordinate;
const hdms = toStringHDMS(toLonLat(coordinate));
$(element).popover('dispose');
popup.setPosition(coordinate);
$(element).popover({
placement: 'top',
animation: true,
html: true,
content: '<p>The location you clicked was:</p><code>' + hdms + '</code>'
});
$(element).popover('show');
});
}

索引.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

Angular.json

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]

演示