從 OpenLayers 中的 GeoJSON 屬性設置圖標源

Question

我正在嘗試從一個 GeoJSON 文件中構建一個帶有 OpenLayers 的 map，其中每個點都有一個屬性 iconUrl。 我希望我的風格是指該屬性，但我無法做到。 我用 Leaflet 做到了，你可以在這里看到目標： https://idrissad.github.io/lyon_map/

這是我的 OL 代碼：

function styleFunction(feature) {
  if (feature.get('iconUrl')) {
    var iconUrl = feature.get('iconUrl');
    console.log(iconUrl);
  }
  var defaultStyle = new ol.style.Style({
   fill: new ol.style.Fill({
    color: "green"
  }),
  stroke: new ol.style.Stroke({
   color: "green",
   width: 1.2
  }),
  image: new ol.style.Icon({
   scale: 0.1,
   src: iconUrl
  })
 })return [defaultStyle]
}

和：

const data = new ol.layer.Vector({
  source: new ol.source.Vector({
   url:'data.geojson',
   format: new ol.format.GeoJSON
  }),
  style: styleFunction,
  visible: true
})

我得到的錯誤是“斷言失敗：6 => 必須提供已定義且非空的 src 或圖像。” 我嘗試了幾個選項，但沒有成功。 我的 console.log 顯示 feature.get() 工作正常，我的 url 在 var iconUrl 中。 有什么線索嗎？

Answer 1

因為你也有填充和描邊是你的風格，它也被用於多邊形嗎？ 如果其他功能沒有會導致錯誤的iconUrl 。 嘗試修改樣式 function 以便僅在有iconUrl時設置圖像部分

function styleFunction(feature) {
  var iconUrl = feature.get('iconUrl');
  var defaultStyle = new ol.style.Style({
    fill: new ol.style.Fill({
    color: "green"
  }),
  stroke: new ol.style.Stroke({
   color: "green",
   width: 1.2
  }),
  image: iconUrl ? new ol.style.Icon({
   scale: 0.1,
   src: iconUrl
  }) : undefined
 });
 return [defaultStyle];
}