<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ol3加载本地离线瓦片地图</title>
<link rel="stylesheet" type="text/css" href="ol3.7.0/ol.css">
<script type="text/javascript" src="ol3.7.0/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:100%;"></div>
<script type="text/javascript">
// 地图设置中心,设置徐州,在本地离线地图 offlineMapTiles恰好有一张zoom为4的成都瓦片
var center = ol.proj.transform([117.20,34.26], 'EPSG:4326', 'EPSG:3857');
//建立地图
var map = new ol.Map({
view: new ol.View({
center: center,
zoom: 11,
minZoom: 8,
maxZoom: 15
}),
target: 'map'
});
// 添加一个使用离线瓦片地图的层
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
// 设置本地离线瓦片所在路径，因为例子里面只有一张瓦片，页面显示时就只看获得一张瓦片。
url: 'offlineMapTiles/{z}/{x}/{y}.jpg'
})
});
//添加属性控件
map.addControl(new ol.control.Attribution());
//添加鼠标定位控件
map.addControl(new ol.control.MousePosition({
undefinedHTML: 'outside',
projection: 'EPSG:4326',
coordinateFormat: function(coordinate) {
return ol.coordinate.format(coordinate, '{x}, {y}', 4);
}
})
);
//添加缩略图控件
map.addControl(new ol.control.OverviewMap({
collapsed: false
}));
//添加旋转控件
map.addControl(new ol.control.Rotate({
autoHide: true
}));
//添加比例尺控件
//map.addControl(new ol.control.ScaleLine());
//添加缩放滑动控件
map.addControl(new ol.control.ZoomSlider());
//添加全屏控件
map.addControl(new ol.control.FullScreen());
map.addLayer(offlineMapLayer);
</script>
</body>
</html>