>我需要将投影为 NSIDC 缓动网格北/南或 WGS84-NSIDC 海冰极地立体北/南的 geojson 文件添加到我的地图中。该地图是来自 Esri 的海洋底图(请参阅 Esri 地图源(
实际地图对此链接可见，供您参考(实际地图(。地图现在使用 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 文件，它将出现在正确的投影中。你有什么建议如何解决它吗？
您需要包含投影的 proj4 定义，并使用较新版本的 proj4js，因为 2.4.4 会导致一些错误。 您使用的范围不正确(它应该是 [左、下、右、上]，并且您的底部值大于顶部(，所以我根据纬度 60 处的边缘进行了计算。 重新投影在缩放 0 时不起作用，所以我将最小缩放设置为 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>