OpenLayers3-5-Bing Maps
原文地址：http://openlayers.org/en/v3.12.1/examples/bing-maps.html
When the Bing Maps tile service doesn’t have tiles for a given resolution and region it returns “placeholder” tiles indicating that. Zoom the map beyond level 19 to see the “placeholder” tiles. If you want OpenLayers to display stretched tiles in place of “placeholder” tiles beyond zoom level 19 then set maxZoom to 19 in the options passed to ol.source.BingMaps.
Related API documentation: ol.Map,ol.View,ol.layer.Tile,ol.source.BingMaps
翻译：
当Bing地图切片服务没有给定的相关区域的切片的时候，它会返回“placeholder”切片来表示。缩放到19级以上的时候，你就会看到“placeholder”。如果你想OpenLayers在19级以上的时候展现额外的切片地图来替代“placeholder”切片，那么，设置ol.source.BingMaps的maxZoom的属性为19，以便缩放到19级以上的时候跳过Bing地图切片服务。
相关的api文档包括：
ol.Map,ol.View,ol.layer.Tile,ol.source.BingMaps
<!DOCTYPE html>
<html>
<head>
<title>Bing Maps</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<select id="layer-select">
<option value="Aerial">Aerial</option>
<option value="AerialWithLabels" selected>Aerial with labels</option>
<option value="Road">Road</option>
<option value="collinsBart">Collins Bart</option>
<option value="ordnanceSurvey">Ordnance Survey</option>
</select>
<script>
//bing 自带的各种样式
var styles = [
'Road',
'Aerial',
'AerialWithLabels',
'collinsBart',
'ordnanceSurvey'
];
var layers = [];
var i, ii;
for (i = 0, ii = styles.length; i < ii; ++i) {
layers.push(new ol.layer.Tile({
visible: false,
preload: Infinity,
source: new ol.source.BingMaps({
key: 'Your Bing Maps Key from http://bingmapsportal.com/ here',
imagerySet: styles[i]
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
})
}));
}
var map = new ol.Map({
layers: layers,
// Improve user experience by loading tiles while dragging/zooming. Will make
// zooming choppy on mobile or slow devices.
loadTilesWhileInteracting: true,
target: 'map',
view: new ol.View({
center: [-6655.5402445057125, 6709968.258934638],
zoom: 13
})
});
var select = document.getElementById('layer-select');
function onChange() {
var style = select.value;
for (var i = 0, ii = layers.length; i < ii; ++i) {
layers[i].setVisible(styles[i] === style);
}
}
select.addEventListener('change', onChange);
onChange();
</script>
</body>
</html>转载自：https://blog.csdn.net/isowang/article/details/50526867
