Openlayers中加载Geoserver切割的EPSG:900913离线瓦片图层组

场景

Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示：

Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示_BADAO_LIUMANG_QIZHI的博客-CSDN博客

上面讲的是切割单个图层并显示离线瓦片地图，如果是一个图层组，包含多个图层的话要怎么加载显示。

比如这个图层组的预览中有三个图层，灰色线是一个图层，黑色线是一个图层，文字是一个图层。

这种多图层的图层组怎样切割瓦片并离线加载显示。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、依次将上面三个图层分别切割成同等层级的离线瓦片png照片。

如下依次放在三个目录下

2、声明三个地图图层对象

        new Vue({
            el: '#app',
            data() {
                return {
                    vectorLayer: null, // layer
                    map: null, // 地图
                    layers1: null, // 地图图层
                    layers2: null, // 地图图层
                    layers3: null, // 地图图层

3、在地图初始化执行的方法中依次对这三个图层进行不同url的初始化

                    let self = this
                    self.layers1 = new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            tileUrlFunction: function (xyz, obj1, obj2) {
                                if (!xyz) return ''
                                var z = xyz[0]
                                var x = Math.abs(xyz[1])
                                var y = Math.abs(xyz[2])
                                var xyz_convert = self.convert_(z, x, y)
                                x = xyz_convert[0]
                                y = xyz_convert[1]
                                z = xyz_convert[2]
                                var shift = z / 2
                                var half = 2 << shift
                                var digits = 1
                                if (half > 10)
                                    digits = parseInt(Math.log(half) / Math.log(10)) + 1
                                var halfx = parseInt(x / half)
                                var halfy = parseInt(y / half)
                                x = parseInt(x)
                                y = parseInt(y) - 1
                                var url = './images/newJer_Polyline2/EPSG_900913' +