ol3加載本地離線瓦片地圖

時間 2019-11-13

標籤 ol3 加載本地離線瓦片地圖简体版

原文原文鏈接

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。