从 Openstreetmap 缓存切片

Posted 2023-03-29

【中文标题】从 Openstreetmap 缓存切片

【英文标题】：Cache tiles from Openstreetmap

【发布时间】：2014-05-14 17:36:02

【问题描述】：

我想用 html 制作一个离线地图应用程序。我正在使用Openlayers 3

我可以从 Openstreetmap 保存图块，这不是问题。

我的问题：

当我有一个像这样的正方形时： LonLat1, LonLat2

1------

-------2

如何计算在多个缩放级别上我必须抓取哪些图块

缓存所有：'z/x/y.png' 图块

后来我像这样离线使用它们

var map = new ol.Map(
    target: 'map',
    layers: [new ol.layer.Tile(
            source: new ol.source.XYZ(
            url: 'z/x/y.png'
        )
    )], ...

【问题讨论】：

Lukas Vrabel 的答案***.com/questions/21513646/… 解决了这个问题，尽管在传单中，数学上是一样的。

这看起来很棒。明天我将尝试制作一个 jsfiddle 进行测试。

如果您打算直接从 osm.org 下载，您还应该了解 Tile 使用政策：wiki.openstreetmap.org/wiki/Tile_usage_policy

【参考方案1】：

我解决了问题 Tnx to John Barca 的链接！

做了一个小提琴：

Fiddle

Fiddle Full Screen

包括 ol3.js / ol3.css / jquery

html:

javascript：

var map;
var icons = [];
var selMarker;
var click = 0;
var tmpCoord;

map = new ol.Map(
    layers: [
    new ol.layer.Tile(source: new ol.source.OSM()),
    new ol.layer.Vector(      
        source: new ol.source.Vector(features:icons)
    )],
    renderer: "canvas",
    target: 'map',
    view: new ol.View2D(
        zoom: 11
    )
);

map.getView().setCenter(transform(5, 52));

map.on("click", function(evt)
    var coordinate = evt.coordinate;
    if(click == 0) 
        tmpCoord = coordinate;
        click++;
     else 
        addVierkant(tmpCoord, coordinate);
        click = 0;
        getAllTiles(tmpCoord, coordinate);
       
    addCircle(coordinate);
)

function transform(lng, lat) 
    return ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857');


function transform2(lng, lat) 
    return ol.proj.transform([lng, lat], 'EPSG:3857', 'EPSG:4326');


function addCircle(c) 
    var source = map.getLayers().getAt(1).getSource();
    var iconFeature = new ol.Feature(
      geometry: new ol.geom.Circle(c, 300),
    );
    iconFeature.setStyle(getCircleStyle());
    icons[icons.length] = iconFeature;
    icons[icons.length - 1][0] = "circle";
    source.addFeature(iconFeature);
    return iconFeature;


function addVierkant(c1, c2) 
    var source = map.getLayers().getAt(1).getSource();
    p1 = c1;
    p2 = [c1[0], c2[1]];
    p3 = c2;
    p4 = [c2[0], c1[1]];
    var coords = [p1,p2,p3,p4,p1];
    var iconFeature = new ol.Feature(
      geometry: new ol.geom.LineString(coords),
    );
    iconFeature.setStyle(getVierkantStyle());
    icons[icons.length] = iconFeature;
    icons[icons.length - 1][0] = "vierkant";
    source.addFeature(iconFeature);
    return iconFeature;


function getCircleStyle() 
  var iconStyle = new ol.style.Style(
      stroke: new ol.style.Stroke(
          color: 'rgba(0,0,0,0.3)',
          width: 4
      ),
      fill: new ol.style.Fill(
          color: 'rgba(255,255,255,0.9)'
      )
    );
    return iconStyle;


function getVierkantStyle() 
  var iconStyle = new ol.style.Style(
      stroke: new ol.style.Stroke(
          color: 'rgba(255,255,255,0.9)',
          width: 2
      )
    );
    return iconStyle;


function getAllTiles(coord1, coord2) 
    out1 = getTileURL(coord1, 10);
    out2 = getTileURL(coord2, 10);

    $("#output").html("zoom ------ " + out1[0] + "<br>from " + out1[1] + " to " + out2[1] + "<br>from " + out1[2] + " to " + out2[2]);




function getTileURL(coord, zoom) 
        cor = transform2(coord[0], coord[1]);
        lon = cor[0];
        lat = cor[1];
        var out = [];
        var xtile = parseInt(Math.floor( (lon + 180) / 360 * (1<<zoom) ));
        var ytile = parseInt(Math.floor( (1 - Math.log(Math.tan(lat.toRad()) + 1 / Math.cos(lat.toRad())) / Math.PI) / 2 * (1<<zoom) ));
        log(">> " + zoom + "/" + xtile + "/" + ytile);
        out[0] = zoom;
        out[1] = xtile;
        out[2] = ytile;
        return out;



function log(text) 
    console.log(text);


if (typeof(Number.prototype.toRad) === "undefined") 
  Number.prototype.toRad = function() 
    return this * Math.PI / 180;