Невозможно загрузить Vanilla GeoJSON в Openlayers 5 - PullRequest
Новая
       23

Невозможно загрузить Vanilla GeoJSON в Openlayers 5

0 голосов
/ 14 апреля 2019

Я начинаю с некоторого корректного GeoJSON, который я построил с использованием https://geojson.io. Я хочу загрузить его на карту Openlayers 5.

Я начал с этого урока и попытался использовать удаленный источник вместо локального. Соответствующий блок выглядит следующим образом: 


var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: "map",
  view: new View({
    center: [-13739617.939346, 6179221.917031],
    zoom: 11
  })
});

map.once("postrender", () => {
  axios.get(jsonUrl).then(({ data } = {}) => {
    const jsonSource = new VectorSource({
      features: new GeoJSON().readFeatures(data, {
        featureProjection: "EPSG:4326"
      })
    });

    const jsonLayer = new VectorLayer({
      source: jsonSource,
      style: jsonStyleFunction
    });

    map.addLayer(jsonLayer);
  });
});

Когда мне не удалось загрузить, я смог использовать консольные журналы, чтобы определить, что точкой разрыва не был запрос get. Я также смог увидеть, что в константе jsonSource было то же число featureChangeKeys_, что и в моем объекте JSON: 

featureChangeKeys_:
39: (2) [{…}, {…}]
41: (2) [{…}, {…}]
43: (2) [{…}, {…}]
45: (2) [{…}, {…}]
47: (2) [{…}, {…}]

1 Ответ

0 голосов
/ 14 апреля 2019

Проблема в том, что вы пытаетесь загрузить свои данные в другую систему координат координат (CRS), чем сама карта. По умолчанию карта загружается в проекции EPSG: 3857, тогда как большинство GeoJSON находится в EPSG: 4326.

Вы можете проверить это, "ища Нулевой остров". Переместите вашу карту в латлонг (0, 0), и вы можете увидеть маленькую точку, подобную следующей:

enter image description here

Если вы видите маленькое пятнышко, как выше, то это, безусловно, проблема. Чтобы решить эту проблему, вы можете сделать так, чтобы Openlayers преобразовывал данные на лету, определив атрибуты featureProjection и dataProjection следующим образом: 

const jsonSource = new VectorSource({
      features: new GeoJSON().readFeatures(data, {
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:3857"
      })
    });
...