openlayers 4.4.1 没有正确显示我的 geojson答案

【问题标题】：openlayers 4.4.1 does not show my geojson correctlyopenlayers 4.4.1 没有正确显示我的 geojson
【发布时间】：2017-10-18 12:25:07
【问题描述】：

我收到了一些 shapefile，我使用 mygeodata.cloud（也使用了 mapshaper.org，但没有区别）为我的应用程序转换为 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 的新手。

提前致谢！

最好的问候，桑德

【问题讨论】：

标签： javascript openlayers openstreetmap geojson

【解决方案1】：

经过更多研究，我在 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'
    })

现在它就像一个魅力！

【讨论】：