使用 OpelLayers 的 Web 地图，极投影

Question

我对 we map 话题还很陌生，很沮丧。在阅读了很多不同库的例子之后，我变得更加困惑了。所以我将从一个简单的例子开始。我在这里提供了使用 openlayers 绘制网络地图的简单代码。我的目标是对地图进行极坐标投影。

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");

然后使用视图方法我们可以更改地图投影所以我添加：

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 服务器？

Answer 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]

使用 OpelLayers 的 Web 地图，极投影

Web Map with OpelLayers, polar projection

javascript

openlayers