ol3加载arcserver rest服务

近日做完ol3加载arcserver rest服务,做一个总结,因为发现自己亲手写的ol3记载瓦片的小结,竟然自己也会忘记,还好留下了博客,好记忆不如烂笔头。同时此文也是为了完成对扯淡大叔的承诺,答应帮大叔写几篇ol3的教程,一直拖着,万分抱歉。

1、加载第三方在线acrserver rest服务

参考代码如下,可以直接访问:


上面中的参数在arcserver rest 服务的页面中找,resolutions参数,tileSize参数如下:


ol3加载arcserver rest服务_第1张图片
Paste_Image.png

origin及地图范围:arcgis的origin原点在[-400,399,99999999999],范围一般用initial extent:


ol3加载arcserver rest服务_第2张图片
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排列存储:


ol3加载arcserver rest服务_第3张图片
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);
    }

你可能感兴趣的:(ol3加载arcserver rest服务)