ol3加载本地离线瓦片地图

最新推荐文章于 2023-07-21 17:13:20 发布

chuiyandian9835

最新推荐文章于 2023-07-21 17:13:20 发布

阅读量392

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/1790925/blog/620233

版权

<!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>

转载于:https://my.oschina.net/u/1790925/blog/620233