Incorporating OpenLayers into Angular2, I successfully displayed a custom SVG-image as a background map. The zoom and scroll functionalities work flawlessly across the map.
However, upon implementing Features (also SVG) and placing them in a separate Vector-Layer above the map, I encountered an issue where the features resize strangely when zooming.
While zooming out, the Features enlarge, and while zooming in, they shrink. I desire for them to maintain a consistent size, so that they decrease in size when zooming out (similar to static content on the map).
I attempted using an additional style-function and experimented with recalculating the scale of the feature's current style. Unfortunately, I was unsuccessful in resolving this issue.
Therefore, my query is: How can I overlay another Layer with Features above an existing layer and ensure that everything shrinks in size when zooming out?
Am I making an error somewhere? Do I require Projections for this? As someone relatively new to OpenLayers, any guidance would be appreciated.
Thank you in advance!
Here is a minimal code example: The SVG-Points increase in size continuously when zooming out (similar issue to the one demonstrated in the following official OpenLayers code example: Official Code Example: When Zooming out, the marker becomes as large as a whole country or continent....
let center = ol.proj.transform([8.30368, 47.05243], 'EPSG:4326', 'EPSG:3857');
let style = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0, 0],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
src: '/assets/images/test.svg',
imgSize: [50, 50],
size: [50, 50],
scale: 1.0
})
});
let iconFeature = new ol.Feature({
geometry: new ol.geom.Point(center)
});
iconFeature.setStyle((resolution) => {
return [iconStyle];
});
this.featureArray.push(iconFeature);
let vectorSource = new ol.source.Vector({
features: this.featureArray
});
let extent = [0, 0, 1024, 968];
let projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
// load vector layer for dynamic elements
let vectorLayer = new ol.layer.Vector({
source: vectorSource,
projection: projection,
imageExtent: extent
});
this.layerArray.push(vectorLayer);
// basic setup
this.map = new ol.Map({
renderer: 'canvas',
layers: this.layerArray,
view: new ol.View({
center: center,
zoom: 16,
minZoom: 1,
maxZoom: 26,
})
});