GEOjson 未显示在我的地图 openlayers 中

GEOjson not displaying in my map openlayers

我想在我的地图 openLayers 中显示 geojson 数据,但我的数据没有显示,地图甚至没有显示。我使用 openLayers 5。 我有一个 api(在 node.js 中),它允许在我的数据库中提取数据。 我有一个文件 (script.js),它允许显示地图,恢复 api 发送的数据并在地图上显示数据。

在script.js中:

我创建了一个包含 geojson 样式的新 vectorLayer:

 var foncier2 = new VectorLayer({
source:source,
style: function (feature, res) {
  property = feature.get("nature");
  return new  Style({
    stroke: new Stroke({
      color: [40, 40, 40, 1],
      width: 0.3
    }),
    fill: new Fill({
      color: couleur(property)
    })
  })
},});

我请求 API 在回调的帮助下恢复数据:

`
function loadJSON(callback) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            console.log(this.responseText);
            callback(this.responseText);
          }
        };
        xhr.open("GET", "adressIP:port/endpoint", true);
        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(null);
      }`

然后我创建一个函数,将数据转换为 json 然后转换为 GEOjson :

   var myData = JSON.parse(data);

var geojsonObject = {
 "type": "FeatureCollection",
 "crs": { "type": "name", "properties": { "name": "EPSG:4326" }},
 "features": [
   {
     "type": "Feature",
     "geometry": {
       "type": "Polygon",
       "coordinates":myData[2].geom
     }
   }
 ]};

最后我显示数据:

foncier2.getSource().clear();
foncier2.getSource().addFeatures(foncier2.getSource().getFormat().readFeatures(geojsonObject, {
  dataProjection: 'EPSG:4326',
  defaultFeatureProjection: 'EPSG:3857',
}));
foncier2.getSource().refresh();
foncier2.getSource().changed();
map.getView().fit(foncier2.getSource().getExtent());

但是
我的地图上没有任何显示,我的控制台日志中也没有错误。

谢谢你帮助我

PS : (我设法恢复了数据,看起来像 that and the coordinates )

您正在为几何体(您的屏幕截图显示的是多面体)而不是几何体的坐标设置坐标,并且没有更新类型。试试这个:

var geojsonObject = {
 "type": "FeatureCollection",
 "crs": { "type": "name", "properties": { "name": "EPSG:4326" }},
 "features": [
   {
     "type": "Feature",
     "geometry": {
       "type": JSON.parse(myData[2].geom).type,
       "coordinates": JSON.parse(myData[2].geom).coordinates
     }
   }
 ]};