openlayers 4.4.1 zeigt mein geojson nicht richtig an

Ich habe einige Shapefiles erhalten, die ich mit mygeodata.cloud (auch mapshaper.org, aber kein Unterschied) für meine Anwendung in eine Geojson-Datei umgewandelt habe. Nachdem ich einige Zeit gekämpft hatte, bekam ich die Formen auf der Karte, aber sie zeigten weiterhin im Golf von Guinea.openlayers 4.4.1 zeigt mein geojson nicht richtig an

Ich habe die Koordinaten manuell neu berechnet, aber immer noch sind die Positionen ausgeschaltet, Formen sind im Meer, aber alle Formen sollten an Land sein.

Wie soll es zeigen, und was mein Ergebnis sieht so aus: http://www.webwards.nl/osm/geojson_results.jpg

Dies ist meine komplette GeoJSON Datei: http://www.webwards.nl/osm/geo.json

Dies ist mein Code:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>GeoJSON</title> 
    <link rel="stylesheet" href="https://openlayers.org/en/v4.4.1/css/ol.css" type="text/css"> 
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> 
    <script src="https://openlayers.org/en/v4.4.1/build/ol.js"></script> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <div id="map" class="map"></div> 
    <script> 
     var styles = { 
     'Polygon': new ol.style.Style({ 
      stroke: new ol.style.Stroke({ 
      color: 'blue', 
      lineDash: [4], 
      width: 3 
      }), 
      fill: new ol.style.Fill({ 
      color: 'rgba(0, 0, 255, 0.1)' 
      }) 
     }) 
     }; 

     var styleFunction = function(feature) { 
     return styles[feature.getGeometry().getType()]; 
     }; 

     var geojsonObject = {} // see geojson file 

// this is where i recalculate the coordinates. I know this is not the way to do it :-) 
$.each(geojsonObject.features, function(k, feature) { 
    $.each(feature.geometry.coordinates[0], function(l, coordinate) { 
     geojsonObject.features[k].geometry.coordinates[0][l][0] = coordinate[0] + 440150; 
     geojsonObject.features[k].geometry.coordinates[0][l][1] = coordinate[1] + 6454650; 
    }); 
}); 

     var vectorSource = new ol.source.Vector({ 
     features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) 
     }); 

     var vectorLayer = new ol.layer.Vector({ 
     source: vectorSource, 
     style: styleFunction 
     }); 

     var map = new ol.Map({ 
     layers: [ 
      new ol.layer.Tile({ 
      source: new ol.source.OSM() 
      }), 
      vectorLayer 
     ], 
     target: 'map', 
     controls: ol.control.defaults({ 
      attributionOptions: ({ 
      collapsible: false 
      }) 
     }), 
     view: new ol.View({ 
      center: ol.proj.fromLonLat([5.8224924, 53.1263859]), 
      zoom: 10 
     }) 
     }); 
    </script> 
    </body> 
</html>

Kann mir jemand sagen, was mache ich falsch? Ich bin ziemlich erfahren mit Javascript, aber ich bin ein totaler Neuling zu openstreetmaps/openlayers.

Vielen Dank im Voraus!

freundlichen Grüßen Sander

Quelle

2017-10-18 Sander

nach etwas mehr Forschung, habe ich die Lösung in proj4js gefunden.

Ich habe die Bibliothek aufgenommen;

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js" type="text/javascript"></script>

definiert EPSG: 28992;

proj4.defs("EPSG:28992", "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +no_defs");

und änderte die Projektion der Ansicht;

view: new ol.View({ 
     center: ol.proj.transform([5.8224924, 53.1263859], 'EPSG:4326','EPSG:28992'), 
     zoom: 10, 
     projection: 'EPSG:28992' 
    })

jetzt funktioniert es wie ein Charme!

Quelle

2017-10-19 10:35:37 Sander

openlayers 4.4.1 zeigt mein geojson nicht richtig an

Antwort

Verwandte Themen