Question

我正在使用开放层库版本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()
    })



  }

Answer 1

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

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

单击打开图层版本5的标记上的功能

1 个答案: