1

我是 Angular 和 Openlayers (3) 的新手。我找到了这个在 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)">

Then I could grab the activity object in my module and do something with that. But this doesn't work unfortunately. Is there any way to achieve the goal of detecting a click on a certain feature?

I thought of using the aol-control-directive, which I would use in replacement of the aol-feature-directive but I think that wouldn't be the right way, would it?

Any hints are highly appreciated.

Edit: Updated the HTML template to clearify my intension.

4

3 回答 3

2

A few days late but this might help....

You can add a click event to the map element 

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

Then in your component.ts file use 

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

You should be able to use the point variable to extract the details you want to display

于 2017-08-28T05:09:18.317 回答
1

Try this:

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

And the function mapOnClick() should now work

   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;
     })
   }
于 2017-12-18T19:45:07.550 回答
-1

There is no (onClick) event in angular. If you want to detect/fire a click on an element, use the (click) event. 

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

and ... 

 <aol-map [width]="'100%'" [height]="'100%'" 
                  (click)="onTest()">
于 2017-08-17T21:03:17.417 回答