Question

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

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

我正在旋转示例，以使其尽可能地与Angular友好，并避免使用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的popover方法进行了快速尝试，并且在通过在地图上获取位置将弹出窗口添加到单个标记的情况下，该方法很有效。

我不知道您到底想要实现什么，但是如果您想通过显示多个标记最终使用jQuery，则可以调整此代码。

我使用了Angular 6和OpenLayers 5。

ts

undefined

index.html

...
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');
   });
 }

angular.json

 <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>

Demo

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

1 个答案: