0

I want to reproject my local-geoJson file in epsg:28992 to the OSM EPSG:4326 in OpenLayers. I have the feeling I am close to the solution but I don't know what the next step is. I've tried and looked for multiple examples here at SO but I've the feeling I'm missing a certain line of code somewhere.

For now the code below shows me my local gjson file at null-island. How do I tell Open Layer to reproject it to the Netherlands?

thanks in advance.

  <html>
  <head>
  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.0/proj4.js"></script>
  <script src="http://epsg.io/28992.js"></script>

  <!-- Include OpenLayers -->
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css"
    />

    <style>
        html, body, #map {
        margin: 0;
        height: 75%;
        width: 75%;
        font-family: sans-serif;
        background-color: #04041b;
      }
    </style>

    <title>A simple web app</title>
  </head>

  <body>
    <div id="map"></div>

    <script>
      // create an empty OpenLayers map
      var map = new ol.Map({
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      // create OpenStreetMap base layer
      var baseMap = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: 'http://{a-c}.tile.osm.org/{z}/{x}/{y}.png',
          attributions: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        })
      });

      map.addLayer(baseMap);


/*
//reproject

var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON({
            defaultDataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:28992'
        })).readFeatures(geojsonObject)
      });
//reproject
*/

    //LocalJson
var geojsonSource = new ol.source.Vector({
  format: new ol.format.GeoJSON(

    ),
    projection: 'EPSG:28992',
  url: 'PS2019_buurt.geo.json'
});


var geojsonStyle = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 0, 0, 0.6)' // red
  }),
  stroke: new ol.style.Stroke({
    color: 'rgba(0, 0, 0, 1)' // black
  })
});

var geojsonLayer = new ol.layer.Vector({
  source: geojsonSource,
  style: geojsonStyle
});
      map.addLayer(geojsonLayer);
//LocalJson   

    </script>
  </body>
</html>
4

1 回答 1

1

您的功能应始终转换为视图投影：

    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON({
            dataProjection: 'EPSG:4326',
            featureProjection: map.getView().getProjection(),
        })).readFeatures(geojsonObject)
      });

（该选项自 OpenLayers 5 起重defaultDataProjection命名为）dataProjection

当前，您的视图使用 OSM 使用的默认 Web 墨卡托。

如果您想查看 EPSG:28992 中的所有内容（功能和 OSM），您需要注册 proj4 并设置视图投影

      ol.proj.proj4.register(proj4);

      var map = new ol.Map({
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2,
          projection: 'EPSG:28992'
        })
      });

如果geojsonSource与 a 一起使用，url您不需要指定投影，数据会自动转换为视图投影。

但是，如果您的 geojson 中的数据在 EPSG:28992 中，您将需要

    ol.proj.proj4.register(proj4);

    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON({
            dataProjection: 'EPSG:28992',
            featureProjection: map.getView().getProjection(),
        })).readFeatures(geojsonObject)
      });

或者

     ol.proj.proj4.register(proj4);

     var geojsonSource = new ol.source.Vector({
       format: new ol.format.GeoJSON({
         dataProjection: 'EPSG:28992'
       }),
       url: 'PS2019_buurt.geo.json'
     });
于 2020-02-24T14:23:34.533 回答