上一篇文章介绍了使用openlayers3加载百度在线地图,对某些项目或应用场景比如不允许上外网的单位,某些项目只针对一定区域地图加载应用,比如一个县的地图,可以采用下载百度瓦片地图,在服务器或者本机单独部署的方式进行。
本篇主要讲述如何使用openlayers3调用下载的百度离线瓦片地图。瓦片地图下载器,网上有很多,在此不做详细描述。
Openlayers3加载离线百度瓦片地图,效果以及代码如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" type="text/css" href="ol/ol3/css/ol.css" /> <style type="text/css"> body, #mainMap { border: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; font-size: 13px; } </style> <script type="text/javascript" src="ol/ol3/build/ol-debug.js"></script> </head> <body> <div id="mainMap"> </div> </body> </html> <script type="text/javascript"> // 自定义分辨率和瓦片坐标系 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 = -x; } if (y < 0) { y = -y; } return "tiles/" + z + "/" + x + "/" + y + ".png"; } }); // 百度地图层 var baiduMapLayer2 = new ol.layer.Tile({ source: baiduSource }); // 创建地图 var map =new ol.Map({ layers: [ baiduMapLayer2 ], view: new ol.View({ // 设置成都为地图中心 center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'), zoom: 3 }), target: 'mainMap' }); </script>
相关推荐
Openlary4加载ArcGIS离线瓦片地图
有朋友反应上一次代码无法运行,我看了一下 是html里的路径写死了 然后把ol.js 与 ol.css也放上来了。。。保证能运行!!!
openlayers 调用百度地图
利用下载好得离线google地图瓦片数据 结合openlayers接口进行加载显示 纯本地离线好得瓦片数据 运行没问题 当然把瓦片放在服务器上发布出来也是可以的 代码中修改url即可
使用openlayers加载离线地图实例,可通过mui打包成app。简单,易上手
openlayers3 调用离线谷歌切片地图 示例
简易的openlayers发布离线瓦片数据的DEMO,压缩包中包含了一部分地区的街道地图瓦片数据。
可直接运行,简易的openlayers发布离线瓦片数据的DEMO,压缩包中包含了一部分地区的街道地图瓦片数据。
该示例为百度离线地图的一些实现,根据经纬度对离线地图实现标点,从后台返回数据,页面用ajax调用接口获取json数据,用OpenLayers实现离线地图的发布,里面包含了示例区域的离线地图瓦片以及网页Demo
OpenLayers离线帮助文件 OpenLayers 在线文档的本地版本利于离线阅读
此代码采用开源的openlayers5,显示天地图的注记图层,天地图路网图层,欢迎下载使用。
openlayers3官方2019年12月离线教程,自己弄下来的,下载后直接查看..........
离线地图的比较,百度地图离线,天地图,openlayers地图
openlayers 4.2 加载百度地图(在线 离线) 高德地图(在线 离线)
openlayers离线文档及部份中文说明
基于openlayers 3开发代码,配合太乐地图下载离线地图使用
1) 部署到tomcat6的webapps下面。 2) 将world.mbtiles放到D:/gisdata/mbtiles/目录下。 3) 在浏览器输入:(世界地图,图层0-7) http://localhost:8080/MbTileService/local_tiles.html
ol(openlayers)加载天地图/加载中xyz格式瓦片/加载Geoserver发布的WMS图层, 可以一次性加载多个图层: /** * 添加离线图层(数组) * @param {Array} optsArray 选项 * @example * var opts = [{ * url: "ol....
接天地图影像、地形等基础地理信息服务;各类数据的服务器地址,瓦片下载url拼接方法等等