Openlayers 无法从 RestfulAPI（节点）显示 GeoJSON Vectorlayer答案

【问题标题】：Openlayers can't display GeoJSON Vectorlayer from RestfulAPI (Node)Openlayers 无法从 RestfulAPI（节点）显示 GeoJSON Vectorlayer
【发布时间】：2019-07-05 13:47:32
【问题描述】：

我使用 Nodejs 创建了一个 restfulAPI，我想从中在 Openlayers 中创建一个新的 Vectorlayer 并显示在地图上。

我从 API 得到的 GeoJSON 看起来像这样（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)
  }
}

奇怪的是，我可以 console.log() 你可以在 image 和我的代码中看到的 geojson，但是在将其添加为矢量图层时会收到 404 错误消息。

【问题讨论】：

您的 GET 请求看起来有问题。你怎么称呼addKioskGeojson？编辑：包含geojson URL 或功能？如果最后，那么url: geojson 是错误的，应该是features: geojson。
我从 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 }) 并从我的 main.js 文件中调用 addKioskGeojson：` /** 从 API 加载地图数据 */ async loadMapData () { // 下载 kiosk pois const kioskGeojson = await this.api.getKiosks() // 添加数据映射 this.mapComponent.addKioskGeojson(kioskGeojson)`
当我尝试features: geojson 我得到这个错误：TypeError: collection.getArray is not a function。 geojson 包含功能
一个geojson定义了特征，但是为了获取OpenLayers对象的特征，geojson必须使用readFeatures进行解析

标签： node.js json openlayers geojson koa

【解决方案1】：

您已经有一个 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)
  }

【讨论】：