单击打开图层版本5的标记上的功能 [英] Click feature on marker of open layers version 5

问题描述

我正在使用开放层库版本5.我需要标记上的onClick事件来执行一些业务逻辑.任何人都可以帮助我，谢谢.我已经尝试了所有代码和摘要.我正在使用该库来响应js.

import Feature from "ol/Feature";
  import point from "ol/geom/Point"
  import Style from "ol/style/Style";
  import Icon from "ol/style/Icon";

renderMap = (lat = 24.8856802, lng = 67.0830459) => {
    console.log(lat, lng);
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: fromLonLat([lng, lat]),
        zoom: 17,

      })
    });


    this.makeMarker(24.8856802, 67.0830459, 0);


  }
//here is my marker function 
makeMarker = (lat, lng, index) => {
    let marker = new Feature({
      geometry: new point(fromLonLat([lng, lat])),

    });
    marker.setStyle(new Style({
      image: new Icon(({
        // crossOrigin: 'anonymous',
        src: require("../../assets/images/location-pin.png"),
    enter code here`enter code here`


      }))
    }));
    let vectorSource = new Vector({ features: [marker] })
    var markerVectorLayer = new LVector({
      source: vectorSource,


    });
    this.map.addLayer(markerVectorLayer);
    marker.on("click", () => {
      alert()
    })



  }

推荐答案

功能没有点击事件.与此示例类似， https://openlayers.org/en/latest/examples/icon. html ，您将需要侦听地图上的点击，检查点击像素处是否有某个功能，并且该功能是您的标记

Features don't have click events. Similar to this example https://openlayers.org/en/latest/examples/icon.html you will need to listen for click on the map, check if there is a feature at the click pixel and also that feature is your marker

  map.on('click', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature) {
        return feature;
      });
    if (feature === marker) {

这篇关于单击打开图层版本5的标记上的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！