近日做完ol3加載arcserver rest服務(wù)贺辰，做一個總結(jié)户盯，因為發(fā)現(xiàn)自己親手寫的ol3記載瓦片的小結(jié)，竟然自己也會忘記饲化，還好留下了博客莽鸭，好記憶不如爛筆頭。同時此文也是為了完成對扯淡大叔的承諾吃靠，答應(yīng)幫大叔寫幾篇ol3的教程硫眨，一直拖著，萬分抱歉巢块。

1礁阁、加載第三方在線acrserver rest服務(wù)

參考代碼如下巧号，可以直接訪問：

<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>

上面中的參數(shù)在arcserver rest 服務(wù)的頁面中找，resolutions參數(shù)姥闭，tileSize參數(shù)如下：

Paste_Image.png

origin及地圖范圍：arcgis的origin原點在[-400,399,99999999999]丹鸿，范圍一般用initial extent：

Paste_Image.png

PS：在作者的幾次項目實踐中發(fā)現(xiàn)，initial extent與full extent都有可能棚品，可能和第三方發(fā)布的服務(wù)配置有關(guān)靠欢，待進(jìn)一步確認(rèn)？

2铜跑、加載第三方arcserver rest服務(wù)的離線瓦片

也可以通過作者發(fā)布的瓦片下載工具（工具按照wmts規(guī)則存儲離線瓦片） 门怪，下載第三方arcgis rest服務(wù)的瓦片到本地，用ol3加載離線瓦片锅纺。通過觀察arcgis rest發(fā)布的瓦片是WMTS規(guī)則薪缆，瓦片坐標(biāo)從左上角到右下角遞增，加載arcgis rest的離線瓦片參考如下伞广，其余代碼及參數(shù)設(shè)置與上面所述一致：

 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的設(shè)置與上面所述一致。arcserver切片如下圖区丑，其本質(zhì)也是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進(jìn)制轉(zhuǎn)16進(jìn)制拧粪，余位補(bǔ)0，湊成ArcServer的切片格式
    function padLeft(val,num ,radix) {
        var str = val.toString(radix || 10);
        return (new Array(num).join('0') + str).slice(-num);
    }