Загрузить внешний файл geojson в OpenLayers 5.3.0

Question

У меня проблема с загрузкой внешнего файла geojson в OpenLayers 5.3.0 с пакетом ol. Я установил его через npm. Вот код:

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new VectorLayer({
      source: new VectorSource({
        url: 'data/geojson/countries.geojson',
        format: new GeoJSON()
      })
    })
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

Файл не отображается на карте. В консоли я получаю сообщение об ошибке 404(не найдено)

Answer 1

Вам необходимо импортировать свой GeoJsonLayer из локального файла. Вот что я сделал:

import CountryLayer from "../assets/countries.geojson";

Затем вы можете использовать CountryLayer в URL-адресе напрямую без кавычек:

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

Если вы не знаете, где можно скачать country.geojson, позвольте мне объяснить;

В OpenLayers векторный слой, например вы можете увидеть, что она дала URL, как

url: 'data/geojson/countries.geojson'

Это означает, что в структуре папок их страниц есть папка data / geojson. Так что вы можете проверить этот URL и получить country.geojson, перейдя по этой ссылке ниже;

https://openlayers.org/en/latest/examples/data/geojson/countries.geojson