openlayers加载天地图、高德、百度、geoq(智图)、谷歌、arcgis在线地图、影像和标注

this.image_map = new ol.layer.Tile({
name: “影像图层”,
source: new ol.source.XYZ({
url: “http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=4b01c1b56c6bcba2eb9b8e987529c44f”//天地图影像（有高级别影像，云多，较暗）
url:“http://mt1.google.cn/vt/lyrs=y&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali”//谷歌影像带标注
url:“http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}”//高德影像（风格清新，缺点无高级别影像）
url:“http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}”//谷歌影像
}),
visible: true,
zIndex: 0
});
this.image_map = new ol.layer.Image({
name: “影像图层”,
source: new ol.source.ImageArcGISRest({
url:“http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer”,//arcgis在线世界影像(加载慢)
}),
visible: true,
zIndex: 0
});

//如下是百度地图、影像和标注的加载
// 自定义分辨率和瓦片坐标系
var resolutions = [];
var maxZoom = 18;
var projection = ol.proj.get(“EPSG:3857”);//加载百度地图采用3857坐标系
// 计算百度使用的分辨率
for (var i = 0; i <= maxZoom + 1; i++) {
resolutions[i] = Math.pow(2, maxZoom - i);
}
var tilegrid = new ol.tilegrid.TileGrid({
origin: [0, 0], // 设置原点坐标
resolutions: resolutions // 设置分辨率
});
// 百度街道
var baiduSource = new ol.source.TileImage({
projection: “EPSG:3857”,
tileGrid: tilegrid,
tileUrlFunction: function(tileCoord, pixelRatio, proj) {
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
// 百度瓦片服务url将负数使用M前缀来标识
if (x < 0) {
x = ‘M’ + (-x);
}
if (y < 0) {
y = ‘M’ + (-y);
}
return ‘http://online’ + parseInt(Math.random() * 10) + ‘.map.bdimg.com/onlinelabel/?qt=tile&x=’ +
x + ‘&y=’ + y + ‘&z=’ + z + ‘&styles=pl&udt=20170620&scaler=1&p=1’;
}
});
// 百度影像
var baiduSourceRaster= new ol.source.TileImage({
projection: “EPSG:3857”,
tileGrid: tilegrid,
tileUrlFunction: function(tileCoord, pixelRatio, proj) {
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
// 百度瓦片服务url将负数使用M前缀来标识
if (x < 0) {
x = ‘M’ + (-x);
}
if (y < 0) {
y = ‘M’ + (-y);
}
return ‘http://shangetu’ + parseInt(Math.random() * 10) + ‘.map.bdimg.com/it/u=x=’ + x +
‘;y=’ + y + ‘;z=’ + z + ‘;v=009;type=sate&fm=46&udt=20170606’;
}
});
// 百度标注
var baiduSourceLabel = new ol.source.TileImage({
projection: “EPSG:3857”,
tileGrid: tilegrid,
tileUrlFunction: function(tileCoord, pixelRatio, proj) {
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
// 百度瓦片服务url将负数使用M前缀来标识
if (x < 0) {
x = ‘M’ + (-x);
}
if (y < 0) {
y = ‘M’ + (-y);
}
return ‘http://online’ + parseInt(Math.random() * 10) + ‘.map.bdimg.com/onlinelabel/?qt=tile&x=’ +
x + ‘&y=’ + y + ‘&z=’ + z + ‘&styles=sl&udt=20170620&scaler=1&p=1’;
}
});
this.image_map = new ol.layer.Tile({
title : “百度地图卫星服务”,
source : baiduSourceRaster
});

this.jiedao_map = new ol.layer.Tile({
name: “街道图层”,
source: new ol.source.XYZ({
url: “http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=4b01c1b56c6bcba2eb9b8e987529c44f”//天地图街道
url:“http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}”//高德街道
url:“http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}”//geoq(智图)街道
url:“http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}”//谷歌街道
}),
visible: false,
zIndex: 0
});
this.jiedao_map = new ol.layer.Image({
name: “街道图层”,
source: new ol.source.ImageArcGISRest({
url:“http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer”,//geoq(智图)arcgis在线街道紫蓝色
}),
visible: false,
zIndex: 0
});
this.biaozhu_map = new ol.layer.Tile({
name: “标注”,
source: new ol.source.XYZ({
url: “http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=4b01c1b56c6bcba2eb9b8e987529c44f”//天地图
}),
visible: false,
zIndex: 0
});
学习参考地址：http://47.107.104.211:12307/examples/3dwebgl/examples.html#cs_layerAdd