如何为地图的选定部分下载OSM磁贴 [英] How to download the OSM tiles for selected part of map

问题描述

我想为带有Openlayer OSM图层的单个缩放级别的地图的选定部分离线下载地图.我有地图的四个角，即地图的显示部分.

I want to download the map offline for a selected part of the map with single Zoom level with Openlayer OSM layer. I have got the four corner of map i.e display section of a map.

但是需要获取所有四个图块或四个角之间的图块.我查看了一些示例:

But need to get the all tiles image or tiles between that four corners. I have reviewed some example:

Openlayers获取在鼠标下方平铺

https://gis.stackexchange.com /questions/167792/如何获取"tile-url-in-openlayers-3"

但是我需要在客户按钮单击上下载磁贴.谁能帮我.

But I need to download the tiles on customer button click. Can anyone please help me.

推荐答案

下面是一个简单的示例，将图块保存为数据url供以后使用.如果您需要在关闭并重新打开浏览器后保留已保存的切片以保持可用状态，请使用localStorage替换sessionStorage.

Here's a simple example to save tiles as data urls for later use. If you need saved tiles to remain available after closing and reopening the browser replace sessionStorage with localStorage.

// load OSM zoom level 8 tiles for Switzerland to data urls

var extent = ol.proj.transformExtent([5.9,45.8,10.55,47.85],'EPSG:4326','EPSG:3857');
var zoom = 8;

var source = new ol.source.OSM();

source.getTileGrid().forEachTileCoord(extent, zoom, function(tileCoord) {
    var img = document.createElement("img");
    img.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = source.getTileGrid().getTileSize(zoom);
        canvas.height = source.getTileGrid().getTileSize(zoom);
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        sessionStorage.setItem('OSM_' + tileCoord[0] + '_' + tileCoord[1] + '_' + (-tileCoord[2]-1), canvas.toDataURL());
        img.remove();
        canvas.remove();
    };
    img.crossOrigin = "Anonymous";
    img.src = source.getTileUrlFunction()(tileCoord);
});

// wait a few seconds to ensure data urls are ready, then create a map to use them

setTimeout(function(){

    map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                extent: extent,
                source: new ol.source.XYZ({
                    attributions: ol.source.OSM.ATTRIBUTION,
                    maxZoom: 8,
                    minZoom: 8,
                    tileUrlFunction: function(tileCoord) {
                        return sessionStorage.getItem('OSM_' + tileCoord[0] + '_' + tileCoord[1] + '_' + (-tileCoord[2]-1));
                    }
                }),
            })
        ],
        view: new ol.View({
            center: ol.extent.getCenter(extent),
            zoom: 8
        }),
        controls: ol.control.defaults({
            attributionOptions: { collapsible: false },
        })
    });

}, 3000);

这篇关于如何为地图的选定部分下载OSM磁贴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！