[英]How can I change the style of the icons in a map with openlayer and a geoJson file
I have an issue using react-openlayers. 我在使用react-openlayers时遇到问题。 From a GeoJson file I'm trying to read the IconPath in features -> properties to be able to display every marker with its own icon in the map.
我正在尝试从GeoJson文件中读取功能->属性中的IconPath,以便能够在地图中显示每个带有其自身图标的标记。
From Hiram Hackenbacker post , I understand that I can use a predefined function iconStyleFunc()
. 从Hiram Hackenbacker的帖子中 ,我知道可以使用预定义的
function iconStyleFunc()
。 like this : 像这样 :
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyleFunc()
});
Do you know how I can use this function ? 您知道我如何使用此功能吗?
Thank you 谢谢
iconStyleFunc
isn't predefined, style
can set to any function which the developer defines, in that case it was called iconStyleFunc
. iconStyleFunc
不是预定义的, style
可以设置为开发人员定义的任何函数,在这种情况下,它称为iconStyleFunc
。 Unless the function always returns the same result style
is set to the function, not the result of the function, ie 除非函数总是返回相同的结果
style
否则将为函数设置结果,而不是为函数的结果,即
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyleFunc
});
In that question the feature had an IconPath
property and the function created a style appropriate for that. 在该问题中,功能具有
IconPath
属性,并且函数创建了适合该风格的样式。 Instead of creating a new style on every call it is more efficient to cache styles based on properties used to create them. 与其在每次调用中创建新样式,不如根据用于创建样式的属性来缓存样式,效率更高。 See this example https://openlayers.org/en/v4.6.5/examples/igc.html
参见以下示例https://openlayers.org/en/v4.6.5/examples/igc.html
So an improved answer to the question on icon styles would be 因此,对图标样式问题的改进答案是
var iconStyleCache = {};
function iconStyleFunc(feature) {
var zIndex = 1;
var iconName = feature.get("IconPath") || "pinother.png";
var iconStyle = iconStyleCache[iconName];
if (!iconStyle) {
iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 36],
anchorXUnits: "fraction",
anchorYUnits: "pixels",
opacity: 1,
src: "images/" + iconName,
zIndex: zIndex
})),
zIndex: zIndex
});
iconStyleCache[iconName] = iconStyle;
}
return iconStyle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.