OpenLayers示例代码：可重复使用的源
OpenLayers示例代码：可重复使用的源
<!DOCTYPE html>
<html>
<head>
<title>Reusable Source</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<button class="switcher" value="0">January</button>
<button class="switcher" value="1">January (with bathymetry)</button>
<button class="switcher" value="2">July</button>
<button class="switcher" value="3">July (with bathymetry)</button>
<script>
var urls = [
'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png',
'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png',
'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png',
'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png'
];
var source = new ol.source.XYZ();
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: source
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
function updateUrl(index) {
source.setUrl(urls[index]);
}
var buttons = document.getElementsByClassName('switcher');
for (var i = 0, ii = buttons.length; i < ii; ++i) {
var button = buttons[i];
button.addEventListener('click', updateUrl.bind(null, Number(button.value)));
}
updateUrl(0);
</script>
</body>
</html>
说明：
OpenLayers示例代码：可重复使用的源
