2025年Bing Maps——必应地图

科技前沿 • 2025-04-01 11:21 • 阅读 31

大家好，我是讯享网，很高兴认识大家。

讯享网
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 to19 in the options passed to ol.source.BingMaps.
当Bing Maps瓦片服务在一个给定的分辨率和区域下而没有瓦片时，它将会返回“占位”瓦片来表示它的位置。放大地图并超过19级，你就会看见“占位”瓦片。在缩放级别超过19级以后，如果你想让OpenLayers显示拉伸的瓦片代替“占位”瓦片，你需要通过ol.source.BingMaps来设置其maxZoom属性为19。
代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Bing Maps</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.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>
    <script src="https://openlayers.org/en/v4.2.0/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>
     //地图图像类型数组
    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://www.bingmapsportal.com/ here',
           //设置必应地图图像类型
            imagerySet: styles[i]
            // maxZoom: 19
          })
        }));
      }
      var map = new ol.Map({
        layers: layers,
        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>

讯享网

2025年Bing Maps——必应地图

相关推荐