OpenLayers无法加载GeoJSON图层数据

时间:2019-05-29 03:52:58

标签: javascript geojson openlayers-5

请我要显示带有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

1 个答案:

答案 0 :(得分: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
      })
    });