溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用OpenLayers3實現地圖鷹眼以及地圖比例尺的添加，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
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);實現效果
以上就是使用OpenLayers3實現地圖鷹眼以及地圖比例尺的添加，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
