OpenLayers 4.0将世界海洋基础MapArcGIS投影到EPSG 3408

问题描述 投票：0回答：1

我需要从投影为NSIDC easy-Grid North / South或WGS84-NSIDC Sea Ice Polar Stereographic North / South的geojson文件中添加图层到我的地图。该地图是来自Esri（see Esri map source）

的海洋基础地图

此链接可见实际地图，以供您参考（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文件，它将显示在正确的投影中。您对如何解决有什么建议？

openlayers map-projections
1个回答
1
投票

您需要包括投影的proj4定义，并使用更新的proj4js版本，因为2.4.4会引起一些错误。您使用的范围不正确（应该为[left，bottom，right，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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.