open layer6:将epsg 28992重新投影到epsg 4326

问题描述 投票:0回答:1

我想将我在epsg:28992中的local-geoJson文件重新投影到OpenLayers中的OSM EPSG:4326。我有接近解决方案的感觉,但我不知道下一步是什么。我已经尝试过并在此处寻找多个示例,但是我感觉我在某处缺少了某些代码行。

目前,以下代码向我展示了我在null-island的本地gjson文件。我如何告诉Open Layer将其重新投影到荷兰?

预先感谢。

  <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>
html-lists map-projections openlayers-6 epsg
1个回答
0
投票

您的要素应始终转换为视图投影:

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

当前,您的视图使用的是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'
        })
      });

如果将geojsonSourceurl一起使用,则无需指定投影,数据将自动转换为视图投影。

© www.soinside.com 2019 - 2024. All rights reserved.