openlayers 4.4.1沒有正確顯示我的geojson

我收到了一些shapefile文件，我使用mygeodata.cloud（也使用mapshaper.org，但沒有區別）轉換爲geojson文件。在掙扎了一段時間之後，我在地圖上看到了這些形狀，但他們一直在幾內亞灣顯示。openlayers 4.4.1沒有正確顯示我的geojson

我手動重新計算座標，但位置仍然關閉，形狀在海中，但所有形狀都應在陸地上。

應該如何表現，哪些我的結果是這樣的： http://www.webwards.nl/osm/geojson_results.jpg

這是我的完整GeoJSON的文件： http://www.webwards.nl/osm/geo.json

這是我的代碼：

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

有人能告訴我我做錯了什麼？我對JavaScript非常有經驗，但我是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

回答

相關問題