Импорт файла GeoJSON в React-Leaflet

Я пытаюсь импортировать файл GeoJSON, чтобы реагировать на буклет, как показано ниже:

import * as bar from "./data/bar.geojson";

...

function Foo() {
  return (
    <Map center={[...]} zoom={...}>
      <TileLayer
        ...
      />
      <GeoJSON data={bar} />
    </Map>
  );
}

export default Foo;

Я получаю сообщение «Ошибка: недопустимый объект GeoJSON». для звонка <GeoJSON data={bar} />. Я жестко закодировал те же данные GeoJSON в этот файл javascript, и он сработал, поэтому проблема должна быть связана с импортом или обработкой файла GeoJSON.

Кто-нибудь знает, почему у меня ошибка? Заранее спасибо!


reactjs json leaflet geojson react-leaflet
person Jay M.    schedule 29.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете импортировать свой файл geojson следующим образом:

    import bar from "./data/bar.geojson";

А затем используйте его, как показано в вашем примере.

person ahrzg    schedule 01.03.2020
comment
Спасибо за помощь! Я пробовал ваш, но не работал, но это было исправлено, когда я изменил расширение файла с .geojson на .json (и, конечно, изменил строку на import bar from "./data/bar.json";). Странно, что он не принимает формат .geojson. Кстати, я использую create-react-app. - person Jay M.; 02.03.2020
comment
Я думаю, что приложение create-response-app просто добавляет /\.json$/ в json-loader в конфигурации веб-пакета по умолчанию. К сожалению, нет удобного способа переопределить эту конфигурацию как vue-cli, кроме извлечения всех конфигураций по умолчанию. - person NanoNova; 17.09.2020