открытые слои6: перепроектировать epsg 28992 в epsg 4326 - PullRequest
Новая
       108

открытые слои6: перепроектировать epsg 28992 в epsg 4326

0 голосов
/ 24 февраля 2020

Я хочу перепроектировать мой файл local-geo Json в epsg: 28992 в OSM EPSG: 4326 в OpenLayers. У меня такое чувство, что я близок к решению, но я не знаю, каким будет следующий шаг. Я пытался и искал несколько примеров здесь, в SO, но у меня такое ощущение, что где-то пропущена определенная строка кода.

На данный момент код ниже показывает мой локальный файл g json в нуль-остров. Как мне сказать 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>

1 Ответ

1 голос
/ 24 февраля 2020

Ваши функции должны быть всегда преобразованы в проекцию вида: 

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

(опция defaultDataProjection была переименована в dataProjection, так как OpenLayers 5)

В настоящее время ваш вид использует веб-mercator по умолчанию, используемый OSM.

Если вы хотите просмотреть все (функции и OSM) в EPSG: 28992, вам нужно зарегистрировать 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 с url вам не нужно указывать проекцию, данные автоматически преобразуются в проекцию вида.

Если, однако, если данные в вашем гео json находятся в 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'
     });
...