0

Question

openlayers version: 6.4.3

Add a feature which is created by a SVG string to map,then click the the feature on the map, but can not get the feature from the callback function. However, i make a feature with a nomarl image url, i can get the featurn by click feature on map.

how can I resolve the problem

code

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
});

result

lewis
  • 1
  • 2

1 Answers1

0

The SVG needs width and height to work with OpenLayers hit detection

const src =
  `data:image/svg+xml;utf8,` +
  `<svg width="90" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" >` +
  `<path d='M0,0 L0,60 L90,30 z'/>` +
  "</svg>";
Mike
  • 16,042
  • 2
  • 14
  • 30
  • The SVG icon can also show on the map without height and width. Is it a bug of openlayers? – lewis Sep 17 '21 at 02:58
  • Without knowing the correct size it would be difficult to analyse the pixels to find the non-transparent regions where hit detection should work. – Mike Sep 17 '21 at 12:46