OpenLayers3基礎教程之實現地圖顯示功能
阿新 • • 發佈：2019-01-29
1.配置開發環境
使用OpenLayers 3開發WebGIS應用，我們首先需要配置開發環境，首先我們需要在openlayers官網獲取OpenLayers 3的開發庫。下載連結：官網。開啟後如圖所示：
需要注意的是這裡下載有兩個版本，①：僅包括開發庫（開發與除錯的JS庫以及CSS檔案），②：包括開發庫、開發庫原始碼、示例、API等所有開發資源。
- 在這裡我下載了第一個版本，下載後如圖所示：
2. 顯示一個OSM瓦片地圖
這裡我們介紹基於OpenLayers 3 API顯示一個OSM瓦片地圖（即OpenStreeMap的瓦片地圖）。
方法1
實現思路：對地圖的顯示，首先需要建立一個地圖容器物件（oL.Map類），然後在容器裡面載入圖層來實現。
實現步驟：
- 新建一個資料夾，用於我們編寫網頁，然後在資料夾中新建js資料夾，以及css資料夾，首先我們將前面下載的OpenLayers 3 的開發庫和樣式檔案（ol.js、ol.css）複製到js資料夾中。
- 在資料夾中新建一個HTML網頁，在網頁的head 標籤中引入ol.js與ol.css。
- 在網頁body 中新建一個div作為地圖容器，設定其id為“map”，並通過css設定來設定容器的樣式。
- 編寫程式碼建立一個地圖容器物件（ol.Map），通過target引數關聯到目標容器（id為“map”的div），通過view引數設定地圖檢視（ol.View）。
實現程式碼如下：
<!DOCTYPE html> - 程式碼說明：首先這是一種最簡單的靜態載入地圖的方法，我們在初始化一幅地圖（map）時，至少需要一個可視區域（View），以及在可以區域中顯示的一個或者多個圖層（layer），和一個地圖載入的目標標籤（target）。所以通過target、layers、view引數來設定載入地圖必須的瓦片圖層、地圖檢視和載入的目標HTML標籤。
- ol.Map：地圖容器類，是OpenLayers 3 的核心部件，用於顯示地圖，可以載入各種型別的圖層，載入地圖控制元件（比例尺，鷹眼，地圖的縮放等等），以及與地圖互動的功能控制元件等。通過例項化地圖容器物件來載入地圖，並對target、layers、view引數進行設定，這是地圖載入的必備三要素。
- ol.layer.Tile:瓦片圖層類，主要用於載入瓦片圖層，可以通過例項化瓦片圖層物件，繫結資料來源（source）載入對應的瓦片圖層。
- ol.source.OSM :封裝的OpenStreetMap線上瓦片服務資料的資料來源類，建立此資料來源物件並載入到瓦片圖層中。
ol.View：地圖檢視類，主要是控制地圖與人的互動，如縮放、調整地圖顯示解析度以及旋轉地圖等。通過例項化地圖檢視物件，設定地圖的中心點（center）、初試顯示中心（zoom）等引數。
在載入圖層是，除了通過layers引數來設定地圖這種方式外，Map也提供了addLayer方法動態載入圖層物件。例如載入圖層的程式碼如下：
<div id="map"></div>
<script type="text/javascript">
//例項化Map物件，用於載入地圖
var map = new ol.Map({
target: 'map', //地圖容器div的id
//設定在地圖容器中載入圖層
layers: [],
//地圖檢視設定
view: new ol.View({
center: [32, 113], //地圖顯示的初始中心
zoom: 2 //地圖初始顯示的級別
})
});
//例項化OSM瓦片地圖的瓦片圖層
var tileLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
//將瓦片圖層新增到地圖容器中
map.addLayer(tileLayer);
</script>方法2
第一種方法是直接在HTML頁面中的 body 標籤中載入地圖，這種方式在瀏覽器解析時按照順序載入執行，第二種方法就是我們可以現在html頁面的head 的標籤中編寫javascript程式碼，也就是說寫一個載入OSM地圖的init函式，然後在網頁的 body 標籤中由onload方法呼叫載入地圖的init函式，這種載入方法在瀏覽器解析時，首先載入javascript，當載入頁面內容時在呼叫處，再執行相應的javascript，實現頁面載入完成後立即載入地圖資料的功能。
- 程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>載入OSM地圖</title>
<!-- 引入ol.css，以及ol.css -->
<link rel="stylesheet" href="css/ol.css">
<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: [
//載入瓦片圖層資料
new ol.layer.Tile({
source: new ol.source.OSM() //載入osm瓦片
})
],
//地圖檢視設定
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>