欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2020年09月25日 10:34:11   作者:jiegsier  
這篇文章主要為大家詳細介紹了OpenLayers3加載常用控件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了OpenLayers3加載常用控件使用的具體代碼,供大家參考,具體內容如下

1. 前言

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

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

2. 控件

2.1 導航控件

導航控件就是實現(xiàn)對地圖的按級縮放,拖動導航條的上的滑塊可以實現(xiàn)縮放操作。OpenLayers 3 框架提供的控制地圖縮放的相關控件包括地圖縮放控件(ol.control.Zoom)、縮放滑塊(ol.control.ZoomSlider)、按鈕式縮放到特定范圍的控件(ol.control.ZoomToExtent),可以自定義這些控件的樣式。
下面我們將通過修改地圖縮放的相關控件的默認樣式,實現(xiàn)一個導航條,效果如下:

實現(xiàn)步驟如下:

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

代碼如下

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>自定義導航功能</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() {
 //實例化Map對象,用于加載地圖
 var map = new ol.Map({
 target: 'map', //地圖容器div的id
 //在地圖容器中加載的圖層
 layers: [
  //加載瓦片圖層數(shù)據(jù)
  new ol.layer.Tile({
  source: new ol.source.OSM() //加載osm瓦片
  })
 ],
 //地圖視圖設置
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })

 });
 //實例化ZoomSlider控件并加載到地圖容器中
 var zoomslider = new ol.control.ZoomSlider();
 map.addControl(zoomslider);
 //實例化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>

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

2.2 修改縮放控件樣式

我們可以通過css樣式來設置Zoom、ZoomSlider、ZoomToExtent 的樣式,調整他在地圖中顯示的位置。代碼如下:

#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;
}


/*設置縮放控件ZoomToExtent的樣式,將其放到導航條下方
 */

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

實現(xiàn)效果如下

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論