openlayers中加载离线标准与自定义切片（深度好文）
目录
一、引言
上一篇文章中讲解了在线切片的加载，本篇文章重点讲解离线切片的加载。离线切片加载在之前研究过一段时间，因为主要使用arcgis有依赖性一直没用下决定弄懂，上周看了三四天终于把这个研究通了，哈哈哈能为单位节约不少资金了。主要有离线切片的制作和加载、切片加载的原理。
二、离线标准与自定义切片的制作与使用
1、离线切片的制作
这里我使用的是arcgis server切图，分别制作了标准切片（arcgis online）与自定义切片（suggest）。
这里离线切片标准的与自定义的有什么区别呢？
这里发布的主要区别就是分辨率resolution（比例尺scale），起始点origin，范围full extent，下面会详细解释，先记住，这个是标准切片的：
2、离线切片的使用
在arcgis server中寻找切好的图片
然后将这些切片拷贝到web服务器上面就可以使用了，当然你要记住切片的参数，就是上面提到的分辨率、起始点、范围等。
三、离线标准切片加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="js/ol.css">
<script src="lib/jquery/jquery-3.3.1.min.js"></script>
<script src="js/ol.js"></script>
</head>
<body>
<div id="map" style="height: 100%;width: 98%"></div>
<script type="text/javascript">
// 设置地图中心，此处进行坐标转换， 把EPSG:4326(经纬度坐标)，转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标，因为ol默认使用的是EPSG:3857坐标
//[106.677, 36.7388]是下载地图的中心经纬度
//var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');
//var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');
//创建地图
var map = new ol.Map({
view: new ol.View({
center: [508833, 299749],//地图中心位置
//center:[503409, 305653],
zoom: 18//地图初始层级
/* center: [12956575, 4853684],//地图中心位置
//center:[503409, 305653],
zoom: 10//地图初始层级*/
}),
//添加地图图层
//这里注销在下面添加新的离线地图图层
/*layers: [
new ol.layer.Tile({
source:new ol.source.OSM()
})
],*/
//将地图添加到的map容器中
target: 'map'
});
//给8位字符串文件名补0
function zeroFill(num, len, radix) {
var str = num.toString(radix || 10);
while (str.length < len) {
str = "0" + str;
}
return str;
}
// ol.source.XYZ添加瓦片地图的层
var tileLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
tileUrlFunction: function (coordinate) {
//alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
var x = 'C' + zeroFill(coordinate[1], 8, 16);
var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);
var z = 'L' + zeroFill(coordinate[0], 2, 10);
//return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
return 'http://localhost:8080/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
},
projection: 'EPSG:3857'
})
});
map.addLayer(tileLayer);//添加到map里面
map.on('click', function(evt) {
var coor=evt.coordinate;
alert(coor);
});
</script>
</body>
</html>注意这里直接使用了new ol.source.XYZ，在tileUrlFunction中将XYZ重新拼接为真正瓦片所在地址。
四、离线自定义切片加载（重点非常有用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="js/ol.css">
<script src="lib/jquery/jquery-3.3.1.min.js"></script>
<script src="js/ol.js"></script>
</head>
<body>
<div id="map" style="height: 100%;width: 98%"></div>
<script type="text/javascript">
var projection = ol.proj.get('EPSG:3857');
// 瓦片地址
// 瓦片地址格式：http://localhost:6080/arcgis/rest/services/Test/Beijing/MapServer/tile/{z}/{y}/{x}
var tileUrl = "http://localhost:6080/arcgis/rest/services/test/cadcustom/MapServer/tile/{z}/{y}/{x}";
// 原点
var origin = [ -2.00377E7 ,3.02411E7];
// 分辨率
var resolutions = [
2.116670900008467,
1.0583354500042335,
0.5291677250021167,
0.26458386250105836,
0.13229193125052918,
0.06614596562526459
];
// 地图范围
var fullExtent = [ 508609.7079405099,299415.4490000001,509204.2680308107,299922.62196192663];
var tileGrid = new ol.tilegrid.TileGrid({
tileSize: 256,
origin: origin,
//extent: fullExtent,
resolutions: resolutions
});
//给8位字符串文件名补0
function zeroFill(num, len, radix) {
var str = num.toString(radix || 10);
while (str.length < len) {
str = "0" + str;
}
return str;
}
// 瓦片数据源
var tileArcGISXYZ = new ol.source.XYZ({
tileGrid: tileGrid,
projection: projection,
tileUrlFunction: function (coordinate) {
//alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);
var x = 'C' + zeroFill(coordinate[1], 8, 16);
var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);
var z = 'L' + zeroFill(coordinate[0], 2, 10);
//return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
return 'http://localhost:8080/tile/arcgiscustom/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径
}
});
var map = new ol.Map({
target: 'map',
layers: [
// 瓦片图层
new ol.layer.Tile({
source: tileArcGISXYZ
})
],
view: new ol.View({
center:[509018, 299803],
//resolutions: resolutions,
//resolution: 2.116670900008467,
projection: projection,
//extent: fullExtent
zoom: 17
})
});
map.on('click', function(evt) {
var coor=evt.coordinate;
alert(coor);
});
</script>
</body>
</html>注意这里直接使用了new ol.source.XYZ，在tileUrlFunction中将XYZ重新拼接为真正瓦片所在地址。
注意这里使用了tileGrid重新定义了openlayers瓦片坐标，resolution与origin要与arcgis中自定义发布的地图一致。
五、总结
- 离线标准与自定义切片的制作与使用；
- 离线标准切片加载；
- 离线自定义切片加载；
转载自：https://blog.csdn.net/xcymorningsun/article/details/84028882
