OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作

更新時(shí)間：2020年09月28日 09:46:11 作者：jiegsier

這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作代碼，供大家參考，具體內(nèi)容如下

1. 前言

對(duì)地圖的基本操作就是對(duì)地圖的放大、縮小、移動(dòng)、復(fù)位和更新等，通過(guò)使用OpenLayers 3 框架中操作地圖視圖（View）的相應(yīng)方法。

2. 實(shí)現(xiàn)思路

（1）新建一個(gè)網(wǎng)頁(yè)，參照前面的文章加載OSM瓦片地圖，通過(guò)視圖設(shè)置地圖的最大、最小縮放級(jí)別以及初試旋轉(zhuǎn)角度，通過(guò)使用jQuery以及bootstrap來(lái)實(shí)現(xiàn)在縮放控件以及旋轉(zhuǎn)控件鼠標(biāo)懸停提示的效果。
（2）在地圖容器中新建4個(gè)按鈕（button），設(shè)置按鈕的id，通過(guò)css控制按鈕的樣式
（3）為每個(gè)按鈕添加 onclick 事件，在函數(shù)中調(diào)用 OpenLayer 3 中操作地圖視圖的相應(yīng)方法，來(lái)實(shí)現(xiàn)單擊放大、單擊縮小、移動(dòng)到某一位置以及復(fù)位功能。
（4）為縮放控件以及旋轉(zhuǎn)控件添加tooltip提示信息，設(shè)置tooltip的冒泡位置。

3. 代碼如下

html代碼：

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

<head>
 <meta charset="UTF-8">
 <title>對(duì)地圖的基本操作</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">移動(dòng)地圖</button>
  <button id="restore" class="btn btn-info">復(fù)位地圖</button>
 </div>
 </div>
</body>

</html>

js代碼：

function init() {
 //實(shí)例化Map對(duì)象，用于加載地圖
 var map = new ol.Map({
 target: 'map', //地圖容器的div
 // 在地圖容器中加載圖層
 layers: [
  // 加載瓦片圖層數(shù)據(jù)OSM
  new ol.layer.Tile({
  source: new ol.source.OSM()
  })
 ],
 // 地圖視圖設(shè)置
 view: new ol.View({
  center: [12950000, 4860000], //地圖顯示中心設(shè)置
  zoom: 8, //地圖初始顯示級(jí)別
  minZoom: 6, //最小級(jí)別
  maxZoom: 12, //最大級(jí)別
  rotation: Math.PI / 6 //設(shè)置旋轉(zhuǎn)角度
 })
 });
 // 地圖視圖的初始參數(shù)
 var view = map.getView();
 var zoom = view.getZoom();
 var center = view.getCenter();
 var rotation = view.getRotation();
 // 實(shí)現(xiàn)單擊縮小按鈕的功能
 document.getElementById('zoom-out').onclick = function() {
  var view = map.getView(); //獲取當(dāng)前地圖視圖
  var zoom = view.getZoom(); //獲得當(dāng)前縮放級(jí)別
  view.setZoom(zoom - 1); //地圖縮小一級(jí)
 }
 // 實(shí)現(xiàn)單擊放大的功能按鈕
 document.getElementById('zoom-in').onclick = function() {
  var view = map.getView(); //獲取當(dāng)前地圖視圖
  var zoom = view.getZoom(); //獲得當(dāng)前縮放級(jí)別
  view.setZoom(zoom + 1); //地圖放大一級(jí)
 }
 // 平移功能
 document.getElementById('panto').onclick = function() {
  var view = map.getView(); //獲取當(dāng)前地圖視圖
  var lz = ol.proj.fromLonLat([103.73333, 36.03333]);
  view.setCenter(lz); //平移地圖
 }
 // 復(fù)位功能（復(fù)位到初始復(fù)位）
 document.getElementById('restore').onclick = function() {
  view.setCenter(center); //初始中心點(diǎn)
  view.setRotation(rotation); //初始旋轉(zhuǎn)角度
  view.setZoom(zoom); //平移地圖
 }
 // 為內(nèi)置的縮放控件與旋轉(zhuǎn)控件添加tooltip提示信息
 $('.ol-zoom-in,.ol-zoom-out').tooltip({
 placement: 'right' //tooltip在右側(cè)顯示
 });
 $('.ol-rotate-reset,.ol-attribution button[title]').tooltip({
 placement: 'left' //tooltip在右側(cè)顯示
 });
}

顯示效果如下：

4. 代碼解析

對(duì)地圖的縮放、平移、旋轉(zhuǎn)等基本操作都是通過(guò)地圖視圖 View 進(jìn)行控制，通過(guò)地圖視圖相應(yīng)的 set 方法實(shí)現(xiàn)，首先需要通過(guò)Map的getView()獲取當(dāng)前地圖時(shí)視圖對(duì)象，然后根據(jù)視圖對(duì)象調(diào)用其 get 方法來(lái)獲取當(dāng)前的縮放級(jí)別（Zoom）、中心點(diǎn)（center）、旋轉(zhuǎn)角度（rotation）等參數(shù)。

（1）縮放地圖

通過(guò) View 的setZoom方法實(shí)現(xiàn)的，縮放級(jí)別由setZoom方法的參數(shù)進(jìn)行設(shè)置。首先通過(guò) view.getZoom() 獲取當(dāng)前地圖的級(jí)別，然后調(diào)用 setZoom 方法進(jìn)行縮放（view.setZoom(zoom - 1)），可將地圖縮小一級(jí)，通過(guò) view.setZoom(zoom +1); 可將地圖放大一級(jí)。

（2）移動(dòng)地圖

移動(dòng)地圖就是通過(guò)改變地圖當(dāng)前地圖的中心，通過(guò)地圖視圖的 setCenter 方法實(shí)現(xiàn)。首先通過(guò)Map對(duì)象獲取地圖的視圖對(duì)象，然后調(diào)用 setCenter 方法進(jìn)行設(shè)置。函數(shù)傳的參數(shù)就是地圖中心的坐標(biāo)點(diǎn)。

（3）旋轉(zhuǎn)地圖

它是通過(guò)地圖默認(rèn)加載的旋轉(zhuǎn)控件（ol.control.Rotate）來(lái)實(shí)現(xiàn)的，Rotate 控件的 autoHide 參數(shù)默認(rèn)設(shè)置為 true，在旋轉(zhuǎn)角度為0時(shí)自動(dòng)隱藏旋轉(zhuǎn)功能。在這個(gè)例子中，我們?cè)O(shè)置了地圖的初始旋轉(zhuǎn)角為60°（ rotation: Math.PI / 6 //設(shè)置旋轉(zhuǎn)角度），所以當(dāng)我們點(diǎn)擊旋轉(zhuǎn)按鈕時(shí)，旋轉(zhuǎn)60°回到0°，按鈕影藏。

（4）復(fù)位地圖

它的功能就是將地圖恢復(fù)當(dāng)我們剛開(kāi)始加載地圖的狀態(tài)，它涉及到 View 的設(shè)置，我們首先獲取到地圖加載時(shí)的縮放級(jí)別、中心點(diǎn)、旋轉(zhuǎn)角度，然后通過(guò) setZoom 、setCenter 、setRotation 方法進(jìn)行設(shè)置，實(shí)現(xiàn)地圖的復(fù)位功能。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: