OpenLayers 4.0 将 World Ocean Base MapArcGIS 重新投影到 EPSG 3408

Question

我需要将投影为 NSIDC ease-Grid North /South 或 WGS84-NSIDC Sea Ice Polar Stereographic North /South 的 geojson 文件中的图层添加到我的地图。该地图是来自 Esri 的 Ocean Base 地图 (see Esri map source)

这张link可以看到实际地图供大家参考(actual map)。地图现在使用 EPSG:3857 投影进行投影，但我应该将其更改为上述投影之一，以便正确显示我必须添加的图层。

根据 OpenLayers 4 中的文档，我尝试在执行 reProjection 命令之前创建一个简单的 html 文档（我实际上应该添加在一个地图投影与另一个地图投影之间切换的可能性，当处理极层），以检查哪个是最好的投影，如下所示：

<html>
  <head>
    <link rel="stylesheet" href="includes/ol.css" type="text/css">
    <script src="includes/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
  </head>
  <body>

   <div id="map" class="map"></div>
   <script>
     var NSIDCEaseGridNorth = new ol.proj.Projection({code: 'EPSG:3413',
     extent: [-15725.89, 9010263.32, 970.09, 555817.28], //taken from http://epsg.io
     units: 'm'
     });
     ol.proj.addProjection(NSIDCEaseGridNorth);

     var attribution = new ol.Attribution({
     html: 'Tiles © <a href="https://services.arcgisonline.com/arcgis/' +
        'rest/services/Ocean/World_Ocean_Base/MapServer">ArcGIS</a>'
     });

     var ocean_map =
      new ol.layer.Tile({
        source: new ol.source.XYZ({
         attributions:[attribution],
         url: 'https://services.arcgisonline.com/arcgis/rest/services/' +
        'Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}'
         }),
         visible: true,
         });

     var map = new ol.Map({
      layers: [],
      target: 'map',
      view: new ol.View({
      projection: 'EPSG:3413', //porjection di base (Spherical Mercator)
      center: [0.00, -5131981.97 ],
      zoom: 0
      })
     });

     map.addLayer(ocean_map);

  </script>
 </body>
</html>

然而，地图并未可视化（容器为白色）。如果我上传包含要投影的图层的 geojson 文件，它会出现在正确的投影中。您对如何修复它有什么建议吗？

Answer 1

您需要包含投影的 proj4 定义，并使用更新版本的 proj4js，因为 2.4.4 会导致一些错误。您使用的范围不正确（它应该是 [left, bottom, right, top] 并且您的 bottom 值大于 top）所以我根据纬度 60 处的边缘计算了它。重投影不起作用在缩放 0 时，我将 minZoom 设置为 1。

<html>
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4.js"></script>
  </head>
  <body>

   <div id="map" class="map"></div>
   <script>
     proj4.defs("EPSG:3413","+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs");
     var extent = ol.extent.boundingExtent([
       ol.proj.fromLonLat([-135, 60], 'EPSG:3413'),
       ol.proj.fromLonLat([ -45, 60], 'EPSG:3413'),
       ol.proj.fromLonLat([  45, 60], 'EPSG:3413'),
       ol.proj.fromLonLat([ 135, 60], 'EPSG:3413')
     ]);
     ol.proj.get('EPSG:3413').setExtent(extent);

     var attribution = new ol.Attribution({
     html: 'Tiles © <a href="https://services.arcgisonline.com/arcgis/' +
        'rest/services/Ocean/World_Ocean_Base/MapServer">ArcGIS</a>'
     });

     var ocean_map =
      new ol.layer.Tile({
        source: new ol.source.XYZ({
         attributions:[attribution],
         url: 'https://services.arcgisonline.com/arcgis/rest/services/' +
          'Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}'
        }),
        visible: true,
       });

     var map = new ol.Map({
      layers: [],
      target: 'map',
      view: new ol.View({
       projection: 'EPSG:3413', //porjection di base (Spherical Mercator)
       center: ol.proj.fromLonLat([0, 90], 'EPSG:3413'),
       zoom: 1,
       minZoom: 1
      })
     });

     map.addLayer(ocean_map);

  </script>
 </body>
</html>

OpenLayers 4.0 将 World Ocean Base MapArcGIS 重新投影到 EPSG 3408

OpenLayers 4.0 reproject World Ocean Base MapArcGIS to EPSG 3408

openlayers

map-projections