ol3 加载天地图服务

function map_load(){

//添加坐标

    var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(2),
        projection: 'EPSG:4326',
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: ' '
    });
//构建map
    map = new ol.Map({


        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: ({
                collapsible: false
            })
        }).extend([mousePositionControl]),


        layers: [


            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    attributions: [attribution],
                    url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}'
                })
            }),
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    attributions: [attribution],
                    url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
                })
            }),
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    attributions: [attribution],
                    url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.transform([115, 35], 'EPSG:4326', 'EPSG:3857'),
            zoom: 4
        })
    });

}

其他代码包括引用ol3.js  goog库等，请自行加入。需要注意一点的是底图的选择是  墨卡托  。鼠标位置的div自行放置。