html - (ngx-openlayers) - 悬停在线串时显示工具提示

Question

如图所示，我没有为每个线串分配名称，而是尝试在用户将鼠标悬停在字符串上时显示工具提示。我目前正在使用 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/

标签： htmlcssangulartypescriptopenlayers