openlayers 4.4.1에 내 geojson이 올바르게 표시되지 않습니다.

mygeodata.cloud를 사용하여 geojson 파일로 변형 된 일부 shapefile을 받았습니다 (mapshaper.org도 사용했지만 차이는 없습니다). 얼마간 고투하고 난 후에 나는지도 위에서 모양을 얻었다. 그러나 그들은 계속해서 기니 만에서 보여 주었다.openlayers 4.4.1에 내 geojson이 올바르게 표시되지 않습니다.

좌표를 수동으로 다시 계산했지만 위치는 여전히 꺼져 있고 모양은 바다에 있지만 모든 모양은 육지에 있어야합니다.

이 보여주고 방법을 어떻게 내 결과는 다음과 같습니다 http://www.webwards.nl/osm/geojson_results.jpg

이 내 전체 geojson 파일입니다

이

<!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>

누군가가 말해 줄 수 : 이것은 내 코드입니다 http://www.webwards.nl/osm/geo.json

내가 뭘 잘못하고있어? 나는 자바 스크립트로 꽤 경험이 있지만, 나는 openstreetmaps/openlayers를 완전히 초보자입니다.

미리 감사드립니다.

안부, 샌더

출처

2017-10-18 Sander

좀 더 연구 후에, 나는 proj4js에서 솔루션을 발견했습니다.

나는 라이브러리를 포함 시켰습니다.

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

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");

및보기의 투영을 변경했습니다.

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

이제는 매력처럼 작동합니다.

출처

2017-10-19 10:35:37 Sander

openlayers 4.4.1에 내 geojson이 올바르게 표시되지 않습니다.

답변

관련 문제