OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持多种常用的地图来源，包括天地图、百度地图、高德地图、ArcGIS地图、Bing地图、OSM地图、Google地图等。
加载天地图前，需要先到天地图官网注册并申请应用密钥，官网地址为：国家地理信息公共服务平台 天地图
瓦片地址如下（以矢量底图为例）：https://t0.tianditu.gov.cn/DataServer?T=vec_c&x=3233&y=673&l=12&tk=你的密钥
//实例化map对象加载地图
var map = new ol.Map({
//地图容器div的id
target: 'container',
//地图容器中加载的图层
layers: [
//加载瓦片图层数据
new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的密钥",
wrapX: false
})
}),
new ol.layer.Tile({
title: "天地图矢量图层注记",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的密钥",
wrapX: false
})
})
],
//地图视图设置
view: new ol.View({
//地图初始中心点
center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'), //地图初始中心点
//地图初始显示级别
zoom: 4
})
});//坐标参考系
var projection = ol.proj.get("EPSG:3857");
//分辨率
var resolutions = [];
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var tilegrid = new ol.tilegrid.TileGrid({
origin: [0, 0],
resolutions: resolutions
});
//拼接百度地图出图地址
var baidu_source = new ol.source.TileImage({
//设置坐标参考系
projection: projection,
//设置分辨率
tileGrid: tilegrid,
//出图基地址
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
if (!tileCoord) {
return "";
}
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
if (x < 0) {
x = "M" + (-x);
}
if (y < 0) {
y = "M" + (-y);
}
return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
}
});
//百度地图
var baidu_layer = new ol.layer.Tile({
source: baidu_source
});
//地图容器
var map = new ol.Map({
target: 'container',
layers: [baidu_layer],
view: new ol.View({
center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
}); var gaodeMapLayer = new ol.layer.Tile({
title: "高德地图",
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
wrapX: false
})
});
var map = new ol.Map({
layers: [gaodeMapLayer],
view: new ol.View({
center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'), //地图初始中心点
projection: 'EPSG:3857',
zoom: 4,
minZoom: 1
}),
target: 'container'
});//实例化鼠标位置控件（MousePosition）
var mousePositionControl = new ol.control.MousePosition({
//坐标格式
coordinateFormat: ol.coordinate.createStringXY(4),
//地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
projection: 'EPSG:4326',
//坐标信息显示样式，默认是'ol-mouse-position'
className: 'custom-mouse-position',
//显示鼠标位置信息的目标容器
target: document.getElementById('mouse-position'),
//未定义坐标的标记
undefinedHTML: ' '
});
//实例化Map对象加载地图
var map = new ol.Map({
//地图容器div的ID
target: 'container',
//地图容器中加载的图层
layers: [],
//地图视图设置
view: new ol.View({
//地图初始中心点
center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'),
//地图初始显示级别
zoom: 4
}),
//加载控件到地图容器中
controls: ol.control.defaults({//地图中默认控件
// attributionOptions: /** @type {ol.control.Attribution} */({
// collapsible: true //地图数据源信息控件是否可展开,默认为true
// })
}).extend([mousePositionControl])//加载鼠标位置控件
});
arcGISLayers = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' + 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
})
})
//添加地图图层
map.addLayer(arcGISLayers); 加载Bing图前，需要先到官网注册并申请应用密钥，官网地址为：https://www.microsoft.com/en-us/maps
//实例化Map对象加载地图
var key = '你的密钥';
var roads = new ol.layer.Tile({
source: new ol.source.BingMaps({ key: key, imagerySet: 'Road' })
});
var map = new ol.Map({
layers: [roads],
target: 'container',
view: new ol.View({
center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
}); //实例化Map对象加载地图
var map = new ol.Map({
//地图容器div的ID
target: 'container',
//地图容器中加载的图层
layers: [
//加载瓦片图层数据
new ol.layer.Tile({
//图层对应数据源，此为加载OpenStreetMap在线瓦片服务数据
source: new ol.source.OSM()
})
],
//地图视图设置
view: new ol.View({
//地图初始中心点
center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'),
//地图初始显示级别
zoom: 4
})
});//实例化map对象加载地图
var map = new ol.Map({
//地图容器div的id
target: 'container',
//地图容器中加载的图层
layers: [
//加载瓦片图层数据
new ol.layer.Tile({
title: "谷歌地图",
source: new ol.source.XYZ({
url: "http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z} ",
wrapX: false
})
})
],
//地图视图设置
view: new ol.View({
//地图初始中心点
center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});