当前位置：首页 > web >正文

OpenLayers 下载地图切片

web 2025/6/29 20:18:50

前言

在WebGIS开发中，由于计算机性能、网速等因素的影响，图层资源通常是以地图切片的形式进行加载。即水平分片，垂直分层，与金字塔结构相似。这些切片以图片的形式存储在互联网上，是可以进行下载的。本篇给大家介绍 OpenLayers 下载地图切片

1. 创建HTML

设置3个input数据框分别显示X、Y、Z切片坐标。默认值为100、54和7，可以自行修改。再添加一个切片下载按钮。

<div class="download-file"><div class="tile-number">X：<input type="number" class="x-num" value="100">Y：<input type="number" class="y-num" value="54">Z：<input type="number" class="z-num" value="7"><span id="download-kml" class="download-btn">下载地图切片</span></div>
</div>

添加结构CSS：

.download-file {position: absolute;padding: 10px;left: 50%;transform: translateX(-50%);bottom: 20px;color: #fff;border-radius: 5px;border: 1px solid #50505040;background: linear-gradient(135deg, #c850c0, #4158d0);
}.download-btn {border-radius: 5px;border: 1px solid #50505040;padding: 5px 20px;color: #fff;margin-left: 10px;background: #4646466e;transition: background-color 10s ease-in-out 10s;
}.download-btn:hover {cursor: pointer;filter: brightness(120%);background: linear-gradient(135deg, #c850c0, #4158d0);
}input {width: 100px;
}

2. 添加格网

使用TileDebug创建格网数据源，然后使用Tile创建格网图层并添加到地图中。其中template参数为显示模板，可以设置格网信息显示结构。

const TileSource = new ol.source.TileDebug({wrapX: false,template: '(x,y,z)({x},{y},{z})' // 显示模板
})
const gridLayer = new ol.layer.Tile({source: TileSource
})
map.addLayer(gridLayer)

3. 切片下载方法

利用a元素特性进行文件下载。首先创建a元素，然后通过fetch方法加载文件路径，在返回参数中将其转换为blob二进制数据，接着使用URL类的createObjectURL方法转换为url地址就可以下载了，最后别忘了使用revokeObjectURL方法释放资源。

// 下载文件方法
const linkEle = document.createElement("a")
function downloadFile(fullPath, fileName) {fetch(fullPath).then(response => response.blob()).then(blob => {const url = URL.createObjectURL(blob)linkEle.href = urllinkEle.download = fileNamelinkEle.click()// 释放 URL 对象URL.revokeObjectURL(url);})
}

4. 下载切片文件

在获取到页面切片坐标值后，将X、Y、Z的值转换为数字进行路径拼接。最后将文件名修改为切片坐标值。

const url = "http://t0.tianditu.com/DataServer?T=img_w&"
document.querySelector("#download-kml").addEventListener('click', (evt) => {const xNum = document.querySelector('.x-num').valueconst yNum = document.querySelector('.y-num').valueconst zNum = document.querySelector('.z-num').valueconst path = url + "x=" + Number(xNum) + "&y=" + Number(yNum) + "&l=" + Number(zNum) + "&tk=" + TDTTOKEN// console.log(path)downloadFile(path, xNum + "-" + yNum + "-" + zNum + ".png")
})

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="../../libs/js/ol9.2.4.js"></script><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;top: 50px;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;}.download-file {position: absolute;padding: 10px;left: 50%;transform: translateX(-50%);bottom: 20px;color: #fff;border-radius: 5px;border: 1px solid #50505040;background: linear-gradient(135deg, #c850c0, #4158d0);}.download-btn {border-radius: 5px;border: 1px solid #50505040;padding: 5px 20px;color: #fff;margin-left: 10px;background: #4646466e;transition: background-color 10s ease-in-out 10s;}.download-btn:hover {cursor: pointer;filter: brightness(120%);background: linear-gradient(135deg, #c850c0, #4158d0);}input {width: 100px;}</style>
</head><body><div id="top-content"><span>OpenLayers 下载地图切片</span></div><div id="map" title="地图显示"></div><div class="download-file"><div class="tile-number">X：<input type="number" class="x-num" value="100">Y：<input type="number" class="y-num" value="54">Z：<input type="number" class="z-num" value="7"><span id="download-kml" class="download-btn">下载地图切片</span></div></div>
</body></html><script>//地图投影坐标系const projection = ol.proj.get('EPSG:3857');//==============================================================================////============================天地图服务参数简单介绍==============================////================================vec：矢量图层==================================////================================img：影像图层==================================////================================cva：注记图层==================================////======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================////==============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地图影像图层",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 map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [102.845864, 25.421639],zoom: 6.5,worldsWrap: false,minZoom: 1,maxZoom: 20,projection: 'EPSG:4326'}),layers: [TDTImgLayer],// 地图默认控件controls: ol.control.defaults.defaults({zoom: false,attribution: false,rotate: false})})map.on('click', evt => {console.log("获取地图坐标：", evt.coordinate)})const TileSource = new ol.source.TileDebug({// projection: map.getView().getProjection(),wrapX: false,template: '(x,y,z)({x},{y},{z})' // 显示结构})const gridLayer = new ol.layer.Tile({source: TileSource})map.addLayer(gridLayer)// 下载文件方法const linkEle = document.createElement("a")function downloadFile(fullPath, fileName) {fetch(fullPath).then(response => response.blob()).then(blob => {const url = URL.createObjectURL(blob)console.log(url)linkEle.href = urllinkEle.download = fileNamelinkEle.click()// 释放 URL 对象URL.revokeObjectURL(url);})}const url = "http://t0.tianditu.com/DataServer?T=img_w&"document.querySelector("#download-kml").addEventListener('click', (evt) => {const xNum = document.querySelector('.x-num').valueconst yNum = document.querySelector('.y-num').valueconst zNum = document.querySelector('.z-num').valueconst path = url + "x=" + Number(xNum) + "&y=" + Number(yNum) + "&l=" + Number(zNum) + "&tk=" + TDTTOKEN// console.log(path)downloadFile(path, xNum + "-" + yNum + "-" + zNum + ".png")})
</script>