openlayers 4.4.1 n'affiche pas correctement mon geojson

J'ai reçu des shapefiles que j'ai transformés en un fichier geojson en utilisant mygeodata.cloud (également utilisé mapshaper.org, mais pas de différence) pour mon application. Après avoir lutté pendant un certain temps, j'ai obtenu les formes sur la carte, mais ils ont continué à montrer dans le golfe de Guinée.openlayers 4.4.1 n'affiche pas correctement mon geojson

J'ai recalculé les coordonnées manuellement, mais les positions sont toujours éteintes, les formes sont en mer mais toutes les formes devraient être à terre.

Comment ça devrait montrer et ce que mon résultat ressemble à: http://www.webwards.nl/osm/geojson_results.jpg

Ceci est mon dossier complet GeoJSON: http://www.webwards.nl/osm/geo.json

Voici mon 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>

Quelqu'un peut-il me dire ce que je fais mal? Je suis assez expérimenté avec javascript, mais je suis un débutant total à openstreetmaps/openlayers.

Merci d'avance!

meilleures salutations, Sander

Source

2017-10-18 Sander

après quelques recherches, j'ai trouvé la solution dans proj4js.

J'ai inclus la bibliothèque;

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

défini 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");

et changé la projection de la vue;

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

maintenant ça marche comme un charme!

Source

2017-10-19 10:35:37 Sander

openlayers 4.4.1 n'affiche pas correctement mon geojson

Répondre

Questions connexes