Добавленный в openlayers слой gml не отображается на карте

Недавно я перешел от использования leaflet к использованию openlayers. Для нового проекта я хочу отобразить содержимое gml-файла на карте openlayers. Но что бы я ни пробовал, на карте ничего не отображается. Когда я печатаю содержимое ответа fetch, я вижу, что строка содержимого gml прекрасно выводится в консоль, однако когда я печатаю переменную features после разбора gml, я получаю пустой массив.

Я прочитал официальную документацию и написал несколько javascript-кодов в соответствии с описанием API.

Я использую python-запрос в django для получения текстового содержимого gml и обеспечения доступа к нему для front-end javascript. Когда я регистрирую ответ fetch в консоли в dev tools, я вижу, что строка ответа fetch выводится успешно, однако когда я регистрирую переменную features в консоли, я получаю пустой массив и ничего не видно на карте.

Файл gml, который я пытаюсь добавить к карте, можно найти здесь: https://ruimtelijkeplannen.nl/documents/NL.IMRO.0252.GHbpkernMalden-VA01/NL.IMRO.0252.GHbpkernMalden-VA01.gml

Мой использованный код javascript:

import Map from '../../../node_modules/ol/Map.js';
import OSM from '../../../node_modules/ol/source/OSM.js';
import TileLayer from '../../../node_modules/ol/layer/Tile.js';
import View from '../../../node_modules/ol/View.js';
import GML32 from '../../../node_modules/ol/format/GML32.js';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

function createDefaultStyle() {
  return new Style({
    fill: new Fill({
      color: 'rgba(169,169,169,0.5)'
    })
    // Add more style properties as needed
  });
}

document.getElementById('test').addEventListener('click', function() {
  fetch('/bestemmingsplan/')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.text();
    })
    .then(content => {
        console.log(content);
        var gmlFormat = new GML32();
        var features = gmlFormat.readFeatures(content,{
          dataProjection: 'EPSG:28992',
          featureProjection: 'EPSG:3857'
        });

        if (features.length > 0) {
          var layer = new VectorLayer({
            source: new VectorSource({
              features: features
            }),
            style: createDefaultStyle()
          });
          map.addLayer(layer);
        } else {
          console.warn('No features found in the GML data.');
        }
    })
    .catch(error => {
        console.error('There was a problem with the request:', error);
    });
});

Может ли кто-нибудь сказать мне, что я делаю не так, и помочь мне?

Вернуться на верх