Openlayers GeoJSON 在错误的地方

Question

我是 Openlayers 的新手，对 leaflet 几乎没有经验。在传单中工作的 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. Therefore you need to transform your GeoJSON feature of Germany, which is given in EPSG:4326. Try to fix format as follow setting featureProjection相应的：

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

Openlayers GeoJSON 在错误的地方

Openlayers GeoJSON is at the wrong place

openlayers

geojson

reactjs