OpenLayers无法加载GeoJSON图层数据

Question

请我想显示来自带有openlayers 5.3.0的GeoJSON文件的图层，但是结果（vectorLayer变量）显示为空白页，只有Tile图层可见。 我想念什么？

使用此示例json时，我可以使用相同的代码在地图中看到创建的点。

    {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
              "name": "Null Island"
          },
           "geometry": {
             "type": "Point",
             "coordinates": [0, 0]
           }
         }
       ]
    }

我正在使用的代码：

    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    new ol.Map({
      target: 'map',
      layers: [
              new ol.layer.Tile({
              source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
                          source: new ol.source.Vector({
                          format: new ol.format.GeoJSON(),
                          url: 'Geologia.json'
                          })
      })

      ],
      view: new ol.View({
                       center: [0, 0],
                       zoom: 3
      })
    });

我没有错误消息。 该文件已在公共github存储库中上传（ https://github.com/tiagoferneda/files/blob/master/Geologia.json ）

Answer 1

那将是向南的22区。 您将需要在页面中包括proj4并定义投影，并确保源格式的数据投影：

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>

    proj4.defs('EPSG:32722', '+proj=utm +zone=22 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs ');
    ol.proj.proj4.register(proj4);

    new ol.Map({
      target: 'map',
      layers: [
              new ol.layer.Tile({
              source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
                          source: new ol.source.Vector({
                          format: new ol.format.GeoJSON({dataProjection: 'EPSG:32722'}),
                          url: 'https://raw.githubusercontent.com/tiagoferneda/files/master/Geologia.json'
                          })
      })

      ],
      view: new ol.View({
                       center: ol.proj.fromLonLat([-49, -27]),
                       zoom: 10
      })
    });