Angular Функция события OpenLayers click

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

Вам нужно выбрать взаимодействие. Главное, что нужно думать о том, как работает это взаимодействие, - это то, что оно не привязано к этой функции. Вместо этого он прикреплен ко всей карте. Когда пользователь запускает щелчок по чему-либо, вы получаете объект события со списком всех функций, которые были связаны с этим щелчком (ie, под ним).

Документы для этого находятся здесь:

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

Вот хороший пример использования здесь:

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

Этот пример немного сложен в том смысле, что показывает, как сделать выбор одним щелчком мыши, наведением курсора и т. Д. c. Так что есть дополнительный код для работы со всем этим. Я вытащил интересные кусочки, чтобы дать вам более краткий обзор того, что вам нужно:

// 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())
})

Answer 2

Вы используете событие click карты или OL-взаимодействие (если вы, например, sh выделите выбранную функцию).