reactjs - Openlayers GeoJSON 位于错误的位置

Question

我是 Openlayers 新手，对传单没什么经验。在传单中工作的 GeoJSON 位于完全错误的位置(小红点)

我可以理解这与投影有关，但由于我是新人，我找不到可用的投影。由于 GeoJSON 在传单中完美运行，我假设可以找到其 EPSG:3857 文件 here

如果你放大得很远，它就会被投影

import React, { useEffect, useState } from 'react'
import isDefined from '../../lib/utils/is-defined'
import OlMap from 'ol/Map'
import OlView from 'ol/View'
import OlLayerTile from 'ol/layer/Tile'
import OlSourceOSM from 'ol/source/Osm'
import GeoJSON from 'ol/format/GeoJSON'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style'
import germanyFullGeoJSON from '../../assets/germany_full.json'
import 'ol/ol.css'

const styles = {
  MultiPolygon: new Style({
    stroke: new Stroke({
      color: 'red',
      width: 4
    }),
    fill: new Fill({
      color: 'red'
    })
  })
}

const styleFunction = function (feature) {
  return styles[feature.getGeometry().getType()]
}

const Map = () => {
  const [map, setMap] = useState(null)
  const [zoom, setZoom] = useState(5)
  const [center, setCenter] = useState([546000, 6868000])

  useEffect(() => {
    const format = new GeoJSON()
    const features = format.readFeatures(germanyFullGeoJSON)

    const vectorLayer = new VectorLayer({
      source: new VectorSource({
        features
      }),
      style: styleFunction
    })
    const tempMap = new OlMap({
      target: 'map',
      layers: [
        new OlLayerTile({
          source: new OlSourceOSM()
        }),
        vectorLayer
      ],
      view: new OlView({
        center,
        zoom
      })

    })
    setMap(tempMap)
  }, [])

  if (isDefined(map)) {
    map.getView().setCenter(center)
    map.getView().setZoom(zoom)
    map.render()
  }
  return (
    <div id="map" style={{ width: '100%', height: '100%' }} />
  )
}

export default Map

Answer 1

OpenLayers的默认投影是EPSG:3857 。因此，您需要转换 EPSG:4326 中给出的德国 GeoJSON 特征。尝试按照以下设置修复格式 featureProjection因此:

const format = new GeoJSON({ featureProjection: 'EPSG:3857' });