Openlayers 典型边界外的矢量图层渲染坐标

Question

我开始使用矢量图层来在 OpenLayers 中呈现 SQL 空间数据。渲染this 示例时（请参阅Json），一切正常。见以下代码：

    //creates source to get json data from
let vSource = new VectorSource({
  url: '/assets/germany.json',
  format: new GeoJSON()
});
//set focus of the camera on this source
vSource.on('addfeature', () => {
  this.map.getView().fit(vSource.getExtent());
  console.log(this.map.getView().getCenter());
});
//add source to layer and afterwards load it into map
let vLayer = new VectorLayer({
  source: vSource,
  visible: true
});
//layer styling
vLayer.setStyle(new Style({
  stroke: new Stroke({
    color: '#FF5733',
    width: 8  
  })
}));
this.map.addLayer(vLayer);

地图实例化如下：

this.map = new Map({
  view: new View({
    center: [10, 10],
    zoom: 3,
  }),
  layers: [],
  target: 'ol-map'
});

但是当我想渲染this json 文件时，我面对的是一张空白地图。焦点不会设置，甚至不会出现错误。我假设这一切都与边界有关？ 如果有“默认”之类的东西，如何渲染作为我们外部默认边界的多边形坐标？

例如：

[12058.4521484375, 5345.98388671875],
[11408.95703125, 5345.98388671875]

通读API我可以推断extent选项可能是解决这个问题的关键？

最好的问候
OpenLayers 的新手

Answer 1

Openlayers 默认投影是 EPSG:3857。我认为您的 geojson 和地图中心是 EPSG:4326。

this.map = new Map({
  view: new View({
    projection: 'EPSG:4326',
    center: [10, 10],
    zoom: 3,
  }),
  layers: [],
  target: 'ol-map'
});

let vSource = new VectorSource({
  url: '/assets/germany.json',
  format: new GeoJSON({ featureProjection: 'EPSG:3857' })
});