OpenLayer加载常见在线地图案例
最近在学习OpenLayer，测试了几种国内在线地图服务并作出分享与大家讨论
参考资料：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OpenLayer加载常见在线地图案例</title>
<link href="../css/ol.css">
<script src="../js/ol,js.js"></script>
<script src="../js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wNdy48s7V1izbLL0ziswArXq"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
</div>
</body>
<script>
//openStreetMap地图
var osmlayer=new ol.layer.Tile({
source:new ol.source.XYZ({
url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
//高德地图
var gaodeLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
})
});
//百度地图
// 自定义分辨率和瓦片坐标系
var resolutions = [];
var maxZoom = 18;
// 计算百度使用的分辨率
for(var i=0; i<=maxZoom; 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://online0.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
}
});
// 百度地图层
var baiduMapLayer2 = new ol.layer.Tile({
source: baiduSource
});
// google地图层
var googleMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://ditu.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
})
});
//天地图路网
var tian_di_tu_road_layer = new ol.layer.Tile({
title: "天地图路网",
source: new ol.source.XYZ({
url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
})
});
//天地图注记
var tian_di_tu_annotation = new ol.layer.Tile({
title: "天地图文字标注",
source: new ol.source.XYZ({
url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
})
});
//天地图卫星地图
var tian_di_tu_satellite_layer = new ol.layer.Tile({
title: "天地图卫星影像",
source: new ol.source.XYZ({
url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
})
});
//所有坐标为西安北站为中心点，下面坐标位置都是在相对应的的地图下获取的
/*
谷歌地图和天地图、高德地图 EPSG:4326
谷歌108.9389705658,34.3752497164
天地图：108.93442,34.37613
高德地图108.939819,34.37271
百度地图 EPSG：3857 百度地图偏移比较大
百度地图 108.945731,34.382717
*/
var map = new ol.Map({
target: 'map',
layers: [baiduMapLayer2],
view: new ol.View({
zoom:18,
center : ol.proj.transform([ 108.945731,34.382717], 'EPSG:4326', 'EPSG:3857')
})
});
//加载其他的wgs84的
/* var map=new ol.Map({
layers:[gaodeLayer],
target:'map',
view:new ol.View({
projection:'EPSG:4326',
zoom:18,
center:[108.939819,34.37271]
})
})*/
</script>
</html>转载自：https://blog.csdn.net/wo_buzhidao/article/details/79169608
