OpenLayers3實現對地圖的基本操作
本文例項為大家分享了OpenLayers3實現對地圖的基本操作程式碼，供大家參考，具體內容如下
1. 前言
對地圖的基本操作就是對地圖的放大、縮小、移動、復位和更新等，通過使用OpenLayers 3 框架中操作地圖檢視（View）的相應方法。
2. 實現思路
（1）新建一個網頁，參照前面的文章載入OSM瓦片地圖，通過檢視設定地圖的最大、最小縮放級別以及初試旋轉角度，通過使用jQuery以及bootstrap來實現在縮放控制元件以及旋轉控制元件滑鼠懸停提示的效果。
（2）在地圖容器中新建4個按鈕（button），設定按鈕的id，通過css控制按鈕的樣式
（3）為每個按鈕新增 onclick 事件，在函式中呼叫 OpenLayer 3 中操作地圖檢視的相應方法，來實現單擊放大、單擊縮小、移動到某一位置以及復位功能。
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/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/Operation.js"></script>
<style>
#map {
width: 100%;
height: 570px;
}
#menu {
float: left;
position: absolute;
bottom: 10px;
z-index: 2000;
}
.tooltip-inner {
white-space: nowrap;
}
</style>
</head>
<body onload="init()">
<div id="map">
<div id="menu">
<button id="zoom-out" class="btn btn-info">單擊縮小</button>
<button id="zoom-in" class="btn btn-info">單擊放大</button>
<button id="panto" class="btn btn-info">移動地圖</button>
<button id="restore" class="btn btn-info">復位地圖</button>
</div>
</div>
</body>
</html>js程式碼：
function init() {
//例項化Map物件，用於載入地圖
var map = new ol.Map({
target: 'map',//地圖容器的div
// 在地圖容器中載入圖層
layers: [
// 載入瓦片圖層資料OSM
new ol.layer.Tile({
source: new ol.source.OSM()
})
],// 地圖檢視設定
view: new ol.View({
center: [12950000,4860000],//地圖顯示中心設定
zoom: 8,//地圖初始顯示級別
minZoom: 6,//最小級別
maxZoom: 12,//最大級別
rotation: Math.PI / 6 //設定旋轉角度
})
});
// 地圖檢視的初始引數
var view = map.getView();
var zoom = view.getZoom();
var center = view.getCenter();
var rotation = view.getRotation();
// 實現單擊縮小按鈕的功能
document.getElementById('zoom-out').onclick = function() {
var view = map.getView(); //獲取當前地圖檢視
var zoom = view.getZoom(); //獲得當前縮放級別
view.setZoom(zoom - 1); //地圖縮小一級
}
// 實現單擊放大的功能按鈕
document.getElementById('zoom-in').onclick = function() {
var view = map.getView(); //獲取當前地圖檢視
var zoom = view.getZoom(); //獲得當前縮放級別
view.setZoom(zoom + 1); //地圖放大一級
}
// 平移功能
document.getElementById('panto').onclick = function() {
var view = map.getView(); //獲取當前地圖檢視
var lz = ol.proj.fromLonLat([103.73333,36.03333]);
view.setCenter(lz); //平移地圖
}
// 復位功能（復位到初始復位）
document.getElementById('restore').onclick = function() {
view.setCenter(center); //初始中心點
view.setRotation(rotation); //初始旋轉角度
view.setZoom(zoom); //平移地圖
}
// 為內建的縮放控制元件與旋轉控制元件新增tooltip提示資訊
$('.ol-zoom-in,.ol-zoom-out').tooltip({
placement: 'right' //tooltip在右側顯示
});
$('.ol-rotate-reset,.ol-attribution button[title]').tooltip({
placement: 'left' //tooltip在右側顯示
});
}顯示效果如下：
4. 程式碼解析
對地圖的縮放、平移、旋轉等基本操作都是通過地圖檢視 View 進行控制，通過地圖檢視相應的 set 方法實現，首先需要通過Map的getView()獲取當前地圖時檢視物件，然後根據檢視物件呼叫其 get 方法來獲取當前的縮放級別（Zoom）、中心點（center）、旋轉角度（rotation）等引數。
（1）縮放地圖
通過 View 的setZoom方法實現的，縮放級別由setZoom方法的引數進行設定。首先通過 view.getZoom() 獲取當前地圖的級別，然後呼叫 setZoom 方法進行縮放（view.setZoom(zoom - 1)），可將地圖縮小一級，通過 view.setZoom(zoom +1); 可將地圖放大一級。
（2）移動地圖
移動地圖就是通過改變地圖當前地圖的中心，通過地圖檢視的 setCenter 方法實現。首先通過Map物件獲取地圖的檢視物件，然後呼叫 setCenter 方法進行設定。函式傳的引數就是地圖中心的座標點。
（3）旋轉地圖
它是通過地圖預設載入的旋轉控制元件（ol.control.Rotate）來實現的，Rotate 控制元件的 autoHide 引數預設設定為 true，在旋轉角度為0時自動隱藏旋轉功能。在這個例子中，我們設定了地圖的初始旋轉角為60°（ rotation: Math.PI / 6 //設定旋轉角度），所以當我們點選旋轉按鈕時，旋轉60°回到0°，按鈕影藏。
（4）復位地圖
它的功能就是將地圖恢復當我們剛開始載入地圖的狀態，它涉及到 View 的設定，我們首先獲取到地圖載入時的縮放級別、中心點、旋轉角度，然後通過 setZoom 、setCenter 、setRotation 方法進行設定，實現地圖的復位功能。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。