Question

我没有像此image所示那样为每个线串分配名称，而是试图在用户将鼠标悬停在字符串上时显示工具提示。我目前正在使用ngx-openlayers显示行的名称。

  lines : Array<{ a: number; b: number; c: number;d: number;id: string;name: string, width: number}> = 
  [
      {a:11.5820,b:48.1351,c:13.388866,d:52.517071,id:"line-1",name:"line-1", width:19}
  ];

        <aol-feature *ngFor="let l of lines" [id]="l.id">  
          <aol-geometry-linestring >
            <aol-collection-coordinates
                [coordinates]="[[l.a, l.b],[l.c, l.d]]"
                [srid]="'EPSG:4326'">
            </aol-collection-coordinates>
        </aol-geometry-linestring>
        <aol-style>
            <aol-style-stroke [width]="l.width" [color]="'yellow'"></aol-style-stroke>
            <aol-style-text [text]="l.id" [rotation]="'5'" [textBaseLine]="'middle'" [textAlign]="'center'"></aol-style-text>
        </aol-style>
        </aol-feature>

有人可以帮我吗？

谢谢。

更新：我设法根据我分配的内容获取行的ID。现在，我想在用户每次悬停到线串时对功能进行提示。

displayTooltip(evt) {
console.log(evt);
const map = evt.map;
const p = map.forEachFeatureAtPixel(evt.pixel,
 function(feature, layer) {
  console.log("got feature" + feature.getId());
  return feature;

});

}

这里是我所做的https://angular-npbcjc.stackblitz.io/的链接

（ngx-openlayers）-悬停在线串上时显示工具提示

0 个答案: