我想使用 OpenLayers 在 HTML 页面上显示 Bing map 图层。我也有 Bing API，但没有显示 map 。这是我下载并更改的代码。是我的API错误吗？我最近从该网站获得了 API。
<!DOCTYPE html>
<html>
<head>
<title>Show OSM map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/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>
<style>
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.map {
height: 90%;
width: 100%;
}
</style>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map" "></div>
<div>
<select id="layer-select">
<option value="Aerial">Aerial</option>
<option value="AerialWithLabels" selected>Aerial with labels</option>
<option value="Road">Road (static)</option>
<option value="RoadOnDemand">Road (dynamic)</option>
<option value="collinsBart">Collins Bart</option>
<option value="ordnanceSurvey">Ordnance Survey</option>
</select>
</div>
<script>
var styles = [
'Road',
'RoadOnDemand',
'Aerial',
'AerialWithLabels',
'collinsBart',
'ordnanceSurvey'
];
var layers = [];
var i, ii;
for (i = 0, ii = styles.length; i < ii; ++i) {
layers.push(new ol.layers.TileLayer({
visible: false,
preload: Infinity,
source: new ol.source.BingMaps({
key: '------------',
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>
最佳答案
该代码中有两个语法错误
layers.push(new ol.layers.TileLayer({
应该是
layers.push(new ol.layer.Tile({
和
imagerySet: styles[i]
需要逗号，因为它后面是 maxZoom
imagerySet: styles[i],
Collins Bart 操作系统也不再受支持，但有新的 Road 深色风格可用
<select id="layer-select">
<option value="Aerial">Aerial</option>
<option value="AerialWithLabels" selected>Aerial with labels</option>
<option value="Road">Road (static)</option>
<option value="RoadOnDemand">Road (dynamic)</option>
<option value="CanvasDark">Road dark</option>
<option value="ordnanceSurvey">Ordnance Survey</option>
</select>
</div>
<script>
var styles = [
'Road',
'RoadOnDemand',
'Aerial',
'AerialWithLabels',
'CanvasDark',
'ordnanceSurvey'
];
关于javascript - 如何使用 OpenLayers 显示 Bing map 图层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56400595/