OpenLayers：地图不会使用非“标准” EPSG代码进行渲染_JavaScript

我在使EPSG 3031中的地图正常工作时遇到问题。

通过研究，我已经了解到投影的参数必须在javascript文件中定义，因此epsg.io可以在我的脚本中正常工作。

但是，当我在新创建的View和变换后的中心中使用实际的EPSG：3031时，地图将不会渲染。 它唯一起作用的方法是选择EPSG：4326或3857，其中心为[0,0]，这实际上没有任何意义。

我的JavaScript看起来像这样：

 // register EPSG proj4.defs("EPSG:3031","+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"); //set projection var proj3031=ol.proj.get('EPSG:3031'); //test if coordinate transformation is properly working var center2 = ol.proj.transform([0, -80], 'EPSG:4326', 'EPSG:3031'); ; var baseMapLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); var esriArctic = new ol.layer.Tile({ title : 'ESRI Imagery', type : 'base', zIndex: 0, source : new ol.source.XYZ({ attributions : [new ol.Attribution({ html : 'Tiles &copy; <a href="http://services.arcgisonline.com/ArcGIS/rest/services/Polar/Antarctic_Imagery/MapServer">ArcGIS</a>' })], url : 'https://server.arcgisonline.com/ArcGIS/rest/services/Polar/Antarctic_Imagery/MapServer/tile/{z}/{y}/{x}', wrapX: false, }) }); var map = new ol.Map({ target: 'map', layers: [ esriArctic], //layers: [ baseMapLayer], view: new ol.View({ //projection: "EPSG:4326", projection: proj3031, //center: [0,0], center: center2, zoom: 5 //Initial Zoom Level }) });

我的html看起来像这样：

 <!DOCTYPE html> <style type="text/css"> #map{ width:100%; height:600px; } </style> <!--Basic styling for map div, if height is not defined the div will show up with 0 px height --> </head> <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js"></script> <script src="http://epsg.io/3031.js"></script> <body> <div id="map"> <!-- Your map will be shown inside this div--> </div> </body> <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> <script type="text/javascript" src="map.js" type="text/javascript"></script> <!-- Our map file --> </html>> <!-- Openlayesr JS fIle -->

我如何才能使其正常工作，为什么现在不起作用？

请查看以下代码段：

 proj4.defs("EPSG:3031", "+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"); ol.proj.proj4.register(proj4); var proj3031 = ol.proj.get('EPSG:3031'); var esriArctic = new ol.layer.Tile({ title: 'ESRI Imagery', type: 'base', zIndex: 0, source: new ol.source.XYZ({ url: 'https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer/tile/{z}/{y}/{x}' }) }); var map = new ol.Map({ target: 'map', layers: [esriArctic], view: new ol.View({ center: ol.proj.fromLonLat([0, -80], proj3031), zoom: 3 }) })

  html, body, #map { width: 100%; height: 100%; overflow: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script> <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <body> <div id="map" class="map"></div> </body>

非全局投影中的Arcgis源具有非标准的图块网格。 如果可以添加正确的tilegrid，则@RalphL的方法将起作用，但是可以通过将其定义为TileArcGISRest源来自动完成。 如果要将OSM用作基础层，则无法投影到像极图这样的极坐标的EPSG：3857会导致OpenLayers无法处理并导致崩溃的错误。 我通过定义转换函数来解决这个问题，这些函数通过一个中间投影来使代码捕获任何错误。

 function reprojectionErrorHandler(projections, opt_intermediate) { var intermediate = opt_intermediate || 'EPSG:4269'; function transform(projA, projB) { return function (input, opt_output, opt_dimension) { var length = input.length; var dimension = opt_dimension !== undefined ? opt_dimension : 2; var output = opt_output !== undefined ? opt_output : new Array(length); var ll, point, i, j; try { for (i = 0; i < length; i += dimension) { ll = ol.proj.transform([input[i], input[i + 1]], projA, intermediate); point = ol.proj.transform([ll[i], ll[i + 1]], intermediate, projB); output[i] = point[0]; output[i + 1] = point[1]; for (j = dimension - 1; j >= 2; --j) { output[i + j] = input[i + j]; } } } catch (e) {} return output; }; } if (Array.isArray(projections)) { for (i = 0; i < projections.length-1; i++) { for (j = i+1; j < projections.length; j++) { if (ol.proj.get(projections[i]).getCode() != ol.proj.get(projections[j]).getCode() && ol.proj.get(projections[i]).getCode() != ol.proj.get(intermediate).getCode() && ol.proj.get(projections[j]).getCode() != ol.proj.get(intermediate).getCode() ) { ol.proj.addCoordinateTransforms( projections[i], projections[j], transform(projections[i], projections[j]), transform(projections[j], projections[i]) ); ol.proj.addCoordinateTransforms( projections[j], projections[i], transform(projections[j], projections[i]), transform(projections[i], projections[j]) ); } } } } } proj4.defs("EPSG:3031", "+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"); ol.proj.proj4.register(proj4); var proj3031 = ol.proj.get('EPSG:3031'); reprojectionErrorHandler(['EPSG:3031', 'EPSG:3857']) var baseMapLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); var esriArctic = new ol.layer.Tile({ title: 'ESRI Imagery', type: 'base', zIndex: 0, opacity: 0.5, source: new ol.source.TileArcGISRest({ url: 'https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer' }) }); var map = new ol.Map({ target: 'map', layers: [baseMapLayer, esriArctic], view: new ol.View({ projection: proj3031, center: ol.proj.fromLonLat([0, -80], proj3031), zoom: 3 }) })

  html, body, #map { width: 100%; height: 100%; overflow: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script> <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <body> <div id="map" class="map"></div> </body>

