带有 OpelLayers 的 Web 地图，极地投影答案

【问题标题】：Web Map with OpelLayers, polar projection带有 OpelLayers 的 Web 地图，极地投影
【发布时间】：2017-11-24 19:58:06
【问题描述】：

我对我们的地图主题很陌生，很沮丧。在阅读了许多具有不同库等的示例之后，我设法变得更加困惑。所以我将从一个简单的例子开始。我在这里提供了使用 openlayers 绘制 web 地图的简单代码。我的目标是对地图进行极地投影。

html 文件：

<html>
  <head>
    <title>Accessible Map</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">

    <link rel="stylesheet" href="style.css">
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
    <script src="map.js"></script> 
  </head>
  <body>
    <div id="map" class="map" ></div>
    <script>init();</script>
  </body>
</html>

javascript：

function init(){
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
        collapsible: false
      })
    }),
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });
}

此代码同时生成具有默认 Web 墨卡托投影 (EPSG:3857) 的地图

根据https://openlayers.org/en/latest/doc/faq.html

为了改变投影，我们需要注册我们想要的投影。所以在我的函数中我添加了：

var epsg3413 =  new ol.proj.Projection({  //NSIDC Sea Ice Polar Stereographic North
  code: "EPSG:3413",
  extent: [-4194304, 4194304, 4194304, -4194304],
  units: "m"
});  

var epsg4326 = ol.proj.get("EPSG:4326");

然后用 view 方法我们可以改变地图投影所以我补充说：

center: ol.proj.transform([85, 85], epsg4326, epsg3413),
projection: epsg3413

随着有关投影更改的添加，地图根本无法正常工作。甚至是一个

console.log(ol.proj.transform([85, 85], epsg4326, epsg3413))

返回相同的点 (85,85)，这意味着投影变换甚至不起作用。我在这里犯了一个明显的错误吗？也请纠正我这个基本问题：ol.source.OSM() 从平铺的 WMS 服务器获取数据。默认情况下，瓷砖在 web 墨卡托投影中。我可以在极地立体图中完全绘制它们吗？或者我应该找到一个默认提供极地投影图块的 WMS 服务器？

【问题讨论】：

标签： javascript openlayers

【解决方案1】：

您的投影定义不正确。我可以推荐使用proj4j:

// projection definition (http://www.spatialreference.org/ref/epsg/wgs-84-nsidc-sea-ice-polar-stereographic-north/proj4js/)
proj4.defs('EPSG:3413', "+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs");

var transformedCoordinate = ol.proj.transform([85,85], 'EPSG:4326', 'EPSG:3413');
// results in [415170.5793604837, 348369.4800170395]

【讨论】：

非常感谢您的正确指导。我还需要为将来的用户提一下：由于我看到了很多示例，因此我在投影定义上遵循了他们的符号。当然，这要求投影代码已经定义（或以某种方式已知）到 ol.proj 方法，这绝对不是这种情况。我认为它确实知道 4-5 个预测，其余的应该明确定义。再次感谢！