Как скачать плитки OSM для выбранной части карты - PullRequest
Новая
       42

Как скачать плитки OSM для выбранной части карты

0 голосов
/ 04 декабря 2018

Я хочу загрузить карту в автономном режиме для выбранной части карты с одним уровнем масштабирования со слоем Openlayer OSM.У меня есть четыре угла карты, то есть отображаемая часть карты.

Но нужно получить изображение всех плиток или плиток между этими четырьмя углами.Я рассмотрел пример:

Openlayers получают URL изображения плитки под мышью

https://gis.stackexchange.com/questions/167792/how-to-retrieve-the-tile-url-in-openlayers-3

Но мне нужно скачатьплитки по нажатию кнопки клиента.Может кто-нибудь, пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 13 декабря 2018

Вот простой пример сохранения тайлов в виде URL-адресов данных для последующего использования.Если вам нужно, чтобы сохраненные плитки оставались доступными после закрытия и повторного открытия браузера, замените sessionStorage на 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);
...