这是@RalphL的方法，根据此处列出的完整范围和最大分辨率，在正确的位置上使用了tilegrid，：//services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer与普通的EPSG：3857瓷砖不完全适合该范围

 proj4.defs("EPSG:3031", "+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"); ol.proj.proj4.register(proj4); var proj3031 = ol.proj.get('EPSG:3031'); var extent = [-3.369955099203E7, -3.369955099203E7, 3.369955099203E7, 3.369955099203E7]; var maxResolution = 238810.81335399998; var resolutions = []; for (var i = 0; i < 24; i++) { resolutions[i] = maxResolution / Math.pow(2, i); } var esriArctic = new ol.layer.Tile({ title: 'ESRI Imagery', type: 'base', zIndex: 0, source: new ol.source.XYZ({ url: 'https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer/tile/{z}/{y}/{x}', projection: proj3031, tileGrid: new ol.tilegrid.TileGrid({ extent: extent, resolutions: resolutions }), }) }); var map = new ol.Map({ target: 'map', layers: [esriArctic], view: new ol.View({ projection: proj3031, center: ol.proj.fromLonLat([0, -80], proj3031), zoom: 3 }) })

  html, body, #map { width: 100%; height: 100%; overflow: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script> <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <body> <div id="map" class="map"></div> </body>

投影中极点上的白洞主要是透明的，例如，快速解决方法是在CSS中将地图div背景设置为与冰相匹配，例如

   .map {
     background-color: #e7e9f6;
   }

但是，仍然可以看到薄的白色边缘。

一个基于图层间谍示例的更好的解决方案可能是从南极层剪切真正的非透明白色边框

 function reprojectionErrorHandler(projections, opt_intermediate) { var intermediate = opt_intermediate || 'EPSG:4269'; function transform(projA, projB) { return function (input, opt_output, opt_dimension) { var length = input.length; var dimension = opt_dimension !== undefined ? opt_dimension : 2; var output = opt_output !== undefined ? opt_output : new Array(length); var ll, point, i, j; try { for (i = 0; i < length; i += dimension) { ll = ol.proj.transform([input[i], input[i + 1]], projA, intermediate); point = ol.proj.transform([ll[i], ll[i + 1]], intermediate, projB); output[i] = point[0]; output[i + 1] = point[1]; for (j = dimension - 1; j >= 2; --j) { output[i + j] = input[i + j]; } } } catch (e) {} return output; }; } if (Array.isArray(projections)) { for (i = 0; i < projections.length-1; i++) { for (j = i+1; j < projections.length; j++) { if (ol.proj.get(projections[i]).getCode() != ol.proj.get(projections[j]).getCode() && ol.proj.get(projections[i]).getCode() != ol.proj.get(intermediate).getCode() && ol.proj.get(projections[j]).getCode() != ol.proj.get(intermediate).getCode() ) { ol.proj.addCoordinateTransforms( projections[i], projections[j], transform(projections[i], projections[j]), transform(projections[j], projections[i]) ); ol.proj.addCoordinateTransforms( projections[j], projections[i], transform(projections[j], projections[i]), transform(projections[i], projections[j]) ); } } } } } proj4.defs("EPSG:3031", "+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"); ol.proj.proj4.register(proj4); var proj3031 = ol.proj.get('EPSG:3031'); reprojectionErrorHandler(['EPSG:3031', 'EPSG:3857']) var baseMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', maxZoom: 23 }) }); var extent = [-3.369955099203E7, -3.369955099203E7, 3.369955099203E7, 3.369955099203E7]; var maxResolution = 238810.81335399998; var resolutions = []; for (var i = 0; i < 24; i++) { resolutions[i] = maxResolution / Math.pow(2, i); } var esriArctic = new ol.layer.Tile({ title: 'ESRI Imagery', type: 'base', zIndex: 0, source: new ol.source.XYZ({ url: 'https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer/tile/{z}/{y}/{x}', projection: proj3031, tileGrid: new ol.tilegrid.TileGrid({ extent: extent, resolutions: resolutions }), }) }); esriArctic.on('precompose', function(event) { radius = 4000000 / event.frameState.viewState.resolution; var ctx = event.context; var pixelRatio = event.frameState.pixelRatio; ctx.save(); ctx.beginPath(); position = map.getPixelFromCoordinate(ol.proj.transform([0, -90], 'EPSG:4326', 'EPSG:3031')); // only show a circle around the position ctx.arc(position[0] * pixelRatio, position[1] * pixelRatio, radius * pixelRatio, 0, 2 * Math.PI); ctx.clip(); }); // after rendering the layer, restore the canvas context esriArctic.on('postcompose', function(event) { var ctx = event.context; ctx.restore(); }); var map = new ol.Map({ target: 'map', layers: [baseMapLayer, esriArctic], view: new ol.View({ projection: proj3031, center: ol.proj.fromLonLat([0, -80], proj3031), zoom: 3 }) })

  html, body, #map { width: 100%; height: 100%; overflow: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script> <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <body> <div id="map" class="map"></div> </body>

OpenLayers：地图不会使用非“标准” EPSG代码进行渲染

问题描述

1楼

2楼