Javascript OpenLayer 6.3.1在地图上显示GeoJson数据时出现问题

我对openlayer geojson有问题。我试图在地图中显示数据，但我尝试的都不起作用

我需要更改什么才能在地图上显示数据

代码：

 var map = new Map({
  controls: defaultControls().extend([
    new FullScreen()
  ]),
  interactions: defaultInteractions().extend([
    new DragRotateAndZoom()
  ]),
  target: 'map',
  view: new View({
    center: [32.2128100772116, -7.92209407500733],
    zoom: 5
  }),
});

var vectorSource = new VectorSource({
  features: (new GeoJSON()).readFeatures(this.geojsonObject)
});

var vectorLayer = new VectorLayer({
  source: vectorSource,
  visible: true
});
this.map.addLayer(vectorLayer);

geojsonObject = {
'type': 'Feature',
'geometry': {
  'type': 'MultiPolygon',
  'coordinates': [

    [[
      [
        33.3984375,
        37.16031654673677
      ],
      [
        -11.25,
        27.68352808378776
      ],
      [
        14.765625,
        -10.833305983642491
      ],
      [
        48.515625,
        5.61598581915534
      ],
      [
        58.00781249999999,
        28.92163128242129
      ],
      [
        48.515625,
        37.43997405227057
      ],
      [
        33.3984375,
        37.16031654673677
      ]
    ]]
  ]
}
};

geoJson数据：

 var map = new Map({
  controls: defaultControls().extend([
    new FullScreen()
  ]),
  interactions: defaultInteractions().extend([
    new DragRotateAndZoom()
  ]),
  target: 'map',
  view: new View({
    center: [32.2128100772116, -7.92209407500733],
    zoom: 5
  }),
});

var vectorSource = new VectorSource({
  features: (new GeoJSON()).readFeatures(this.geojsonObject)
});

var vectorLayer = new VectorLayer({
  source: vectorSource,
  visible: true
});
this.map.addLayer(vectorLayer);

geojsonObject = {
'type': 'Feature',
'geometry': {
  'type': 'MultiPolygon',
  'coordinates': [

    [[
      [
        33.3984375,
        37.16031654673677
      ],
      [
        -11.25,
        27.68352808378776
      ],
      [
        14.765625,
        -10.833305983642491
      ],
      [
        48.515625,
        5.61598581915534
      ],
      [
        58.00781249999999,
        28.92163128242129
      ],
      [
        48.515625,
        37.43997405227057
      ],
      [
        33.3984375,
        37.16031654673677
      ]
    ]]
  ]
}
};

---

正如Mike在评论中指出的，您需要在视图选项中添加投影：“EPSG:4326”

  var map = new Map({
    controls: defaultControls().extend([
      new FullScreen()
    ]),
    interactions: defaultInteractions().extend([
      new DragRotateAndZoom()
    ]),
    target: 'map',
    view: new View({
      projection: 'EPSG:4326',
      center: [32.2128100772116, -7.92209407500733],
      zoom: 2
    }),
  });

代码片段（再次使用旧版本：os.js）：

html，
身体{
身高：100%；
宽度：100%；
边际：0px；
填充：0px；
}
.地图{
身高：70%；
宽度：100%；
}

我的地图
geojsonObject={
“类型”：“特征”，
“几何学”：{
'type'：'MultiPolygon'，
“坐标”：[
[ [ [ 33.3984375,37.16031654673677],[-11.25,27.68352808378776],[ 14.765625, -10.833305983642491],[ 48.515625,5.61598581915534],[ 58.00781249999999,28.92163128242129],[ 48.515625,37.43997405227057],[33.3984375,37.16031654673677] ] ]
]
}
};
var map=新ol.map({
控件：ol.control.defaults（）.extend([
新建ol.control.FullScreen（）
]),
交互：ol.interaction.defaults（）.extend([
新建ol.interaction.DragRotateAndZoom（）
]),
目标：“地图”，
视图：新ol.view({
投影：‘EPSG:4326’，
中心：[32.2128100772116，-7.92209407500733]，
缩放：2
}),
});
var vectorSource=new ol.source.Vector（{//vectorSource({
特性：（新的ol.format.GeoJSON（））.readFeatures（this.geojsonObject）
});
var vectorLayer=new ol.layer.Vector（{//vectorLayer({
来源：矢量源，
可见：正确
});
map.addLayer（矢量层）；

正如Mike在评论中指出的，您需要在视图选项中添加投影：“EPSG:4326”

  var map = new Map({
    controls: defaultControls().extend([
      new FullScreen()
    ]),
    interactions: defaultInteractions().extend([
      new DragRotateAndZoom()
    ]),
    target: 'map',
    view: new View({
      projection: 'EPSG:4326',
      center: [32.2128100772116, -7.92209407500733],
      zoom: 2
    }),
  });

代码片段（再次使用旧版本：os.js）：

html，
身体{
身高：100%；
宽度：100%；
边际：0px；
填充：0px；
}
.地图{
身高：70%；
宽度：100%；
}

我的地图
geojsonObject={
“类型”：“特征”，
“几何学”：{
'type'：'MultiPolygon'，
“坐标”：[
[ [ [ 33.3984375,37.16031654673677],[-11.25,27.68352808378776],[ 14.765625, -10.833305983642491],[ 48.515625,5.61598581915534],[ 58.00781249999999,28.92163128242129],[ 48.515625,37.43997405227057],[33.3984375,37.16031654673677] ] ]
]
}
};
var map=新ol.map({
控件：ol.control.defaults（）.extend([
新建ol.control.FullScreen（）
]),
交互：ol.interaction.defaults（）.extend([
新建ol.interaction.DragRotateAndZoom（）
]),
目标：“地图”，
视图：新ol.view({
投影：‘EPSG:4326’，
中心：[32.2128100772116，-7.92209407500733]，
缩放：2
}),
});
var vectorSource=new ol.source.Vector（{//vectorSource({
特性：（新的ol.format.GeoJSON（））.readFeatures（this.geojsonObject）
});
var vectorLayer=new ol.layer.Vector（{//vectorLayer({
来源：矢量源，
可见：正确
});
map.addLayer（矢量层）；

在视图选项中指定

投影：“EPSG:4326'，

（除非您需要不同的投影，在这种情况下必须变换中心和特征几何体）在视图选项中指定

投影：“EPSG:4326'，

（除非需要不同的投影，在这种情况下，必须变换中心和特征几何图形）