最简单的加载在线地图

本小节所介绍的这些在线地图，加载起来会非常简单，因为OpenLayers 3已经做了很好的封装，对于开发者而言，无须做过多的编码，即可直接使用。主要包括开源的Open Street Map，微软的Bing地图，Map Quest地图(注: 由于MapQuest开始收费，ol v3.17.0就移除了ol.source.MapQuest)，Stamen地图。

OpenStreetMap地图

Bing地图

Stamen地图

MapQuest地图

<div id="map" style="width: 100%"></div>
<input type="radio" checked="checked" name="mapSource" onclick="switch2OSM();" />OpenStreetMap地图
<input type="radio" name="mapSource" onclick="switch2BingMap();" />Bing地图
<input type="radio" name="mapSource" onclick="switch2StamenMap();" />Stamen地图
<input type="radio" name="mapSource" onclick="switch2MapQuest();" />MapQuest地图

<script>

    // Open Street Map 地图层
    var openStreetMapLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    // Bing地图层
    var bingMapLayer = new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
      imagerySet: 'Road'
        })
    });

    // Stamen地图层
    var stamenLayer = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'watercolor'
        })
    });

    // MapQuest地图层
    var mapQuestLayer = new ol.layer.Tile({
        source: new ol.source.MapQuest({
            layer: 'osm'
        })
    });

    // 创建地图
  var map = new ol.Map({
        layers: [
            openStreetMapLayer
        ],
        view: new ol.View({
            // 设置成都为地图中心
            center: [104.06, 30.67],
            projection: 'EPSG:4326',
            zoom: 10
        }),
        target: 'map'
  });

  function switch2OSM() {
      // 先移除当前的地图，再添加Open Street Map 地图
      map.removeLayer(map.getLayers().item(0));
      map.addLayer(openStreetMapLayer);
  }

  function switch2BingMap() {
      // 先移除当前的地图，再添加Bing地图
      map.removeLayer(map.getLayers().item(0));
      map.addLayer(bingMapLayer);
  }

  function switch2StamenMap() {
      // 先移除当前的地图，再添加stamen地图
      map.removeLayer(map.getLayers().item(0));
      map.addLayer(stamenLayer);
  }

  function switch2MapQuest() {
      // 先移除当前的地图，再添加MapQuest地图
      map.removeLayer(map.getLayers().item(0));
      map.addLayer(mapQuestLayer);
  }
</script>

代码很简单，因为OpenLayers 3对这几个在线服务都做了很好的封装，只用简单的配置一下Source的构造参数就可以了。此处并没有列出每一个类的所有构造参数，但可以通过API文档查询了解。

上面这个地图涉及到多个地图源，如果都放在地图上，就涉及到图层管理，这一部分的知识将在后续章节图层叠加及管理有更详细的介绍。