如何使用 OpenLayers 显示 Bing 地图图层答案

【问题标题】：How to show Bing map layers with OpenLayers如何使用 OpenLayers 显示 Bing 地图图层
【发布时间】：2019-08-28 16:30:03
【问题描述】：

我想使用 OpenLayers 在 HTML 页面上显示 Bing 地图图层。我也有 Bing API，但没有显示地图。这是我下载并更改的代码。我的 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>

【问题讨论】：

标签： javascript openlayers bing-maps

【解决方案1】：

该代码中有两个语法错误

    layers.push(new ol.layers.TileLayer({

应该是

    layers.push(new ol.layer.Tile({

和

        imagerySet: styles[i]

需要一个逗号，因为它后面是maxZoom

        imagerySet: styles[i],

Collins Bart os 也不再受支持，但有一种新的 Road dark 风格可用

<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'
  ];

【讨论】：