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

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

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

我考虑过使用 aol-control-directive，我会用它来替换 aol-feature-directive，但我认为那不是正确的方法，对吗？

非常感谢任何提示。

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

Answer 1

angular 中没有 (onClick) 事件。如果要 detect/fire 单击某个元素，请使用 (click) 事件。

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

和...

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

Answer 2

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

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

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

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

Use click event in angular2-openlayers to show details of clicked marker

openlayers-3

angular-openlayers

angular