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

Question

I want to show the Bing map layers on the HTML page using OpenLayers. 我想使用OpenLayers在HTML页面上显示Bing地图图层。 I've got the Bing API too, but the map is not shown. 我也有Bing API，但未显示地图。 This is the code I have downloaded and changed. 这是我下载并更改的代码。 Is my API wrong? 我的API错误吗？ I got the API recently from the site. 我最近从该站点获得了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>

Answer 1

There are two syntax errors in that code 该代码中有两个语法错误

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

should be 应该

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

and 和

        imagerySet: styles[i]

needs a comma because it is followed by maxZoom 需要逗号，因为它后面是maxZoom

        imagerySet: styles[i],

Also Collins Bart os no longer supported, but there is a new Road dark style available 不再支持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'
  ];

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-05-31 20:44:14

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-05-31 20:44:14

解决方案1
1 已采纳 2019-05-31 20:44:14