Question

我收到了一些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的新手。

提前致谢！

最好的问候，桑德

Answer 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'
    })

现在它就像一个魅力！

openlayers 4.4.1没有正确显示我的geojson

1 个答案: