近日做完ol3加载arcserver rest服务，做一个总结，因为发现自己亲手写的ol3记载瓦片的小结，竟然自己也会忘记，还好留下了博客，好记忆不如烂笔头。同时此文也是为了完成对扯淡大叔的承诺，答应帮大叔写几篇ol3的教程，一直拖着，万分抱歉。
1、加载第三方在线acrserver rest服务
参考代码如下，可以直接访问：
<script type="text/javascript">
var projection = ol.proj.get('EPSG:4326');
var tileUrl = "http://222.180.68.94:6080/arcgis/rest/services/wzpsp/wzmap/MapServer/tile/{z}/{y}/{x}";
var origin = [-400.0, 399.9999999999998];
var resolutions = [
0.0013732916427489112,
0.0006866458213744556,
0.0003433229106872278,
0.0001716614553436139,
0.00008582953794130404,
0.00004291595870115493,
0.000021457979350577466,
0.000010728989675288733,
0.000005363305107141452,
0.000002681652553570726,
0.000001342016007288278,
];
var fullExtent = [107.86896617100007, 30.390792641000075, 108.90726196600006, 31.005204326000076];
var tileGrid = new ol.tilegrid.TileGrid({
tileSize: 256,
origin: origin,
extent: fullExtent,
resolutions: resolutions
});
var tileArcGISXYZ = new ol.source.XYZ({
tileGrid: tileGrid,
projection: projection,
url: tileUrl ,
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: tileArcGISXYZ
}),
],
view: new ol.View({
center: ol.extent.getCenter(fullExtent),
resolutions: resolutions,
projection: projection,
extent: fullExtent
})
});
map.getView().setZoom(0);
</script>
上面中的参数在arcserver rest 服务的页面中找，resolutions参数，tileSize参数如下：
Paste_Image.png
origin及地图范围：arcgis的origin原点在[-400,399,99999999999]，范围一般用initial extent：
Paste_Image.png
PS：在作者的几次项目实践中发现，initial extent与full extent都有可能，可能和第三方发布的服务配置有关，待进一步确认？
2、加载第三方arcserver rest服务的离线瓦片
也可以通过作者发布的瓦片下载工具（工具按照wmts规则存储离线瓦片） ，下载第三方arcgis rest服务的瓦片到本地，用ol3加载离线瓦片。通过观察arcgis rest发布的瓦片是WMTS规则，瓦片坐标从左上角到右下角递增，加载arcgis rest的离线瓦片参考如下，其余代码及参数设置与上面所述一致：
new ol.layer.Tile({
source: new ol.source.TileImage({
projection: projection,
tileGrid: tileGrid,
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
var z = tileCoord[0];
var x = tileCoord[1];
var y = -tileCoord[2] - 1;
return "/testtiles/wz_tiles/"+z + "/" + y +"/" + x +".png";
}
}),
})
3、加载arcserver rest的本地切片
加载arcserver的本地切片时，其resolutions、origin、extent的设置与上面所述一致。arcserver切片如下图，其本质也是xyz排列存储：
arcserver切片
参考代码如下：
//本地瓦片
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
var x = 'C' + padLeft(tileCoord[1], 8, 16);
var y = 'R' + padLeft(-tileCoord[2] - 1, 8, 16);
var z = 'L' + padLeft(tileCoord[0], 2, 10);
var url = 'localtiles/' + z + '/' + z + '/' + y + '/' + x + '.png';
return url;
}
//将10进制转16进制，余位补0，凑成ArcServer的切片格式
function padLeft(val,num ,radix) {
var str = val.toString(radix || 10);
return (new Array(num).join('0') + str).slice(-num);
}