Geographic Information Systems Asked on June 20, 2021
i am trying to add icons on my map using features but instead of showing the icosn i get a dot on the map in that position.
let map = new Map({
target: "map",
layers:[
new TileLayer({
source: OSM(),
})
],
view: new View({
center: [0,0],
zoom:0
})
});
let a = new Feature({
geometry: new Point([100,100]),
name: 'a',
imgSrc: "assets/arrow.png"
})
let vectorSource = new sourceLayer({
features: [a],
wrapX: false,
});
let markerVectorLayer = new vectorLayer({
source: vectorSource,
});
map.addLayer(markerVectorLayer);
try to make sure the src of image is right: just try ol.style.Icon({ src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png' }));
Answered by Simon GIS on June 20, 2021
Where did the imgSrc
property of the Feature
come from?
What works for me is (as @Mike suggested in his comment) is adding a style
to the Feature
as shown in the icon example:
let a = new ol.Feature({
geometry: new ol.geom.Point([100,100]),
name: 'a',
})
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: "data/arrow.png",
scale: 0.5
}))
});
a.setStyle(iconStyle);
let vectorSource = new ol.source.Vector({ // sourceLayer({
features: [a],
wrapX: false,
});
let markerVectorLayer = new ol.layer.Vector({ // vectorLayer({
source: vectorSource,
});
map.addLayer(markerVectorLayer);
[![screenshot of arrow on map][1]][1]
full code:
<div id="map" class="map"><div id="popup"></div></div>
<script>
let map = new ol.Map({
target: "map",
layers:[
new ol.layer.Tile({ // TileLayer({
source: new ol.source.OSM(),
})
],
view: new ol.View({
center: [0,0],
zoom:0
})
});
let a = new ol.Feature({
geometry: new ol.geom.Point([100,100]),
name: 'a',
})
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: "data/arrow.png",
scale: 0.5
}))
});
a.setStyle(iconStyle);
let vectorSource = new ol.source.Vector({ // sourceLayer({
features: [a],
wrapX: false,
});
let markerVectorLayer = new ol.layer.Vector({ // vectorLayer({
source: vectorSource,
});
map.addLayer(markerVectorLayer);
</script>
**code snippet:**
[1]: https://i.stack.imgur.com/F8l4x.png
[2]: https://i.stack.imgur.com/zehSm.png
Answered by geocodezip on June 20, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP