在angular2-openlayers中使用click事件来显示点击标记的详细信息

Question

我是Angular和Openlayers的新手（3）。我找到了this开源库，它在Angular中包含了Openlayers。

我的问题很简单。我想在用户点击其中一个生成的功能时检测事件，以显示所点击功能的详细信息。

HTML模板：

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

正如您在模板中看到的，我有一个对象数组（称为“Activity”）并对其进行迭代以生成每个对象的特征（带有图标）。这完全没问题。现在，我想检测用户是否点击了标记，以便在较低的div中显示有关它的详细信息。我尝试使用暴露的'onClick'事件但这只有在我将它放在aol-map-directive上时才有效。我希望有这样的事情：

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

然后我可以抓住我的模块中的活动对象并用它做一些事情。但不幸的是，这不起作用。有没有办法实现检测某个功能点击的目标？

我想过使用aol-control-directive，我会用它代替aol-feature-directive，但我认为这不是正确的方法，不是吗？

任何提示都非常感谢。

编辑：更新HTML模板以阐明我的意图。

Answer 1

几天晚了，但这可能会有所帮助....

您可以将click事件添加到地图元素

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

然后在你的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;
 });

您应该能够使用点变量来提取要显示的详细信息

Answer 2

角度没有(onClick)事件。如果要检测/触发元素上的单击，请使用(click)事件。

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

和......

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

Answer 3

试试这个：

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

并且函数mapOnClick（）现在应该可以工作

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