Angular OpenLayers 点击事件功能

Question

所以我制作了一张地图，将停车点显示为特征。现在我很想为这些功能添加一个点击功能，这样当它被点击时我会显示一个弹出窗口，其中包含来自该停车场的数据。

我在网上搜索了如何执行此操作，但找不到有关如何向地图项添加点击事件的任何信息，我所能找到的只是如何向整个地图添加点击事件。我也搜索了 OpenLayers 文档，但也搜索得不多。

export class MapComponent implements OnInit {
  map;
  testp;
  vectorSource;
  vectorLayer;
  rasterLayer;
  //features: Feature[];

  constructor(
    private _pds: ParkingDataService
  ) { }

  ngOnInit(): void {
    let parkingdata = new Array();

    this._pds.allParkings$.subscribe((parkings: Parking[])=>{
      parkings.forEach(parking => {

        let ftre: Feature = new Feature({
          geometry: new Point(fromLonLat([parking.longtitude, parking.latitude]))
        });

        ftre.setStyle(new Style({
          image: new Icon(({
            color: '#8959A8',
            crossOrigin: 'anonymous',
            src: 'assets/park.svg',
            imgSize: [25, 25]
          }))
        }));

        parkingdata.push(ftre)
      });
      this.vectorSource = new VectorSource({
        features: parkingdata
      });

      this.vectorLayer = new VectorLayer({
        source: this.vectorSource
      });
      this.initializeMap();
    })

    console.log(parkingdata)


  }

  initializeMap(){
    this.map = new Map({
      target: 'map',
      layers: [ new TileLayer({
        source: new OSM()
      }), this.vectorLayer ],
      view: new View({
        center: fromLonLat([3.7219431, 51.048919]),
        zoom: 15,
      })
    });
  }
}

Answer 1

您可以使用地图的 click 事件或 OL 交互（例如，如果您希望突出显示点击的功能）。

Answer 2

您需要 select 互动。考虑这种交互如何工作的关键是它不附加到功能上。相反，它附加到整个地图。当用户点击某物触发它时，您会得到一个事件对象，其中包含与该点击相关联的所有功能的列表（即，在它下面）。

它的文档在这里：

https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select.html

这里有一个很好的使用示例：

https://openlayers.org/en/latest/examples/select-features.html?q=select

该示例有点复杂，因为它向您展示了如何通过单击、悬停等操作 selection。因此需要一些额外的代码来处理所有这些操作。我在这里提取了一些有趣的部分，以便更简洁地概述您的需求：

// Import the interaction, not sure if this is the correct way to do it in Angular, so maybe adjust this for your setup
import Select from 'ol/interaction/Select';

// The following code can go in your initialiseMap, after you've created the map:

// Create a select interaction working on "singleclick" (the default)
let selectSingleClick = new Select();

// Add it to your map
this.map.addInteraction(select);

// Here's the event handler that will give you the selected features
select.on('select', function(e) {
    console.log(e.target.getFeatures())
})

Angular OpenLayers 点击事件功能

Angular OpenLayers click event feature

openlayers

typescript

angular