Openlayers示例8 | Bing Maps

Bing Maps
要申请key才可以使用

当Bing Maps的tile服务没有给定分辨率和区域的tile时，它会返回“占位符”的tile来表示。
将地图放大到19级以上，可以看到“占位符”贴图。
如果你想让OpenLayers显示拉伸瓷砖取代“占位符”瓷砖超越缩放级别19，然后设置maxZoom为19在选项传递到ol/source/BingMaps。

<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <!-- 引入OpenLayers CSS样式 -->
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css">
  <!-- 引入OpenLayers JS库 -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
  <!-- css代码 -->
  <style>
    .map {
      width: 100%;
      height: 400px;
    }
  </style>
  <title>Bing Maps</title>
</head>
<body>
  <div id="map" class="map"></div>
  <select id="layer-select">
    <option value="Aerial">Aerial</option>
    <option value="AerialWithLabelsOnDemand" selected>Aerial with labels</option>
    <option value="RoadOnDemand">Road</option>
    <option value="CanvasDark">Road dark</option>
    <option value="OrdnanceSurvey">Ordnance Survey</option>
  </select>
</body>
<script>
  const styles = [
    'RoadOnDemand',
    'Aerial',
    'AerialWithLabelsOnDemand',
    'CanvasDark',
    'OrdnanceSurvey',
  ];
  const layers = [];
  let 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 https://www.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
        }),
      })
    );
  }
  const map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
      center: [-6655.5402445057125, 6709968.258934638],
      zoom: 13,
    }),
  });

  const select = document.getElementById('layer-select');
  function onChange() {
    const style = select.value;
    for (let i = 0, ii = layers.length; i < ii; ++i) {
      layers[i].setVisible(styles[i] === style);
    }
  }
  select.addEventListener('change', onChange);
  onChange();
</script>
</html>