前言
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持多种常用的地图来源，包括天地图、百度地图、高德地图、ArcGIS地图、Bing地图、OSM地图、Google地图等。
一、加载天地图
1.前提条件
加载天地图前，需要先到天地图官网注册并申请应用密钥，官网地址为：国家地理信息公共服务平台 天地图
2.服务地址
瓦片地址如下（以矢量底图为例）：https://t0./DataServer?T=vec_c&x=3233&y=673&l=12&tk=你的密钥
3.加载代码
//实例化map对象加载地图var map = new ol.Map({//地图容器div的id target: 'container', //地图容器中加载的图层layers: [//加载瓦片图层数据new ol.layer.Tile({title: "天地图矢量图层",source: new ol.source.XYZ({url: "/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的密钥", wrapX: false})}),new ol.layer.Tile({title: "天地图矢量图层注记",source: new ol.source.XYZ({url: "/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})});
二、加载百度地图
1.加载代码
//坐标参考系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./onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=1021&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})});
三、加载高德地图
1.加载代码
var gaodeMapLayer = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'http://wprd0{1-4}./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'});
四、加载ArcGIS地图
1.加载代码
//实例化鼠标位置控件（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的IDtarget: '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: '/ArcGIS/rest/services/' + 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'})})//添加地图图层 map.addLayer(arcGISLayers);
五、加载Bing地图
1.前提条件
加载Bing图前，需要先到官网注册并申请应用密钥，官网地址为：/en-us/maps
2.加载代码
//实例化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})});
六、加载OSM地图
1.加载代码
//实例化Map对象加载地图var map = new ol.Map({//地图容器div的IDtarget: '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 })});
七、加载Google地图
1.加载代码
//实例化map对象加载地图var map = new ol.Map({//地图容器div的idtarget: 'container',//地图容器中加载的图层layers: [//加载瓦片图层数据new ol.layer.Tile({title: "谷歌地图",source: new ol.source.XYZ({url: "/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})});
