本文相关内容只用于个人研究,若用于商业请自行负责。
1. 下载Google地图切片到本地:如果没有要求地图显示中文,则可以用Google Maps Downloader下载Google地图到本地;如果要显示中文地图,则要用China Google Maps Downloader
2. 在tomcat服务器建个项目gmcn,为了方便查找文件,将文件按照zoom/x存放,如图:
3. 利用OpenLayers.Layer.TMS显示地图,重点是get_my_url()找到要显示的切片
<html>
<head>
<title>Google Local Tiles</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/OpenLayers/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer; //complex object of type OpenLayers.Map
//Initialise the 'map' object
function init() {
map = new OpenLayers.Map("map", {
maxExtent : new OpenLayers.Bounds(-20037508.3427892,
-20037508.3427892, 20037508.3427892, 20037508.3427892),
numZoomLevels : 18,
maxResolution : 156543.0339,
units : 'm',
projection : "EPSG:900913",
displayProjection : new OpenLayers.Projection("EPSG:4326")
});
layer = new OpenLayers.Layer.TMS("Name",
"http://10.0.0.239:8081/gmcn/", {
'type' : 'png',
'getURL' : get_my_url
});
map.addLayer(layer);
map.addControl(new OpenLayers.Control.Scale());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.LayerSwitcher());
var lonLat = new OpenLayers.LonLat(117.62519, 39.52329);
lonLat.transform(map.displayProjection, map.getProjectionObject());
map.setCenter(lonLat, 8);
}
function get_my_url(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left)
/ (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top)
/ (res * this.tileSize.h));
var z = this.map.getZoom();
var path = "" + z + "/" + x + "/gmcn_" + x + "_" + y + "_" + z + "." + this.type;
var url = this.url;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
</script>
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width: 100%; height: 100%" id="map"></div>
</body>
</html>
参考:
Using Custom Tile Sources / Google-like Tile Layer Support
- 大小: 4.3 KB
分享到:
相关推荐
openlayers3 调用离线谷歌切片地图 示例
使用openlayers加载离线地图实例,可通过mui打包成app。简单,易上手
利用下载好得离线google地图瓦片数据 结合openlayers接口进行加载显示 纯本地离线好得瓦片数据 运行没问题 当然把瓦片放在服务器上发布出来也是可以的 代码中修改url即可
可直接运行,简易的openlayers发布离线瓦片数据的DEMO,压缩包中包含了一部分地区的街道地图瓦片数据。
有朋友反应上一次代码无法运行,我看了一下 是html里的路径写死了 然后把ol.js 与 ol.css也放上来了。。。保证能运行!!!
简易的openlayers发布离线瓦片数据的DEMO,压缩包中包含了一部分地区的街道地图瓦片数据。
openlayers离线文档及部份中文说明
OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290
该示例为百度离线地图的一些实现,根据经纬度对离线地图实现标点,从后台返回数据,页面用ajax调用接口获取json数据,用OpenLayers实现离线地图的发布,里面包含了示例区域的离线地图瓦片以及网页Demo
Openlary4加载ArcGIS离线瓦片地图
基于openlayers 3开发代码,配合太乐地图下载离线地图使用
OpenLayers离线帮助文件 OpenLayers 在线文档的本地版本利于离线阅读
此代码采用开源的openlayers5,显示天地图的注记图层,天地图路网图层,欢迎下载使用。
离线地图的比较,百度地图离线,天地图,openlayers地图
openlayers3官方2019年12月离线教程,自己弄下来的,下载后直接查看..........
该示例为离线地图的实现,可完全在没有连接外网的情况下进行访问,用OpenLayers实现离线地图的发布,里面包含了示例区域的离线地图瓦片以及网页Demo。
openlayers 调用百度地图
开源,可以自行扩展。目前这个是从openlayers中文网站上下载的。目前只支持google离线地图下载,并且是单线程的。
此代码为结合openlayers5和谷歌在线地图,可供初学者参考。谷歌影像图需要更改url即可。
webgis开发,文件里包含用openlayers3加载百度地图、天地图、高德地图、google地图等源代码,很全很实用。