[英]How to get image source from geojson openlayers3
需要为json点传递不同的不同图像。 如何从json中提供图像src url
矢量图层和样式
vector = new ol.layer.Vector({
source: new ol.source.Vector({
projection : 'EPSG:4326',
format: new ol.format.GeoJSON(),
url: 'resources/multipoint.geojson'
}),
style: styleFunction1
});
var styleFunction1 = function(feature) {
return styles[feature.getGeometry().getType()];
};
var styles = {
'Point': [
new ol.style.Style({
image: new ol.style.Icon({
src: 'resources/icon.png',
anchor: [0.5, 1]
})
})],
'LineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'gray',
width: 5
})
})]
};
JSON
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Missing Person",
"ref":" Ref 5684"
},
"geometry": {
"type": "Point",
"coordinates": [-0.12755, 51.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted",
"category": "cat1",
"ref":" Ref 56124"
},
"geometry": {
"type": "Point",
"coordinates": [-0.12755, 52.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Missing 1",
"ref":" Ref 1684"
},
"geometry": {
"type": "Point",
"coordinates": [-1.12755, 52.507222]
}
}
]
}
如何从json传递src: 'resources/Blue_pointer.png',
将您的样式功能更改为:
var styleFunction1 = function(feature) {
var styles = {
'Point': [
new ol.style.Style({
image: new ol.style.Icon({
src: feature.get('src'),
anchor: [0.5, 1]
})
})],
'LineString': [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'gray',
width: 5
})
})]
};
return styles[feature.getGeometry().getType()];
};
并为您的JSON添加图像源:
{
"type": "Feature",
"properties": {
"name": "Missing Person",
"ref":" Ref 5684",
"src": "resources/some-img.png"
},
"geometry": {
"type": "Point",
"coordinates": [-0.12755, 51.507222]
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.