Openlayers之离线加载ArcGIS Server瓦片
1、之前介绍了使用TileArcGISRest和XYZ的方式加载ArcGIS Server瓦片的方式，这两种方式虽然方便，但有一个弊端就是过于依赖ArcGIS Server服务，如果ArcGIS Server的服务挂了，那么所有的瓦片都将无法成功加载，而且随着瓦片服务的增加，也会增加服务器资源的开销，降低性能，所以我们需要使用离线的方式来加载瓦片，与瓦片服务完全分离。在Openlayers中，给我们提供了ol.source.TileImage
这样一个类来加载切好的瓦片，下面我们就来实现一下离线加载ArcGIS Server切好的瓦片，我的文件组织方式如下：
2、代码实现
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
<script type="text/javascript">
window.onload = function () {
// 投影
var projection = ol.proj.get('EPSG:4326');
// 坐标原点
var origin = [-400.0, 400];
// 分辨率
var resolutions = [
0.7031250000029744,
0.3515625000014872,
0.1757812499888463,
0.08789062499442316,
0.04394531250910888,
0.021972656242657134,
0.010986328121328567,
0.00549316407256159,
0.0027465820243834896,
0.0013732910240890498,
6.866455120445249E-4,
3.433227441249574E-4,
1.7166138395978374E-4,
8.583068008258684E-5,
4.291534004129342E-5,
2.145767002064671E-5,
9.658089455004757E-6,
5.364423453814192E-6,
2.682199829602067E-6,
1.3411118121060625E-6
];
// 瓦片网格
var tileGrid = new ol.tilegrid.TileGrid({
tileSize: 256,
origin: origin,
resolutions: resolutions
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
// 瓦片图层
new ol.layer.Tile({
// 瓦片图像数据源
source: new ol.source.TileImage({
projection: projection,
// 瓦片网格
tileGrid: tileGrid,
// 瓦片路径函数
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
// 缩放级别
var z = zeroPad(tileCoord[0], 2, 10);
// 瓦片行号
var x = zeroPad(tileCoord[1], 8, 16);
// 瓦片列号
var y = zeroPad(-tileCoord[2] - 1, 8, 16);
// 瓦片本地路径
return "TestMapTile/" + "L" + z + "/" + "R" + y + "/" + "C" + x + ".png";
}
}),
}),
],
view: new ol.View({
center: [113.226, 23.408],
// 分辨率
resolutions: resolutions,
// 地图当前缩放层级
resolution: 9.658089455004757E-6,
projection: projection,
})
});
// 进制转换并补齐Arcgis Server目录和名称前面的0
function zeroPad(num, len, radix) {
var str = num.toString(radix || 10);
while (str.length < len) {
str = "0" + str;
}
return str;
}
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
3、结果展示
转载自：https://blog.csdn.net/smilecoffin/article/details/77249167
