Openlayers не могут отображать GeoJSON Vectorlayer из RestfulAPI (Node)

Я создал restfulAPI с помощью Nodejs, из которого я хочу создать новый Vectorlayer в Openlayers и отобразить его на карте.

GeoJSON, который я получаю от API, выглядит так (JSONlint и geojson.io говорят, что он действителен):

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [9.9627244, 53.5565378]
        },
        "properties": {
            "f1": 1,
            "f2": "Tabakbörse",
            "f3": "Beim Grünen Jäger 2, 20359 Hamburg"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [9.9874951, 53.5162912]
        },
        "properties": {
            "f1": 2,
            "f2": "Fähr Getränke Kiosk",
            "f3": "Veringstraße 27, 21107 Hamburg"
        }
    }]
}

Функция addKioskGeoJSON должна добавить слой на карту:

import './map.scss'
import {Map as olMap} from 'ol'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import { fromLonLat } from 'ol/proj'
import {Style, Icon} from 'ol/style'
import { Vector as layerVector } from 'ol/layer'
import { Vector as sourceVector } from 'ol/source/'
import GeoJSON from 'ol/format/GeoJSON'


import { Component } from '../component'


const template = '<div ref="mapContainer" class="map-container"></div>'

export class Map extends Component {
  constructor (placeholderId, props) {
    super(placeholderId, props, template)

    const target = this.refs.mapContainer

    // Initialize Openlayers Map
    this.map = new olMap({
       ....
      });

    this.layers = {}; // Map layer dict (key/value = title/layer)
  }

  addKioskGeojson (geojson) {
    console.log(geojson)
    this.layers.kiosks = new layerVector({
      title: 'Kiosks',
      visible: true,
      source: new sourceVector({
        format: new GeoJSON(),
        projection : 'EPSG:4326',
        url: geojson
      }),
      style: new Style({
        image: new Icon(({
          anchor: [0.5, 40],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: './map-icons/kiosk.png'
        }))
      })
    });
    this.map.addLayer(this.layers.kiosks)
  }
}

What's weird is, that I can console.log() the geojson as you can see in the image and my code, but get an 404 error message for adding it as an vector layer.


node.js json geojson koa openlayers
person didi_o    schedule 05.07.2019    source источник
comment
Ваш запрос GET выглядит неправильно. Как вы звоните addKioskGeojson? Изменить: содержит geojson URL-адрес или функции? Если последнее, то url: geojson неверно и, возможно, должно быть features: geojson.   -  person pzaenger    schedule 05.07.2019
comment
Я получаю данные из Postgres, затем использую это промежуточное ПО: // Add GeoJSON endpoint from kiosks table router.get('/kiosks', async ctx => { const results = await database.getKiosks() if (results.length === 0) { ctx.throw(404) } // 404 for no results ctx.body = results }) и вызываю addKioskGeojson из моего файла main.js: `/ ** Загрузить данные карты из API * / async loadMapData () {// Загрузить kiosk pois const kioskGeojson = await this.api.getKiosks () // Добавляем данные на карту this.mapComponent.addKioskGeojson (kioskGeojson) `   -  person didi_o    schedule 05.07.2019
comment
Когда я пытаюсь features: geojson, я получаю эту ошибку: TypeError: collection.getArray is not a function. geojson содержит функции   -  person didi_o    schedule 05.07.2019
comment
Geojson определяет функции, но для получения функций в виде объектов OpenLayers, geojson должен быть проанализирован с использованием readFeatures   -  person Mike    schedule 06.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

У вас уже есть объект geojson (это не URL-адрес). Все, что вам нужно сделать, это проанализировать функции объекта:

  addKioskGeojson (geojson) {
    console.log(geojson)
    this.layers.kiosks = new layerVector({
      title: 'Kiosks',
      visible: true,
      source: new sourceVector({
        features: new GeoJSON().readFeatures(geojson, { featureProjection: this.map.getView().getProjection() })
      }),
      style: new Style({
        image: new Icon(({
          anchor: [0.5, 40],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: './map-icons/kiosk.png'
        }))
      })
    });
    this.map.addLayer(this.layers.kiosks)
  }
person Mike    schedule 05.07.2019