Pregunta

versión de capas abiertas: 6.4.3

Agregue una función creada por una cadena SVG al mapa, luego haga clic en la función en el mapa, pero no puede obtener la función de la función de devolución de llamada. Sin embargo, creo una función con una URL de imagen nomarl, puedo obtener la característica haciendo clic en la función en el mapa.

como puedo resolver el problema

código

 import 'ol/ol.css'; import Feature from 'ol/Feature'; import Map from 'ol/Map'; import Point from 'ol/geom/Point'; import TileJSON from 'ol/source/TileJSON'; import VectorSource from 'ol/source/Vector'; import View from 'ol/View'; import {Icon, Style} from 'ol/style'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; const iconFeature = new Feature({ geometry: new Point([0, 0]), name: 'Null Island', population: 4000, rainfall: 500, }); const src = `data:image/svg+xml;utf8,` + `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >` + `<path d='M0,0 L0,60 L90,30 z'/>` + "</svg>"; const iconStyle = new Style({ image: new Icon({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src, }), }); iconFeature.setStyle(iconStyle); const vectorSource = new VectorSource({ features: [iconFeature], }); const vectorLayer = new VectorLayer({ source: vectorSource, }); const rasterLayer = new TileLayer({ source: new TileJSON({ url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1', crossOrigin: '', }), }); const target = document.getElementById('map'); const map = new Map({ layers: [rasterLayer, vectorLayer], target: target, view: new View({ center: [0, 0], zoom: 3, }), }); map.on("click", function (evt) { const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); // when i click the feature area,i can't get the feature console.log(feature) //undefined });

resultado