OpenLayers - ol.Feature правильно отображаются при начальной загрузке страницы, но не при добавлении новых ol.Feature после завершения загрузки страницы - PullRequest
Новая
       4

OpenLayers - ol.Feature правильно отображаются при начальной загрузке страницы, но не при добавлении новых ol.Feature после завершения загрузки страницы

0 голосов
/ 08 марта 2020

Я нахожусь в моем раннем цикле обучения OpenLayers и чувствую себя немного потерянным. Все отлично работает, когда я загружаю страницу; то есть у меня есть несколько ol.Feature объектов, которые создаются (получены из файла JSON) и правильно отображаются на карте.

Проблема, с которой я сталкиваюсь, возникает при попытке добавить дополнительные ol.Feature объектов на карту. Судя по всему, все выглядит правильно внутри - объект ol.Feature просто не отображается на карте.

Ниже приведен код BASE JS, использованный для создания карты: 

var map = new ol.Map({
  target: 'map',
  controls: ol.control.defaults().extend([mousePositionControl]),
  interactions: defaultInteractions().extend([new Drag()]),
  layers: [ baseMapLayer],
  view: new ol.View({
          center: ol.proj.fromLonLat([-70.681715, 19.779147]), 
          zoom: 16 //Initial Zoom Level
        })
});

var vectorSource = new ol.source.Vector({
  features: [marker, marker_2]
});
var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource
});

map.addLayer(markerVectorLayer);

Ниже приведен блок кода, используемый для создания одного объекта ol.Feature: 

function addMapMarker(sMid, sDid, sLong, sLat)
{
    var marker = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([sLong, sLat]))
        //geometry: new ol.geom.Point(ol.proj.transform([sLong, sLat], 'EPSG:4326', 'EPSG:3857'))
    });

    marker.setId(sDid);

    marker.setStyle(new ol.style.Style({
        image: new ol.style.Icon(({
            crossOrigin: 'anonymous',
            src: 'img/ent_mkr/' + sMid
        }))
    }));

    return marker;
}

Во время начальной загрузки страницы каждый объект ol.Feature добавляется к объекту ARRAY с именем 'aFeatures':

var aFeatures = [];

Этот код выполняется внутри 'forEach' l oop, поскольку он извлекает данные из файла JSON:

aFeatures.push(addMapMarker(sMarkerId, oEntitiesData.did, oEntitiesData.lon, oEntitiesData.lat));

После того как 'forEach' l oop завершен, массив 'aFeatures' добавляется в свойство 'features' объекта ol.source.Vector:

vectorSource.addFeatures(aFeatures);

ТАК ДАЛЬШЕ, ХОРОШО * - проблема возникает, когда я пытаюсь добавить дополнительные ol.Feature объект (ы) к ol.Map (добавляется один за другим). Я в основном выполняю ту же процедуру, как описано выше, используя вызов функции addMapMarker для создания нового ol.Feature объекта:

var oMapMkr = addMapMarker(sMid, oEntitiesData.did, oEntitiesData.lon, oEntitiesData.lat);

И затем добавьте его в «функции 'в объекте ol.source.Vector:

vectorSource.addFeature(oMapMkr);

ПРОБЛЕМА: что после этого объект ol.Feature не появляется на странице , Вызов функций render() или renderSync() для объекта ol.Map не помогает.

ЗАКЛЮЧИТЕЛЬНО - я знаю, что дополнительные объекты загрузки страницы ol.Feature добавлены в markerVectorLayer, потому что я шагнул через него:

markerVectorLayer.getSource().getFeatures().forEach(function(item, index)

Я подозреваю, что упускаю что-то очень очевидное, но я просто не знаю, что это такое - LOL Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 10 марта 2020

Как это бывает, ребята, я был на 100% прав, когда закончил свой первый вопрос:

Я подозреваю, что упускаю что-то очень очевидное, но я просто не знаю, что это такое - LOL

Код, который я создал, был в порядке, и моя проблема была действительно очень простой c, не имеющей ничего общего с тем, что я написал. Изображение PNG, которое я пытался использовать в качестве ol.style.Icon, было повреждено, поэтому на страницу ничего не загружалось. Я обнаружил это только после проверки отображения сети в отладчике Firefox.

Эту проблему можно считать закрытой - спасибо!

...