场景
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' +