简体   繁体   English

Angular OpenLayers 点击事件功能

[英]Angular OpenLayers click event feature

So I made a map displaying parking points as features.所以我做了一个 map 显示停车点作为特征。 Now I would love to add a click function to the features so that when it is clicked I display a popup with the data from that parking.现在我想在功能中添加一个点击 function,这样当点击它时,我会显示一个弹出窗口,其中包含来自该停车场的数据。

I have searched online on how to do this but I cannot find any info on how to add a click event to a feature, all I can find is how to add a click event to the whole map.我在网上搜索了如何做到这一点,但我找不到任何关于如何向功能添加点击事件的信息,我只能找到如何向整个 map 添加点击事件。 I've also searched the OpenLayers docs but not a lot there either.我也搜索过 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,
      })
    });
  }
}

You either use the click event of a map or an OL-interaction (if you wish to highlight clicked feature for instance).您可以使用 map 的单击事件或 OL 交互(例如,如果您希望突出显示单击的功能)。

You need the select interaction.您需要 select 交互。 The key thing to thinking about how this interaction works is that it does not attach to the feature.考虑这种交互如何工作的关键是它不附加到功能上。 Instead it is attached to the entire map.相反,它连接到整个 map。 When it is fired by a user clicking something, you get an event object with a list of all the features that were associated with that click (ie, under it).当它被用户点击某物触发时,您会收到一个事件 object,其中包含与该点击相关联的所有功能的列表(即,在它下方)。

The docs for it are here:它的文档在这里:

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

There's a good example of using it here:这里有一个很好的例子:

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

That example is a bit complex in that it shows you how to do selection from single clicks, hovers, etc. So there's some extra code to work with all that.该示例有点复杂,因为它向您展示了如何通过单击、悬停等进行选择。因此,有一些额外的代码可以处理所有这些。 I've pulled out the interesting bits here, to give you a more concise overview of what you need:我在这里提取了一些有趣的部分,让您更简洁地了解您的需求:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM