如何使用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;

}