javascript - 如何使用 openlayer 和 geoJson 文件更改 map 中图标的样式

Question

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

来自 Hiram Hackenbacker post ，我知道我可以使用预定义的函数 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;

}