Вот мое быстрое решение для этого:
Сначала я создал прокси-скрипт для загрузки файлов для меня:
<?php
header('Content-type: image/png');
$x = $_GET['x'];
$y = $_GET['y'];
$z = $_GET['z'];
$urlBegin = 'https://b.tile.openstreetmap.org';
$urlEnd = '.png';
$fullUrl = "$urlBegin/$z/$x/$y$urlEnd";
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => $fullUrl,
CURLOPT_USERAGENT => 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.108 Safari/537.36'
]);
$content = curl_exec($curl);
curl_close($curl);
echo $content
?>
После этого у меня есть простой пример, который загружает карты, предоставленные этим прокси-скриптом:
<!DOCTYPE html>
<html>
<head>
<title>XYZ Example</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
</head>
<body>
<div id="map" class="map"></div>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'fetch_map.php?z={z}&x={x}&y={y}'
})
})
],
view: new ol.View({
center: [0, 0],
zoom: 5
})
});
</script>
</body>
</html>
Это очень полезно, если у вас возникают проблемы с загрузкой плиток из внешнего источника в браузере.