跟着实例学习OpenLayers（一）

<a class="skiplink" href="#map">Go to map</a>

tabindex表示map默认获得焦点，可通过tap键进行切换。当map失去焦点时，可以通过点击“Go to map”这个链接重新回到map，使map获得焦点

2.animation.html

利用view.animate设置动画效果，如从一个点移动到另一个点时

onClick('pan-to-london', function() {
        view.animate({
          center: london,
          duration: 2000
        });
      });

3.arcgis-tiled.html

展示如何使用ArcGIS REST MapService作为tiles。这种类型的source支持Map和Image服务，对于缓存的ArcGIS服务，使用ol.source.XYZ更好。

这里使用的是ol.layer.Tile

 <script>
      var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
          'Specialty/ESRI_StateCityHighway_USA/MapServer';

      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Tile({
          extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ol.source.TileArcGISRest({
            url: url
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>

4.bing-maps.html

使用必应地图时，如果必应地图在指定的分辨率和区域下，没有tiles，就会返回placeholders（占位符）

 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]
            // use maxZoom 19 to see stretched tiles instead of the BingMaps
            // "no photos at this zoom level" tiles
            // maxZoom: 19
          })
        }));
      }

BingMap的zoomLevel最高为19，如果不想在超过这个级别时，看到的是占位符，就在ol.source.BingMaps中设置maxZoom:19

转载自：https://blog.csdn.net/u010924834/article/details/54799618