OpenLayers3實現(xiàn)地圖鷹眼以及地圖比例尺的添加

更新時間：2020年09月25日 14:23:11 作者：jiegsier

這篇文章主要為大家詳細介紹了OpenLayers3實現(xiàn)地圖鷹眼以及地圖比例尺的添加，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了OpenLayers3實現(xiàn)地圖鷹眼以及地圖比例尺的添加的具體代碼，供大家參考，具體內(nèi)容如下

1. 前言

地圖鷹眼就是地圖的鳥瞰圖，就是通常所說的小地圖，我們可以通過鷹眼得到當(dāng)前地圖的顯示位置，也可以在鷹眼上單擊、拖動或移動到想要查看的位置，鷹眼的可見區(qū)域比我們所看的主視區(qū)的范圍要大，鷹眼的中心框就是主視區(qū)的可視范圍， Openlayers 3 封裝的鷹眼控件為 ol.control.OverviewMap ，可以自定義其顯示的樣式。

2. 實現(xiàn)思路

（1）新建一個網(wǎng)頁，并參考前面的文章實現(xiàn)地圖顯示功能，加載 OSM 瓦片圖層。
（2）實例化一個鷹眼控件（ol.control.OverviewMap），跟前面的一樣，可以實例化一個默認(rèn)的鷹眼控件，也可以根據(jù)需要設(shè)置其參數(shù)。
（3）將實例化的鷹眼控件加載到地圖容器中?？梢栽趯嵗貓D容器 Map 的代碼中，通過設(shè)置 controls 參數(shù)加載鷹眼控件，也可以調(diào)用 map 對象的 addControl 方法加載控件。

3. 實現(xiàn)代碼

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>加載鷹眼控件以及實現(xiàn)地圖比例尺</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;
  /*右側(cè)顯示*/
  top: 0;
  /*頂部顯示*/
 }
 /* 鷹眼控件展開時控件外框的樣式 */

 .ol-custom-overviewmap:not(.ol-collapsed) {
  border: 1px solid black;
 }
 /* 鷹眼控件中地圖容器的樣式 */

 .ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
 }
 /* 在鷹眼控件中顯示當(dāng)前窗口中主圖區(qū)域的邊框 */

 .ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
 }
 /* 在鷹眼控件張開時其控件按鈕圖標(biāo)的樣式 */

 .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 將鷹眼控件設(shè)置為右側(cè)頂部顯示，并設(shè)置鷹眼控件外框，鷹眼中地圖容器以及鷹眼按鈕的樣式。

js代碼：

function init() {
 // 實例化鷹眼控件（OverviewMap），自定義其樣式
 var overviewMapControl = new ol.control.OverviewMap({
 className: 'ol-overviewmap ol-custom-overviewmap', //鷹眼控件樣式
 // 在鷹眼中加載相同坐標(biāo)系下不同數(shù)據(jù)源的圖層
 layers: [
  new ol.layer.Tile({
  source: new ol.source.OSM({
   'url': 'http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'
  })
  })
 ],
 collapseLabel: '\u00BB', //鷹眼控件展開時功能按鈕上的標(biāo)識
 label: '\u00AB', //鷹眼控件折疊時功能按鈕上的標(biāo)識
 collapsed: false //初始為展開方式
 });
 // 實例化map對象，用于加載地圖
 var map = new ol.Map({
 target: 'map', //地圖容器的div
 // 在地圖容器中加載的圖層
 layers: [
  new ol.layer.Tile({ //加載瓦片圖層數(shù)據(jù)
  source: new ol.source.OSM() //加載OSM瓦片圖層數(shù)據(jù)
  })
 ],
 // 地圖視圖設(shè)置
 view: new ol.View({
  center: [12000000, 4000000], //設(shè)置初始中心
  zoom: 8 //地圖初始顯示中心
 }),
 // 加載控件到地圖容器中
 // 加載鷹眼控件
 controls: ol.control.defaults().extend([overviewMapControl])
 });
}

代碼解析

上面代碼實例化了一個鷹眼控件，并通過設(shè)置控件的相關(guān)參數(shù)。

（1）layers：鷹眼容器內(nèi)加載的圖層，鷹眼容器與地圖容器類似，可以根據(jù)需要加載不同于主圖的圖層數(shù)據(jù)，但是要主圖與鷹眼的縮略圖在同一個坐標(biāo)系下。
（2）collapseLabel：將鷹眼控件展開時功能按鈕上的標(biāo)識。
（3）label：鷹眼控件折疊時功能按鈕上的標(biāo)識，與collapseLabel相對。
（4）collapsed：鷹眼控件初始加載時是否展開顯示，false為展開狀態(tài)。
（5）className：為鷹眼控件的類名，根據(jù)此類名來定義整個鷹眼控件的樣式。

4. 實現(xiàn)效果

5. 比例尺的添加

添加比例尺的方法，只要是通過實例化一個比例尺控件（ol.control.ScaleLine），可以根據(jù)應(yīng)用需求進行設(shè)置參數(shù)，比如可以設(shè)置比例尺的單位（units）等。然后通過地圖容器 Map 設(shè)置其controls 參數(shù)進行加載比例尺控件，也可以通過調(diào)用 map 對象的 addControl 方法加載控件。

主要代碼如下

// 實例化比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
 // 設(shè)置比例尺單位為degrees、imperial、us、nautical或metric（度量單位）
 units: "metric"
 });

map.addControl(scaleLineControl);

實現(xiàn)效果