Bing Maps——必应地图

最新推荐文章于 2022-12-15 15:47:42 发布

桃李不言_下自成蹊

最新推荐文章于 2022-12-15 15:47:42 发布

阅读量5.7k

点赞数

分类专栏： OpenLayers3

OpenLayers3 专栏收录该内容

76 篇文章 7 订阅

订阅专栏

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>

桃李不言_下自成蹊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bing Maps——必应地图

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
复制链接

扫一扫