openlayers加载切片原理

教程目录

openlayers加载切片加载方法及切片加载原理,加载demo代码详解

一、切片加载方法

1、代码


   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';//这里可以修改地图路径
        }
    });

2、代码分析

这里首先要讲一下wms瓦片坐标系,origin在左下角,x坐标从左向右为正,y坐标从下到上为正,如图:

        openlayers中的瓦片坐标系正好也是这个样子的,如果我们使用arcgis切图是按照wms标准的格式切的,那么很好,我们就不用XYZ转换了(准确的说只用将十进制的数据转换为十六进制就ok),但是不幸的是arcgis server使用的是wmts标准进行切图的,那么wmts标准与mws有什么不同呢?

wmts切片标准以左上角为origin,x坐标从左向右为正,y坐标从上向下为正,如下图:

        然后你就能很清楚的猜到为啥要进行XYZ的转换了,这里x对应column,y对应row,z对应level,x转为16进制并在前面添加了C,z转为16进制并在前面添加了L,y在openlayers中的瓦片坐标系不等于wmts切片坐标系,-y-1才对应,如(0,1,-2)对应(0,1,1),所以就有了上面的代码,好啦,自己琢磨一下吧。

3、参数解释

这个在上面例子的基础上自定义了openlayers瓦片坐标系。

对比加载离线标准切片发现,首先是将openlayers中的瓦片坐标系(瓦片排列规则)对应成我们切图的规则坐标系,其次是自定义了openlayers坐标系,主要是对tileGrid的自定义,其中包括tileSize、origin、resolution、extent。

origin指的是切片坐标(0,0)的位置,必写;

resolution指的是每一层切片的分辨率,每个像素代表的实际距离,必写;

tileSize指的是每张切片的pix,默认为256*256;

extent指的是显示的范围;

二、切片加载原理

        下面使用自己画的一张对应图来易于理解:

        左图黑色为openlayers坐标系,红色为切片坐标系(tms切片标准);

右图红色为已有切片坐标系(arcgis切片,wmts标准);

因为origin设置的为切图原点,为切图左上角,所以切片坐标系tileUrlFunction中所有的x坐标为正,切片y坐标为负;对应到已有的切片坐标系关系为-x-1;

        如果你实在不好看出来,openlayers提供了tiledebug来显示瓦片信息,你可以修改一下source试试:

    // 瓦片数据源
    var tileArcGISXYZ = new ol.source.TileDebug({
        tileGrid: tileGrid,
        projection: projection,
    });

然后你将会看到:

        上面的中间的信息就是切片坐标系中的坐标,也就是tileUrlFunction中的XYZ,然后你要做的就是把它对应成已有切片坐标系中的切片,so easy了,臣妾只能帮你到这里了==

转载自:https://blog.csdn.net/xcymorningsun/article/details/84788549

You may also like...