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>

正如您在模板中看到的，我有一个对象数组（称为＆＃39; Activity＆＃39;）并对其进行迭代以生成每个对象的特征（带有图标）。这完全没问题。现在，我想检测用户是否点击了标记，以便在较低的div中显示有关它的详细信息。我试图使用暴露的＆＃39; onClick＆＃39;事件但这只有在我将它放在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;
     })
   }

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

3 个答案: