我一直想知道是否可以使用脚本从公共(public)资源加载 map 并使用 OpenLayers 显示它。它还将允许创建 map 切片缓存以允许更快的加载时间。 所以我的问题是如何使用来自本地托管脚本的 XYZ 源在 OpenLayers 中加载 map ？
最佳答案
这是我的快速解决方案:
首先，我创建了一个代理脚本来为我加载文件:
<?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
?>
之后，我有一个简单的例子来加载这个代理脚本提供的 map :
<!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>
如果您在浏览器中从外部源加载图 block 时遇到问题，这将非常有用。
关于javascript - 带有 map 代理脚本的 OpenLayers XYZ 示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56893067/