在 angular2-openlayers 中使用点击事件来显示点击标记的细节答案

【问题标题】：Use click event in angular2-openlayers to show details of clicked marker在 angular2-openlayers 中使用点击事件来显示点击标记的细节
【发布时间】：2017-08-17 20:36:22
【问题描述】：

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

正如您在模板中看到的那样，我有一个对象数组（称为“活动”）并对其进行迭代以生成每个对象的特征（带有图标）。这工作得很好。现在我想检测用户是否单击标记以在下部 div 中显示有关它的详细信息。我尝试使用暴露的“onClick”事件，但这只有在我将它放在 aol-map-directive 上时才有效。我希望有这样的东西：

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

然后我可以在我的模块中抓取活动对象并用它做一些事情。但不幸的是，这不起作用。有没有什么方法可以达到检测点击某个功能的目的？

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

非常感谢任何提示。

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

【问题讨论】：

标签： angular openlayers-3 angular-openlayers

【解决方案1】：

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

可以给地图元素添加点击事件

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

你应该可以使用点变量来提取你想要显示的细节

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

对我很有用！！您还节省了我调查单击功能 (onSingleClick) 时不执行拖放事件的时间。谢谢！！

【解决方案3】：

角度中没有(onClick) 事件。如果您想检测/触发对元素的点击，请使用(click) 事件。

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

还有……

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

【讨论】：

当然，这是我尝试的第一件事，但这不起作用。我会更新我的问题以明确我的尝试。在检查器中，似乎 aol-feature 标签没有任何我可以检测到点击的区域。所以必须有一个特定于库的方法来做到这一点。