Question

我对我们的地图主题很新，非常沮丧。在阅读了大量不同库的示例后，我设法变得更加困惑。所以我将从一个微不足道的例子开始。我在这里提供了使用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）

根据http://localhost:37056/api/Blog

为了更改投影，我们需要注册我们想要的投影。所以在我的功能中我添加了：

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 mercator投影中。我可以在极地立体图中绘制它们，或者我应该找到一个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的网络地图，极性投射

1 个答案: