OpenLayers之多源数据加载三：最简单的加载在线瓦片地图

    本小节所介绍的这些在线地图，加载起来会非常简单，因为OpenLayers已经做了很好的封装，对于开发者而言，无须做过多的编码，即可直接使用。

    主要包括开源的Open Street Map、微软的Bing地图、Stamen地图。

    <div id="map"></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地图

    <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'
            })
        });

        //创建地图
        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);
        }
    </script>

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