如何在openlayers v4.6.5上创建带向量的弹出窗口

Posted 2021-04-15

我正在使用openlayers，我创建了许多矢量图层，但我想将click事件放在一次矢量图层上。

function add_map_point(lat, lng) {
    var vectorLayer = new ol.layer.Vector({
        source:new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
            })]
        }),
        style: new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 0.5],
                anchorXUnits: "fraction",
                anchorYUnits: "fraction",
                src: "{{asset('marker.png')}}",
            }),
        })
    });
    map.addLayer(vectorLayer);
}

function map_points(){
    @foreach($data as $c)
        add_map_point({{$c->latitude}}, {{$c->longitude}}); 
    @endforeach    
}

答案

请尝试添加到您的功能：

vectorLayer.set("name", "myLayer");
map.on("click", function(evt) {
   var feature = map.forEachFeatureAtPixel(evt.pixel,
       function(feature, layer) {
          if (feature) {
             console.log(layer.get("name") + " was clicked.");
        }
     });
  });