您的位置：首页 > 运维架构

如何使用Openlayers 3加载谷歌离线地图

2016-03-02 13:39 483 查看

谷歌地图部署

说明：使用地图下载工具下载的谷歌离线地图大致如下结构，使用合适的WEB服务器发布地图服务。

使用Openlayers 3调用地图服务

说明：这里使用ol.source.XYZ（更多语法请参考这儿.）来调用地图服务。

//定义一个地图调用函数
var BaseMapLayer = function(options) {
var mapExtent = [179.92574, 74.87274, -77.24223, -45.44708];
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;
};

说明： 使用ol. View创建负责地图的中心点，放大，投影之类的设置。

//定义视图
var view = new ol.View({
center: ol.proj.fromLonLat([95.23, 35.33]),
zoom: 4,
minZoom: 2,
maxZoom: 12
});

说明： 此处定义影响地图以及地形地图的服务地址，lebel为地图上的文字。

//定义地图服务URL
var sateliteopt = {
url: defautopt.maphost + 'sate/satellite_en/{z}/{x}/{y}.jpg'
},
satelitelebel = {
url: defautopt.maphost + 'sate/overlay_s/{z}/{x}/{y}.png'
},
roadmapopt = {
url: defautopt.maphost + 'terrain/terrain/{z}/{x}/{y}.jpg'
},
roadlebel = {
url: defautopt.maphost + 'terrain/overlay/{z}/{x}/{y}.png'
};

说明： 此处使用ol.layer.Group创建图层组。

//影像地图组
var sate = new ol.layer.Group({
layers: [
new BaseMapLayer(sateliteopt),
new BaseMapLayer(satelitelebel)
]
});
//地形图层组
var road = new ol.layer.Group({
layers: [
new BaseMapLayer(roadmapopt),
new BaseMapLayer(roadlebel)
]
});

说明： 此处使用ol.Map创建地图。

//创建地图
var map = new ol.Map({
view: view,
layers: [
sate, road
],
target: 'map'
});

HTML页面结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>openlayers3调用谷歌离线地图</title>
<link rel="stylesheet" href="libs/openlayers3/ol.css" />
<script type="text/javascript" src="libs/openlayers3/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
/* 此处为上面分开所述的javascript相关内容。*/
</script>
</body>
</html>

说明： 访问页面效果图如下:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 谷歌离线地图 Openlayer3 地图

相关文章推荐

新的分享

章节导航