如何使用Openlayer和geoJson文件更改地图中图标的样式

Question

我在使用react-openlayers时遇到问题。 我正在尝试从GeoJson文件中读取功能->属性中的IconPath，以便能够在地图中显示每个带有其自身图标的标记。

从Hiram Hackenbacker的帖子中 ，我知道可以使用预定义的function iconStyleFunc() 。 像这样 ：

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: iconStyleFunc()
});

您知道我如何使用此功能吗？

谢谢

Answer 1

iconStyleFunc不是预定义的， style可以设置为开发人员定义的任何函数，在这种情况下，它称为iconStyleFunc 。 除非函数总是返回相同的结果style否则将为函数设置结果，而不是为函数的结果，即

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: iconStyleFunc
});

在该问题中，功能具有IconPath属性，并且函数创建了适合该风格的样式。 与其在每次调用中创建新样式，不如根据用于创建样式的属性来缓存样式，效率更高。 参见以下示例https://openlayers.org/en/v4.6.5/examples/igc.html

因此，对图标样式问题的改进答案是

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;

}