^ 关注我，带你一起学GIS ^
注：当前使用的是 ol [9.2.4] 版本，天地图使用的key请到天地图官网申请，并替换为自己的key
前言
❝在GIS中，切片预加载技术主要用于提升地图浏览的流畅性和用户体验，特别是在OpenLayers开发库中。通过提前加载当前视图周边区域的地图切片，预加载技术可以减少用户平移或缩放地图时的等待时间，避免出现空白区域，确保地图显示的连续性和响应速度。这对于网络条件较差或数据量较大的场景尤为重要，能够显著提升地图应用的性能。
1. 预加载属性
TileLayer对象属性preload用于控制切片图层预加载。preload属性为Number类型，默认值是0。设置preload值用于加载低分辨率切片，该值代表最高预加载级别，0表示没有预加载。
2. 创建预加载图层
demo中以天地图影像为例，设置preload值为Infinity（无限大），表示预加载最高级别。
const TDTImgPreload = new ol.layer.Tile({
title: "天地图影像图层",
preload: Infinity,
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
attibutions: "天地图影像描述",
crossOrigin: "anoymous",
wrapX: false
})
})
3. 共享视图
在两个地图对比查看时需要地图进行联动，有两种方式可以实现。其一是在创建好两个地图后设置一个的视图为另一个的视图；其二是两个地图共享一个视图。
方式一：利用setView方法设置视图
const mapTop = new ol.Map({
target: "map-top",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [102.845864, 25.421639],
zoom: 5,
worldsWrap: false,
minZoom: 1,
maxZoom: 20,
projection: 'EPSG:4326',
}),
layers: [TDTImgPreload]
})
const mapBottom = new ol.Map({
target: "map-bottom",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [102.845864, 25.421639],
zoom: 5,
worldsWrap: false,
minZoom: 1,
maxZoom: 20,
projection: 'EPSG:4326',
}),
layers: [TDTImgUnPreload, TDTImgCvaLayer]
})
mapTop.setView(mapBottom.getView())
方式二：共享同一视图
const view = new ol.View({
center: [102.845864, 25.421639],
zoom: 5,
worldsWrap: false,
minZoom: 1,
maxZoom: 20,
projection: 'EPSG:4326',
}),
const mapTop = new ol.Map({
target: "map-top",
loadTilesWhileInteracting: true,
view:view,
layers: [TDTImgPreload]
})
const mapBottom = new ol.Map({
target: "map-bottom",
loadTilesWhileInteracting: true,
view:view,
layers: [TDTImgUnPreload, TDTImgCvaLayer]
})
4. 加载效果
位于上方的图层使用切片预加载，位于下方的图层未使用，在缩放和平移过程中，可以看到上方图层加载过程表现更完美，没有出现空白。对于下方未使用切片预加载的图层，切片加载速度稍慢，而且会出现一些空白。
5. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OpenLayers 切片预加载</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../libs/css/ol9.2.4.css">
<script src="../../js/config.js"></script>
<script src="../../js/util.js"></script>
<script src="../../libs/js/ol9.2.4.js"></script>
<style>
* {
padding: 0;
margin: 0;
font-size: 14px;
font-family: '微软雅黑';
}
html,
body {
width: 100%;
height: 100%;
}
#map-top {
position: absolute;
top: 50px;
bottom: 50%;
width: 100%;
}
#map-bottom {
position: absolute;
top: 50%;
bottom: 0;
width: 100%;
}
#top-content {
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
color: #fff;
text-align: center;
font-size: 32px;
}
#top-content span {
font-size: 32px;
}
</style>
</head>
<body>
<div id="top-content">
<span>OpenLayers 切片预加载</span>
</div>
<div id="map-top" title=""></div>
<div id="map-bottom" title=""></div>
</body>
</html>
<script>
//地图投影坐标系
const projection = ol.proj.get('EPSG:3857');
//==============================================================================//
//============================天地图服务参数简单介绍==============================//
//================================vec：矢量图层==================================//
//================================img：影像图层==================================//
//================================cva：注记图层==================================//
//======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//
//==============================================================================//
const TDTImgPreload = new ol.layer.Tile({
title: "天地图影像图层",
preload: Infinity,
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
attibutions: "天地图影像描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const TDTImgUnPreload = new ol.layer.Tile({
title: "天地图影像图层",
preload: 0,
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
attibutions: "天地图影像描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const TDTImgCvaLayer = new ol.layer.Tile({
title: "天地图影像注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const mapTop = new ol.Map({
target: "map-top",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [102.845864, 25.421639],
zoom: 5,
worldsWrap: false,
minZoom: 1,
maxZoom: 20,
projection: 'EPSG:4326',
}),
layers: [TDTImgPreload]
})
const mapBottom = new ol.Map({
target: "map-bottom",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [102.845864, 25.421639],
zoom: 5,
worldsWrap: false,
minZoom: 1,
maxZoom: 20,
projection: 'EPSG:4326',
}),
layers: [TDTImgUnPreload, TDTImgCvaLayer]
})
mapTop.setView(mapBottom.getView())
</script>❝
OpenLayers示例数据下载，请在公众号后台回复：ol数据
全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试
❝
GIS之路公众号已经接入了智能助手，欢迎大家前来提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏+关注 哦！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 
