openlayers 4.4.1无法正确显示我的geojson

Question

I have received some shapefiles which i transformed into a geojson file using mygeodata.cloud (also used mapshaper.org, but no difference) for my application. 我收到了一些shapefile，我使用mygeodata.cloud（也使用mapshaper.org，但没有区别）将它们转换为geojson文件。 After struggling for some time, i got the shapes on the map, but they kept showing in the Gulf of Guinea. 经过一段时间的努力，我在地图上得到了这些形状，但它们仍在几内亚湾显示。

I recalculated the coordinates manually, but still the positions are off, shapes are in sea but all shapes should be on land. 我手动重新计算了坐标，但位置仍然不对，形状在海中，但所有形状都应在陆地上。

How it should show and what my result looks like: http://www.webwards.nl/osm/geojson_results.jpg 它应该如何显示以及我的结果是什么样的： http : //www.webwards.nl/osm/geojson_results.jpg

This is my complete geojson file: http://www.webwards.nl/osm/geo.json 这是我完整的geojson文件： http : //www.webwards.nl/osm/geo.json

This is my 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>

Can someone tell me what i'm doing wrong? 有人可以告诉我我在做什么错吗？ I'm pretty experienced with javascript, but i'm a total newbie to openstreetmaps/openlayers. 我对javascript很有经验，但是我是openstreetmaps / openlayers的新手。

Thanks in advance! 提前致谢！

best regards, Sander 最好的问候，桑德

Answer 1

after some more research, i've found the solution in proj4js. 经过更多研究后，我在proj4js中找到了解决方案。

I've included the library; 我已经包括图书馆了。

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

defined EPSG:28992; 定义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");

and changed the projection of the view; 并更改了视图的投影；

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

now it works like a charm! 现在它就像一个魅力！

openlayers 4.4.1无法正确显示我的geojson

问题描述

1 个解决方案

解决方案1
0 2017-10-19 10:35:37

openlayers 4.4.1无法正确显示我的geojson

问题描述

1 个解决方案

解决方案1 0 2017-10-19 10:35:37

解决方案1
0 2017-10-19 10:35:37