代码之家 › 专栏 › 技术社区 › Vetemi

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

angular-openlayers openlayers-3 angular

Vetemi · 技术社区 · 7 年前

我不熟悉角度层和开放层(3)。我找到了 this 开源库,将Openlayers封装在Angular中。

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

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

正如您在模板中看到的,我有一个对象数组(称为“活动”),并对其进行迭代,为每个对象生成一个特征(带有一个图标)。这很好用。现在,我想检测用户是否单击标记以在较低的分区中显示有关它的详细信息。我尝试使用公开的“onClick”事件,但这仅在我将其放置在aol map指令上时有效。我希望有这样的东西:

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

我曾想过使用aol控制指令,我会用它来代替aol功能指令,但我认为这不是正确的方式,不是吗?

如有任何提示,我们将不胜感激。

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

3 回复 | 直到 7 年前

user1494917 7 年前

晚了几天,但这可能会有所帮助。。。。

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

然后在组件中。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;
 });

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

Esteban 7 年前

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

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

-1

FAISAL 7 年前

没有 (onClick) (click) 事件

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

和

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