<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>openlayers3调用谷歌离线地图</title>
<link rel="stylesheet" href="ol.css" />
<script type="text/javascript" src="ol.js"></script>
<style>
html{
height: 100%;
width: 100%;
padding:0;
margin:0;
}
body{
height: 100%;
width: 100%;
padding:0;
margin:0;
}
.map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
//定义一个地图调用函数
//var maphost = "http://localhost:8080/ol/dist";
//var maphost2 = "http://localhost:8080/Apps";
var BaseMapLayer = function(options) {
var mapExtent = [115.94835, 39.66765, 116.99815, 40.13703];
var layer = new ol.layer.Tile({
extent: ol.proj.transformExtent(mapExtent, "EPSG:4326", "EPSG:3857"),
source: new ol.source.XYZ({
url: options.url,
tilePixelRatio: 1,
minZoom:2,
maxZoom:12
})
});
return layer;
};
//定义视图
var view = new ol.View({
center: ol.proj.fromLonLat([116.39360, 39.92634]),
zoom: 12,
minZoom: 6,
maxZoom: 12
});
//定义地图服务URL
<!-- var sateliteopt = { -->
<!-- url: '/data/google/satellite_en/{z}/{x}/{y}.jpg' -->
<!-- }; -->
var sateliteopt = {
url: '/tomcat/apache-tomcat-7.0.75/webapps/ROOT/ol/dist/data/google/satellite_en/{z}/{x}/{y}.jpg'
};
//影像地图组
var sate = new ol.layer.Group({
layers: [
new BaseMapLayer(sateliteopt)
]
});
//创建地图
var map = new ol.Map({
view: view,
layers: [
sate
],
target: 'map'
});
</script>
</body>
</html>
openlayers加载本地离线底图瓦片google数据直接运行即可（亲测）
2星 需积分: 50 38 浏览量
2018-09-15
17:35:57
上传
评论 4
收藏 817KB RAR 举报 
本地离线openlayers加载本地地图离线瓦片范例.rar （43个子文件） 
emss.html 2KB
data google satellite_en 12 3374 
1551.jpg 21KB 1550.jpg 20KB 1553.jpg 19KB 1552.jpg 20KB 3373 1551.jpg 21KB 1550.jpg 21KB 1553.jpg 21KB 1552.jpg 21KB 3371 1551.jpg 21KB 1550.jpg 21KB 1553.jpg 20KB 1552.jpg 21KB 3370 1551.jpg 20KB 1550.jpg 18KB 1553.jpg 19KB 1552.jpg 20KB 3372 1551.jpg 20KB 1550.jpg 21KB 1553.jpg 20KB 1552.jpg 20KB 3369 1551.jpg 18KB 1550.jpg 14KB 1553.jpg 20KB 1552.jpg 19KB 8 210 97.jpg 17KB 96.jpg 16KB 10 842 388.jpg 20KB 387.jpg 19KB 843 388.jpg 20KB 387.jpg 21KB 7 105 48.jpg 15KB 9 421 193.jpg 18KB 194.jpg 19KB 11 1684 775.jpg 18KB 776.jpg 20KB 1687 775.jpg 20KB 776.jpg 21KB 1685 775.jpg 20KB 776.jpg 20KB 1686 775.jpg 21KB 776.jpg 21KB 6 52 24.jpg 13KB baidu 资源评论
jiejieaiai2023-04-11少了 东西，用不了
dq52112020-09-03缺少东西，没法用
mrkang0072020-06-11这个用不了啊,为啥不撤掉,还收费下载.
weixin_436328532018-12-28可以加微信吗 在吗
yuyuyu_7132018-10-22根本不可用！！ gis_idea2018-10-24好了 重新发了一下。。。保证好使！请验证！https://download.csdn.net/download/zengming522gis/10740175 gis_idea2018-10-24我重新下载下来看了一下 html里引用的ol.js与ol.css没有放进去 这是openlayers的官方库。。。另外图片的url也修改了一下，，重新坐了个链接。。。这次验证没问题了。。请放心使用！如果还有问题，加我QQ，绝对让你运行起来！！！ gis_idea2018-10-24可以用啊 你遇到啥问题了？
