openlayers加载本地arcgis切片（explodes）的两种方式，利用geowebcache进行发布和直接读取本地切片

由于Arcgis的普及，经常会使用ArcgisServer对地图进行切片，且缓存在本地。如果能使用开源工具对该本地缓存进行加载的话，有时候能够节省不少精力和时间，因此本人对openlayers加载arcgis本地切片进行了总结，上代码：

   
     /*   *************************************************************************************
        opnelyers加载arcgis生成的离线切片，通过独立的geowebcache发布
        *********************** ***/ 
        //对应源代码中的投影
    var projection = ol.proj.get('EPSG:4326')
    //对应源代码中的源信息
    var origin = [-2.0037508342787E7, 2.0037508342787E7]
    //对应源代码中的全图范围信息
    var fullExtent = [-20037508.342787,-20037508.342781033,20037508.342781033,20037508.342787]
    //对应源代码中的切片方案信息
    var resolutions = [156543.03392800014, 78271.51696399994, 39135.75848200009, 19567.87924099992, 9783.93962049996, 4891.96981024998, 2445.98490512499, 1222.992452562495, 611.4962262813797, 305.74811314055756, 152.87405657041106, 76.43702828507324, 38.21851414253662, 19.10925707126831, 9.554628535634155, 4.77731426794937, 2.388657133974685, 1.1943285668550503, 0.5971642835598172, 0.29858214164761665]
    var tileGrid = new ol.tilegrid.TileGrid({
        tileSize: 256,
        origin: origin,
        extent: fullExtent,
        resolutions: resolutions
    })
    //url是本地的geowebcache的地址
    //params中 Layers是对应的服务名称，format是图片格式，SRS是地图的坐标系
    //view中中心坐标填写，上述查看的中心坐标
    //view的resolution填写切片方案数组中的其中一个数字。
    var map = new ol.Map({
        target: 'map',
        layers: [new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: "http://localhost:8080/geowebcache/service/wms",
                params: {'LAYERS': 'yantianzhan', format: 'image/png', SRS: 'EPSG:3857'},
                tileGrid: tileGrid
            })
        })],
        view: new ol.View({
            center: [12718306.88608,2582748.73684],
            resolutions: resolutions,
            resolution: 0.00475892201166056,
            projection: 'EPSG:3857',
            extent: fullExtent
        })
    })


/*直接加载arcgis发布的离线切片，缺点：如果是矢量数据，切片样式也是白底的影像图，但是切片级别不高的话，清晰度就不够*/

var map = new ol.Map({
            layers: [],
            target: 'map',
            view: new ol.View({
              center: [114.23771356083947,22.56698437084834],
              zoom: 14,//根据切片有数据的层级进行设置
              projection: 'EPSG:4326'
            })
        });
    // ol.source.XYZ添加瓦片地图的层
    var tileLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tileUrlFunction: function (tileCoord) {
                console.log(tileCoord);
                //alert(tileCoord[0] + " X= " + tileCoord[1] + " Y= " + tileCoord[2]);
                var oo = "00000000";
                var zz = tileCoord[0];
                var z = "L" + zz;
                var xx = tileCoord[1].toString(16);
                var x = "C" + oo.substring(0, 8 - xx.length) + xx;
                var yy = (-tileCoord[2] - 1).toString(16); //注意此处，计算方式变了
                var y = "R" + oo.substring(0, 8 - yy.length) + yy;
                return  'D:/szdt_Tiledata/szdt_CAD_lianwuqujian/yantianlayer/_alllayers/' + z + '/' + y + '/' + x + '.png';
            },
            projection: 'EPSG:3857'//注意这里的坐标系统，通过conf.xml配置文件获取。
        })
    });
    map.addLayer(tileLayer)

 其中geowebcache 的resolutions的获取在打开geowebcache的tile excample 页面中对应的服务图层页面，点击进去后，查看网页源代码就能看到该图层服务的resolutions。

参考链接：https://blog.csdn.net/LoveCarpenter/article/details/80743052

转载自：https://blog.csdn.net/qq_26991807/article/details/81712917