OpenLayers 下载地图切片

发布于：2025-06-29 ⋅ 阅读:(13) ⋅ 点赞:(0)

前言

在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 = url
            linkEle.download = fileName
            linkEle.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').value
    const yNum = document.querySelector('.y-num').value
    const zNum = document.querySelector('.z-num').value
    const 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 = url
                linkEle.download = fileName
                linkEle.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').value
        const yNum = document.querySelector('.y-num').value
        const zNum = document.querySelector('.z-num').value
        const path = url + "x=" + Number(xNum) + "&y=" + Number(yNum) + "&l=" + Number(zNum) + "&tk=" + TDTTOKEN
        // console.log(path)
        downloadFile(path, xNum + "-" + yNum + "-" + zNum + ".png")
    })
</script>

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注 哦 ！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布