| OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等) | 您所在的位置：网站首页 › osm地形图 › OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等) |
OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等)
|
前言
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持多种常用的地图来源，包括天地图、百度地图、高德地图、ArcGIS地图、Bing地图、OSM地图、Google地图等。 一、加载天地图 1.前提条件加载天地图前，需要先到天地图官网注册并申请应用密钥，官网地址为：国家地理信息公共服务平台 天地图 2.服务地址
瓦片地址如下（以矢量底图为例）：https://t0.tianditu.gov.cn/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: "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 }) }); 二、加载百度地图 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.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 }) }); 三、加载高德地图 1.加载代码 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' }); 四、加载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的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地图 1.前提条件加载Bing图前，需要先到官网注册并申请应用密钥，官网地址为：https://www.microsoft.com/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的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 }) }); 七、加载Google地图 1.加载代码 //实例化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 }) }); |
【本文地址】
公司简介
联系我们