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

Posted 2023-02-23

【中文标题】Openlayers 无法从 RestfulAPI（节点）显示 GeoJSON Vectorlayer

【英文标题】：Openlayers can't display GeoJSON Vectorlayer from RestfulAPI (Node)

【发布时间】：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进行解析

【参考方案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)