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

迈不过友情╰ 2023-10-01 15:37 51阅读 0赞

## 场景 ##

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

[Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Openlayers_Geoserver_EPSG_900913_BADAO_LIUMANG_QIZHI_-CSDN]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_15_color_FFFFFF_t_70_g_se_x_16][]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

注：

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

## 实现 ##

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

如下依次放在三个目录下

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_14_color_FFFFFF_t_70_g_se_x_16][]

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

[Openlayers_Geoserver_EPSG_900913_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118492511
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/fa0435cb1f7d4b44b7ad5b6fae8747f4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e82c8d51a40a4de79e4246487dd55694.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/07bf38272b0b4e8396a30dc08d952b46.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_14,color_FFFFFF,t_70,g_se,x_16