Установить источник значков из свойств GeoJSON в OpenLayers

#javascript #maps #openlayers

#javascript #Карты #openlayers

Вопрос:

Я пытаюсь создать карту с помощью OpenLayers из файла GeoJSON, где у меня есть свойство iconUrl для каждой точки. Я хочу, чтобы мой стиль ссылался на это свойство, и мне не удается это сделать. Я сделал это с помощью листовки, вы можете увидеть цель здесь: https://idrissad.github.io/lyon_map /

Вот мой старый код:

 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",
   width1.2
  }),
  image: new ol.style.Icon({
   scale: 0.1,
   src: iconUrl
  })
 })return [defaultStyle]
}
 

И:

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

Я получаю ошибку «Ошибка утверждения: 6 => Должен быть предоставлен определенный и непустой src или изображение».
Я попробовал несколько вариантов, но безуспешно.
Моя консоль.журнал показывает мне, что функция feature.get() работает нормально, у меня есть свои URL-адреса в переменной iconUrl.
Есть какие-нибудь подсказки?

Ответ №1:

Поскольку у вас также есть заливка и обводка, ваш стиль также используется для полигонов? Если другие функции не имеют iconUrl , это вызовет ошибку. Попробуйте изменить функцию стиля, чтобы часть изображения устанавливалась только при наличии 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];
}
 

Комментарии:

1. Да, это была проблема, спасибо! Друг помог мне решить это через несколько минут после того, как я опубликовал здесь, с другой функцией и if, но ваше решение намного проще! Я думал, что это изображение предназначено только для точек, чтобы OL не пытался применить его к функциям linestring и polygons.