這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹OpenLayers3如何加載常用控件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)鎮(zhèn)遠(yuǎn),十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

1. 前言

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

在加載地圖時(shí)OpenLayers 3 通過(guò)ol.control.defaults 默認(rèn)加載了三個(gè)常用的空間：縮放控件（ol.control.Zoom）、旋轉(zhuǎn)控件（ol.control.Roate）、圖層數(shù)據(jù)源屬性控件（ol.control.Attribution）,因此我們可以通過(guò)鼠標(biāo)在地圖容器的左上角的縮放按鈕，以及右下角的圖層數(shù)據(jù)源控件來(lái)對(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ò)修改地圖縮放的相關(guān)控件的默認(rèn)樣式，實(shí)現(xiàn)一個(gè)導(dǎo)航條，效果如下：

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

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

代碼如下

當(dāng)前題目：OpenLayers3如何加載常用控件-創(chuàng)新互聯(lián)
本文路徑：http://weahome.cn/article/jhgci.html