Javascript 使用OpenLayers，如何在单个图层上显示不同功能的不同图标？

首先，作为一个整体，我对Openlayers/JS还不熟悉，而且对编程总体上还缺乏经验，所以我的代码可能存在其他我不知道的问题

我使用的是最新版本的Openlayers（5.3.0）

我的程序目前通过Ajax传递GeoJson格式的数据，以显示在Openlayers地图上。它为要显示的要素创建地图、视图和图层。当我按下页面上的“Go”按钮时，功能将成功加载到地图上。在我的例子中，这些特征只是简单的点，带有纬度/经度，使用png标记进行可视化。GeoJson在被序列化并发送到我的页面上的JS进行反序列化之前，在C#中看起来像这样：

{{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.549077,
          53.800755
        ]
      },
      "properties": {
        "GPSKey": 1,
        "Latitude": 53.800755,
        "Longitude": -1.549077,
        "TimeAdded": "2019-01-15T12:10:16",
        "IconPath": "pinred.png"
      },
      "ID": 1,
      "IconPath": null
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.545077,
          53.800755
        ]
      },
      "properties": {
        "GPSKey": 2,
        "Latitude": 53.800755,
        "Longitude": -1.545077,
        "TimeAdded": "2019-01-15T12:10:16",
        "IconPath": "pinred.png"
      },
      "ID": 2,
      "IconPath": null
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.524043,
          53.773222
        ]
      },
      "properties": {
        "GPSKey": 3,
        "Latitude": 53.773222,
        "Longitude": -1.524043,
        "TimeAdded": "2019-01-15T12:10:16",
        "IconPath": ""
      },
      "ID": 3,
      "IconPath": null
    }
  ]
}}

JS接收上述序列化的内容，并使用此代码将其添加到图层中以供查看：

var geojsonFormat = new ol.format.GeoJSON({
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:3857"
    });//creates a format definition

    jsonDecoded = JSON.parse(result); /

    if (jsonDecoded.features.length > 0) {
        for (var i = 0; i < jsonDecoded.features.length; i++) {
            vectorSource.addFeature(geojsonFormat.readFeature(jsonDecoded.features[i], { featureProjection: "EPSG:3857" }));

        }

    }/

iconStyleFunc（）如下所示：

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

function iconStyleFunc() {

    var zIndex = 1;

    var iconName = null;

    if (iconName == null) {
        iconName = "pinother.png"
    };


    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
    })];
return iconStyle;

这适用于使用图标“pinother.png”设置所有功能的样式。当我按下按钮时，在地图上显示点没有问题

我想做的是根据每个功能的GeoJson“iconpath”属性中的图标路径应用样式，这样任何具有“pinred.png”的功能都会使用它，而不是默认的“pinother.png”，等等，我将来可能需要添加各种图标

---

我不确定如何读取每个特性的这个属性，以及如何在样式功能中最好地实现它。我设想的方法是使用iconStyleFunc（）遍历功能，读取每个功能的IconPath属性，将该值附加到iconStyleFunc（）中的“src/images/”路径，并适当设置功能的样式

使用style函数的feature参数，可以获得该特性的属性

function iconStyleFunc(feature) {

    var zIndex = 1;

    var iconName = feature.get("IconPath") || "pinother.png";

    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
    })];
return iconStyle;

---

谢谢你，迈克！我认为我把事情复杂化了，并且试图编写巨大的函数来迭代每个特性，并在Openlayers已经内置了样式的情况下应用样式。我想我必须在Vectorlayer“Style”属性中将功能显式地传递给iconStyleFunc，但只需调用iconStyleFunc就足以让它工作。我不明白您是如何传递功能变量的。你能提供更多的信息吗？因为我在这里看到的会使每个图标看起来都一样，不是吗？它使用功能的

IconPath

属性来生成每个功能的特定图标，