OpenLayers:地图不会使用非“标准" EPSG代码进行渲染 [英] OpenLayers: Map doesn't render with a non 'standard' EPSG-code
问题描述
我在使EPSG 3031中的地图正常工作时遇到问题.
I have a problem with getting a map in EPSG 3031 to work.
通过研究，我已经了解到投影的参数必须在javascript文件中定义，因此epsg.io可以在我的脚本中正常工作.
From my research I have already learned that the parameters for the projection have to be defined in the javascript file, which accordingly to epsg.io works fine in my script.
但是，当我在新创建的View中使用实际的EPSG:3031并在转换后的中心中使用时，地图将无法渲染. 唯一有效的方法是选择EPSG:4326或3857，其中心为[0,0]，这实际上没有任何意义.
But when I use the actual EPSG:3031 in my new created View and my transformed center the map does not render. The only way it works is selecting EPSG:4326 or 3857 with the center [0,0] what actually doesn't make any sense.
我的JavaScript看起来像这样:
My javascript looks like this:
// 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 © <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看起来像这样:
And my html looks like this:
<!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 -->
我怎样才能使它正常工作，为什么现在不起作用?
How can I get this to work and why does it not work right now?
推荐答案
非全局投影中的Arcgis源具有非标准的切片网格.如果可以添加正确的tilegrid，则@RalphL的方法将起作用，但是可以通过将其定义为TileArcGISRest源来自动完成.如果要将OSM用作基础层，则无法投影到像极图这样的极坐标的EPSG:3857会导致OpenLayers无法处理并导致崩溃的错误.我通过定义变换函数来解决这个问题，这些变换函数经过中间投影，使代码可以捕获任何错误.
Arcgis sources in non-global projections have non-standard tile grids. @RalphL's method will work if the correct tilegrid can be added, but it can be done automatically by defining it as a TileArcGISRest source. If you want to use OSM as a base layer reprojections such as EPSG:3857 which can't reach the poles to polar coordinates cause errors which OpenLayers doesn't handle and crashes. I get around that by defining transform functions which go via an intermediate projection which let the code catch any errors.
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进行对齐
Here's @RalphL's method centered on the right place with a tilegrid based on the full extent and maximum resolution listed here https://services.arcgisonline.com/arcgis/rest/services/Polar/Antarctic_Imagery/MapServer Unlike a normal EPSG:3857 tilegrid the tiles are not an exact fit for the extent
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背景设置为与冰相匹配，例如
The white hole at the pole in reprojections is mostly transparency and a quick fix would be to set the map div background in css to match the ice, for example
.map {
background-color: #e7e9f6;
}
但是，仍然可以看到薄的白色边缘.
However, a thin white rim is still visible.
基于图层间谍示例的更好解决方案 https://openlayers.org/en/v4.6.5/examples/layer-spy.html 可能是从南极层剪切出真正的非透明白色环绕
A better solution based on the layer spy eample https://openlayers.org/en/v4.6.5/examples/layer-spy.html might be to clip the real non-transparent white surround from the antarctic layer
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代码进行渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
