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

回答

相关问题