Klicken Sie auf Ereignis in angular2-openlayers, um Details der angeklickten Markierung anzuzeigen

Question

Ich bin neu in Angular und Openlayers (3). Ich fand this Open-Source-Bibliothek, die Openlayers in Angular verpackt.

Meine Frage ist sehr einfach. Ich möchte das Ereignis erkennen, wenn ein Benutzer auf eines der generierten Features klickt, um die Details des angeklickten Features anzuzeigen.

HTML-Vorlage:

<aol-map [width]="'100%'" [height]="'100%'"> 
    <aol-interaction-default></aol-interaction-default> 
    <aol-view [zoom]="zoom"> 
     <aol-coordinate [x]="7.1756" [y]="51.2640" [srid]="projection"></aol-coordinate> 
    </aol-view> 
    <aol-layer-tile [opacity]="opacity"> 
    <aol-source-osm></aol-source-osm> 
    </aol-layer-tile> 
    <aol-layer-vector [opacity]="opacity"> 
     <aol-source-vector> 
     <aol-feature *ngFor="let activity of activities" (click)="onSelected(activity)"> 
       <aol-geometry-point> 
        <aol-coordinate [x]="activity.location.x" [y]="activity.location.y" [srid]="projection"></aol-coordinate> 
       </aol-geometry-point> 
      <aol-style> 
       <aol-style-icon 
        [src]="'assets/marker.png'" 
        [anchor]="[0.5, 1]" 
        [anchorXUnits]="'fraction'" [anchorYUnits]="'fraction'" 
        [scale]="0.1" 
        [anchorOrigin]="'top-left'"> 
       </aol-style-icon> 
      </aol-style> 
     </aol-feature> 
     </aol-source-vector> 
    </aol-layer-vector> 
</aol-map> 
<div *ngIf="selectedActivity"> 
<h2>{{selectedActivity.name}} details!</h2> 
<div><label>location: </label>{{selectedActivity.location.x}},{{selectedActivity.location.y}}</div> 
</div> 

Wie Sie in der Vorlage sehen können, habe ich eine Reihe von Objekten (genannt ‚Aktivität‘) und durchlaufen sie eine Funktion für jedes Objekt zu erzeugen (mit einem Symbol). Das funktioniert ganz gut. Jetzt möchte ich erkennen, ob ein Benutzer auf einen Marker klickt, um Details darüber im unteren Teil anzuzeigen. Ich habe versucht, das freigelegte 'onClick' Event zu verwenden, aber das funktioniert nur, wenn ich es auf die aol-map-Direktive lege. Ich wünschte, etwas wie das zu haben:

Dann könnte ich das Aktivitätsobjekt in meinem Modul ergreifen und etwas damit machen. Das klappt leider nicht. Gibt es eine Möglichkeit, das Ziel zu erreichen, einen Klick auf ein bestimmtes Merkmal zu erkennen?

Ich dachte an die AOL-Control-Direktive, die ich anstelle der AOL-Feature-Direktive verwenden würde, aber ich denke, das wäre nicht der richtige Weg, oder?

Alle Hinweise werden sehr geschätzt.

Bearbeiten: Die HTML-Vorlage aktualisiert, um meine Absicht zu klären.

Answer 1

Ein paar Tage zu spät, aber das könnte helfen ....

Sie ein Click-Ereignis

auf das Kartenelement hinzufügen

Dann in Ihrer Datei component.ts

mapOnClick(evt) { 
const map = evt.map; 
// this bit checks if user clicked on a feature 
const point = map.forEachFeatureAtPixel(evt.pixel, 
    function(feature, layer) { 
    return feature; 
}); 

Sie sollten in der Lage sein, den Punkt Variable verwenden, um die Details, die Sie diese anzeigen möchten extrahieren

Answer 2

Es gibt kein (onClick) Ereignis in Winkel. Wenn Sie einen Klick auf ein Element erkennen/auslösen möchten, verwenden Sie das Ereignis (click).

<aol-feature *ngFor="let activity of activities" 
         (click)="onSelected(activity)"> 

und ...

<aol-map [width]="'100%'" [height]="'100%'" 
        (click)="onTest()"> 

Answer 3

Versuchen:

<aol-map (onSingleClick)="mapOnClick($event)"> 

Und die Funktion mapOnClick() sollte jetzt

arbeiten

mapOnClick(evt) { 
    const map = evt.map; 
    //this bit checks if user clicked on a feature 
    const point = map.forEachFeatureAtPixel(evt.pixel, 
    function(feature, layer) { 
     return feature; 
    }) 
    }