OpenLayers3基礎教程之實現地圖鷹眼以及地圖比例尺的新增
阿新 • • 發佈:2019-01-06
1. 前言
地圖鷹眼就是地圖的鳥瞰圖,就是通常所說的小地圖,我們可以通過鷹眼得到當前地圖的顯示位置,也可以在鷹眼上單擊、拖動或移動到想要檢視的位置,鷹眼的可見區域比我們所看的主視區的範圍要大,鷹眼的中心框就是主視區的可視範圍, Openlayers 3 封裝的鷹眼控制元件為 ol.control.OverviewMap ,可以自定義其顯示的樣式。
2. 實現思路
(1)新建一個網頁,並參考前面的文章實現地圖顯示功能,載入 OSM 瓦片圖層。
(2)例項化一個鷹眼控制元件(ol.control.OverviewMap),跟前面的一樣,可以例項化一個預設的鷹眼控制元件,也可以根據需要設定其引數。
(3)將例項化的鷹眼控制元件載入到地圖容器中。可以在例項化地圖容器 Map 的程式碼中,通過設定 controls 引數載入鷹眼控制元件,也可以呼叫 map 物件的 addControl 方法載入控制元件。
3. 實現程式碼
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>載入鷹眼控制元件以及實現地圖比例尺</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/ol.css">
<link rel="stylesheet" href="css/ZoomSlider.css">
<script src="js/ol.js"></script>
<script src="js/OverviewMap.js"></script>
<style>
#map {
width: 100%;
height: 100%;
}
/* 自定義樣式控制元件 */
.ol-custom-overviewmap,
.ol-custom-overviewmap .ol-uncollapsible {
bottom: auto;
left: auto;
right: 0;
/*右側顯示*/
top: 0;
/*頂部顯示*/
}
/* 鷹眼控制元件展開時控制元件外框的樣式 */
.ol-custom-overviewmap:not(.ol-collapsed) {
border: 1px solid black;
}
/* 鷹眼控制元件中地圖容器的樣式 */
.ol-custom-overviewmap .ol-overviewmap-map {
border: none;
width: 300px;
}
/* 在鷹眼控制元件中顯示當前視窗中主圖區域的邊框 */
.ol-custom-overviewmap .ol-overviewmap-box {
border: 2px solid red;
}
/* 在鷹眼控制元件張開時其控制元件按鈕圖示的樣式 */
.ol-custom-overviewmap:not(.ol-collapsed) button {
bottom: auto;
left: auto;
right: 1px;
top: 1px;
}
</style>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
- 程式碼解析
上面的程式碼主要是用於定義鷹眼的樣式,,通過 ol-custom-overviewmap 將鷹眼控制元件設定為右側頂部顯示,並設定鷹眼控制元件外框,鷹眼中地圖容器以及鷹眼按鈕的樣式。
js程式碼:
function init() {
// 例項化鷹眼控制元件(OverviewMap),自定義其樣式
var overviewMapControl = new ol.control.OverviewMap({
className: 'ol-overviewmap ol-custom-overviewmap', //鷹眼控制元件樣式
// 在鷹眼中載入相同座標系下不同資料來源的圖層
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
'url': 'http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'
})
})
],
collapseLabel: '\u00BB', //鷹眼控制元件展開時功能按鈕上的標識
label: '\u00AB', //鷹眼控制元件摺疊時功能按鈕上的標識
collapsed: false //初始為展開方式
});
// 例項化map物件,用於載入地圖
var map = new ol.Map({
target: 'map', //地圖容器的div
// 在地圖容器中載入的圖層
layers: [
new ol.layer.Tile({ //載入瓦片圖層資料
source: new ol.source.OSM() //載入OSM瓦片圖層資料
})
],
// 地圖檢視設定
view: new ol.View({
center: [12000000, 4000000], //設定初始中心
zoom: 8 //地圖初始顯示中心
}),
// 載入控制元件到地圖容器中
// 載入鷹眼控制元件
controls: ol.control.defaults().extend([overviewMapControl])
});
}
- 程式碼解析
上面程式碼例項化了一個鷹眼控制元件,並通過設定控制元件的相關引數。
(1)layers:鷹眼容器內載入的圖層,鷹眼容器與地圖容器類似,可以根據需要載入不同於主圖的圖層資料,但是要主圖與鷹眼的縮圖在同一個座標系下。
(2)collapseLabel:將鷹眼控制元件展開時功能按鈕上的標識。
(3)label:鷹眼控制元件摺疊時功能按鈕上的標識,與collapseLabel相對。
(4)collapsed:鷹眼控制元件初始載入時是否展開顯示,false為展開狀態。
(5)className:為鷹眼控制元件的類名,根據此類名來定義整個鷹眼控制元件的樣式。
4. 實現效果
5. 比例尺的新增
新增比例尺的方法,只要是通過例項化一個比例尺控制元件(ol.control.ScaleLine),可以根據應用需求進行設定引數,比如可以設定比例尺的單位(units)等。然後通過地圖容器 Map 設定其controls 引數進行載入比例尺控制元件,也可以通過呼叫 map 物件的 addControl 方法載入控制元件。
- 主要程式碼如下
// 例項化比例尺控制元件
var scaleLineControl = new ol.control.ScaleLine({
// 設定比例尺單位為degrees、imperial、us、nautical或metric(度量單位)
units: "metric"
});
map.addControl(scaleLineControl);
- 實現效果