快捷導(dǎo)航

OpenLayers3加載常用控件使用方法詳解

更新時(shí)間：2020年09月25日 10:34:11 作者：jiegsier

這篇文章主要為大家詳細(xì)介紹了OpenLayers3加載常用控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了OpenLayers3加載常用控件使用的具體代碼，供大家參考，具體內(nèi)容如下

1. 前言

地圖控件就是對(duì)地圖的縮放、全屏、坐標(biāo)顯示控件等，方便我們對(duì)地圖進(jìn)行操作。OpenLayers 3 封裝了很多常用的地圖控件，例如地圖導(dǎo)航、比例尺、鷹眼、測量工具等，這些控件都是基于ol.control.Control虛基類進(jìn)行封裝，ol.control.Control的子類為各類常用的地圖控件，可以通過Map對(duì)象的Control參數(shù)進(jìn)行設(shè)置或者通過addControl方法將控件添加到地圖窗口中。

在加載地圖時(shí)OpenLayers 3 通過ol.control.defaults 默認(rèn)加載了三個(gè)常用的空間：縮放控件（ol.control.Zoom）、旋轉(zhuǎn)控件（ol.control.Roate）、圖層數(shù)據(jù)源屬性控件（ol.control.Attribution）,因此我們可以通過鼠標(biāo)在地圖容器的左上角的縮放按鈕，以及右下角的圖層數(shù)據(jù)源控件來對(duì)地圖進(jìn)行操作。

2. 控件

2.1 導(dǎo)航控件

導(dǎo)航控件就是實(shí)現(xiàn)對(duì)地圖的按級(jí)縮放，拖動(dòng)導(dǎo)航條的上的滑塊可以實(shí)現(xiàn)縮放操作。OpenLayers 3 框架提供的控制地圖縮放的相關(guān)控件包括地圖縮放控件（ol.control.Zoom）、縮放滑塊（ol.control.ZoomSlider）、按鈕式縮放到特定范圍的控件（ol.control.ZoomToExtent）,可以自定義這些控件的樣式。
下面我們將通過修改地圖縮放的相關(guān)控件的默認(rèn)樣式，實(shí)現(xiàn)一個(gè)導(dǎo)航條，效果如下：

實(shí)現(xiàn)步驟如下：

（1）新建一個(gè)頁面，加載OSM瓦片地圖，具體可以查看這篇文章OpenLayers3基礎(chǔ)教程之實(shí)現(xiàn)地圖顯示功能
（2）地圖加載完成后，通過初始化ZoomSlider、ZoomToExtent、控件，并通過addControl方法將控件加載到地圖容器中。

代碼如下

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>自定義導(dǎo)航功能</title>
 <!-- 引入ol.css，以及ol.css -->
 <link rel="stylesheet" href="css/ol.css" rel="external nofollow" >
 <script src="js/ol.js"></script>
 <style>
 #map {
 width: 100%;
 height: 100%;
 position: absolute;
 }
 </style>
 <script>
 function init() {
 //實(shí)例化Map對(duì)象，用于加載地圖
 var map = new ol.Map({
 target: 'map', //地圖容器div的id
 //在地圖容器中加載的圖層
 layers: [
  //加載瓦片圖層數(shù)據(jù)
  new ol.layer.Tile({
  source: new ol.source.OSM() //加載osm瓦片
  })
 ],
 //地圖視圖設(shè)置
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })

 });
 //實(shí)例化ZoomSlider控件并加載到地圖容器中
 var zoomslider = new ol.control.ZoomSlider();
 map.addControl(zoomslider);
 //實(shí)例化zoomToExent控件并加載到地圖容器中
 var zoomToExent = new ol.control.ZoomToExtent({
 extend: [13100000, 4290000,
  13200000, 5210000
 ]
 });
 map.addControl(zoomToExent);
 }
 </script>
</head>

<body onload="init()">
 <div id="map"></div>
</body>

</html>

代碼說明：首先實(shí)例化控件對(duì)象，然后調(diào)用Map的addControl方法加載到地圖容器即可，代碼中的ZoomToExtent控件的extent參數(shù)為地圖的縮放范圍，就是將當(dāng)前地圖縮放到此范圍，在視圖中會(huì)顯示此范圍。

2.2 修改縮放控件樣式

我們可以通過css樣式來設(shè)置Zoom、ZoomSlider、ZoomToExtent 的樣式，調(diào)整他在地圖中顯示的位置。代碼如下：

#map .ol-zoom .ol-zoom-out {
 margin-top: 204px;
}

#map .ol-zoomslider {
 background-color: transparent;
 top: 2.3em;
}

#map .ol-touch .ol-zoom .ol-zoom-out {
 margin-top: 212px;
}

#map .ol-touch .ol-zoomslider {
 top: 2.75em;
}

#map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
 top: 3px;
}

#map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
 top: 232px;
}


/*設(shè)置縮放控件ZoomToExtent的樣式，將其放到導(dǎo)航條下方
 */

#map .ol-zoom-extent {
 top: 280px;
}

實(shí)現(xiàn)效果如下