將事件點擊添加到標記openlayers中

Question

美好的一天，我正在嘗試將事件添加到地圖上動態編程的標記中。 標記確實會顯示在屏幕上，但是當您單擊以顯示div而不是僅顯示與書簽相關的div時，請單擊屏幕上的所有div來激活事件。

創建標記的位置是在調用函數crearMarcadores並發送坐標和變量cc以用於div的ID時。

var centro = ol.extent.getCenter(boundingBox);
crearMarcadores(centro, cc);

如果您正確創建了div，就我所知，每個標記必須是一個div。

我幾乎可以確定的地方是：

  var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature, layer) {
            return feature;
  });

由於它執行了foreach，因此只應返回標記功能。 但是我不知道如何僅在當前標記中運行它。 盡管我發現的所有示例都與foreach有關。

對於您的寶貴幫助，非常感謝。

  var iconFeature = new ol.Feature({ geometry: new ol.geom.Point([-90.204114, 13.866291]), name: 'nombre', population: 4000, rainfall: 500 }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png' })) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var layer = new ol.layer.Vector({ /*layer con los poligonos*/ source: new ol.source.Vector() }) function crearMarcadores(centroPoligono, CentroCosto) { var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(centroPoligono), name: CentroCosto, population: 4000, rainfall: 500 }); vectorSource.addFeature(iconFeature); iconFeature.setStyle(iconStyle); //------------start creation popup var div = document.createElement('div'); div.setAttribute("id", CentroCosto); div.setAttribute("style", "width: 580px; height: 400px; float: left"); document.body.appendChild(div); var element = document.getElementById(CentroCosto); var popup = new ol.Overlay({ element: element, positioning: 'bottom-center', stopEvent: false }); map.addOverlay(popup); //------------end creation popup // --------------display popup on click map.on('click', function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { var geometry = feature.getGeometry(); var coord = geometry.getCoordinates(); popup.setPosition(coord); $(element).popover({ 'placement': 'top', 'html': true, 'content': feature.get('name') }); $(element).popover('show'); } else { $(element).popover('destroy'); } }); //---------------end display popup on click } //termina funcion crearMarcadores function generarMapas() { var FechaInicial = ''; var FechaFinal = ''; var Finca = ''; $.ajax({ type: "POST", url: "FrmMapaAvanceRiego.aspx\\/FillMapas", data: '{FechaInicial: "' + FechaInicial + '", FechaFinal: "' + FechaFinal + '", Finca: "' + Finca + '"}', contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { var data = JSON.parse(msg.d); coordenadas = []; cc = []; $.each(data, function(i, item) { coordenadas[i] = item.Coordenadas; cc[i] = item.CentroDeCostoLote; crearPoligonos(coordenadas[i], cc[i]); }); }, error: errores }); } function errores(msg) { alert('Error: ' + msg.responseText); } function crearPoligonos(coordenada, cc) { //console.log(coordenada); console.log(cc); var coordenadas = coordenada.split(' ') // Separamos por espacio .map(function(data) { var info = data.split(','), // Separamos por coma coord = { // Creamos el obj de coordenada lat: parseFloat(info[1]), lng: parseFloat(info[0]) }; return coord; }); var parserJSTS = new jsts.io.OL3Parser(); var poly = new ol.Feature({ geometry: new ol.geom.Polygon([coordenadas.map(function(_ref) { var lng = _ref.lng, lat = _ref.lat; return [lng, lat]; })]) }); var boundingBox = poly.getGeometry().getExtent() var polybbox = new ol.Feature({ geometry: ol.geom.Polygon.fromExtent(boundingBox) }) var [xmin, ymin, xmax, ymax] = boundingBox var porcentaje = 0.50 var newXmax = xmin + ((xmax - xmin) * porcentaje) var newBoundingBox = [xmin, ymin, newXmax, ymax] var polybbox50 = new ol.Feature({ geometry: ol.geom.Polygon.fromExtent(newBoundingBox) }) var polybbox50jsts = parserJSTS.read(polybbox50.getGeometry()) var polyjsts = parserJSTS.read(poly.getGeometry()) var intersectionJSTSGeometry = polyjsts.intersection(polybbox50jsts) var intersectionGeometry = parserJSTS.write(intersectionJSTSGeometry) var newPoly = new ol.Feature({ geometry: intersectionGeometry }) //console.log(boundingBox) newPoly.setStyle(new ol.style.Style({ fill: new ol.style.Fill({ color: '#02ABFF' }) })) // Descomentar para ver los bounding boxes // layer.getSource().addFeature(polybbox) // layer.getSource().addFeature(polybbox50) layer.getSource().addFeature(poly) layer.getSource().addFeature(newPoly) var centro = ol.extent.getCenter(boundingBox); //console.log(centro); crearMarcadores(centro, cc); } //------------start creation map var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'AudCyoI6al0eAZmQhwmI1IG9AOdGH8DHHk6PsiGta1faEACulxawFU9KV-XAvZ8f', imagerySet: 'AerialWithLabels' }) }), layer, vectorLayer ], target: 'map', controls: ol.control.defaults({ attributionOptions: ({ collapsible: false }) }), view: new ol.View({ center: [-90.365730, 13.954185], zoom: 9, projection: 'EPSG:4326' }) }); // --------------end creation map 

 <link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet"/> <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script> <div id="map" class="map" tabindex="0"> </div> <div id="popup"></div> 

Answer 1

forEachFeatureAtPixel （ api doc ）會遍歷該位置每個圖層的每個要素。 因此，您可能會從其他層獲得意外結果。

但是該函數還讓您定義一個layerFilter，它決定是否要包含一個圖層。

例：

map.addLayer(new ol.layer.Vector({
  source: vectorSource1,
  myKey: 'magic' // arbitrary property to distinguish between the layers
});

map.addLayer(new ol.layer.Vector({
  source: vectorSource2,
  myKey: 'someotherlayer'
});

// this only gives back the first feature at this position
// on the layer with the property `myKey` equal to `'magic'`
const feature = map.forEachFeatureAtPixel(
  pixel,
  function(someFeature){ return someFeature; }, // stop at the very first feature
  {
    layerFilter: function(layer) { return layer.get('myKey') === 'magic'; }
  }
);