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>
<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>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
//例項化Map物件,用於載入地圖
var map = new ol.Map({
target: 'map', //地圖容器div的id
//設定在地圖容器中載入圖層
layers: [
//載入瓦片圖層
new ol.layer.Tile({
//圖層對應的資料來源,這裡為載入OpenStreetMap線上瓦片服務資料
source: new ol.source.OSM()
})
],
//地圖檢視設定
view: new ol.View({
center: [32, 113], //地圖顯示的初始中心
zoom: 2 //地圖初始顯示的級別
})
});
</script>
</body>
</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>