快捷導(dǎo)航

OpenLayers3實(shí)現(xiàn)地圖顯示功能

更新時(shí)間：2020年09月25日 09:47:52 作者：jiegsier

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

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

1.配置開發(fā)環(huán)境

使用OpenLayers 3開發(fā)WebGIS應(yīng)用，我們首先需要配置開發(fā)環(huán)境，首先我們需要在openlayers官網(wǎng)獲取OpenLayers 3的開發(fā)庫。下載鏈接：官網(wǎng)。打開后如圖所示：

需要注意的是這里下載有兩個(gè)版本，①：僅包括開發(fā)庫（開發(fā)與調(diào)試的JS庫以及CSS文件），②：包括開發(fā)庫、開發(fā)庫源碼、示例、API等所有開發(fā)資源。

在這里我下載了第一個(gè)版本，下載后如圖所示：

2. 顯示一個(gè)OSM瓦片地圖

這里我們介紹基于OpenLayers 3 API顯示一個(gè)OSM瓦片地圖（即OpenStreeMap的瓦片地圖）。

方法1

實(shí)現(xiàn)思路：對地圖的顯示，首先需要創(chuàng)建一個(gè)地圖容器對象（oL.Map類），然后在容器里面加載圖層來實(shí)現(xiàn)。

實(shí)現(xiàn)步驟：

1.新建一個(gè)文件夾，用于我們編寫網(wǎng)頁，然后在文件夾中新建js文件夾，以及css文件夾，首先我們將前面下載的OpenLayers 3 的開發(fā)庫和樣式文件（ol.js、ol.css）復(fù)制到j(luò)s文件夾中。
2.在文件夾中新建一個(gè)HTML網(wǎng)頁，在網(wǎng)頁的head 標(biāo)簽中引入ol.js與ol.css。
3.在網(wǎng)頁body 中新建一個(gè)div作為地圖容器，設(shè)置其id為“map”，并通過css設(shè)置來設(shè)置容器的樣式。
4.編寫代碼創(chuàng)建一個(gè)地圖容器對象（ol.Map），通過target參數(shù)關(guān)聯(lián)到目標(biāo)容器（id為“map”的div），通過view參數(shù)設(shè)置地圖視圖（ol.View）。

實(shí)現(xiàn)代碼如下：

<!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">
 //實(shí)例化Map對象，用于加載地圖
 var map = new ol.Map({
 target: 'map', //地圖容器div的id
 //設(shè)置在地圖容器中加載圖層
 layers: [
 //加載瓦片圖層
 new ol.layer.Tile({
 //圖層對應(yīng)的數(shù)據(jù)源，這里為加載OpenStreetMap在線瓦片服務(wù)數(shù)據(jù)
 source: new ol.source.OSM()
 })
 ],
 //地圖視圖設(shè)置
 view: new ol.View({
 center: [32, 113], //地圖顯示的初始中心
 zoom: 2 //地圖初始顯示的級別
 })
 });
 </script>
</body>

</html>

代碼說明：首先這是一種最簡單的靜態(tài)加載地圖的方法，我們在初始化一幅地圖（map）時(shí)，至少需要一個(gè)可視區(qū)域（View），以及在可以區(qū)域中顯示的一個(gè)或者多個(gè)圖層（layer），和一個(gè)地圖加載的目標(biāo)標(biāo)簽（target）。所以通過target、layers、view參數(shù)來設(shè)置加載地圖必須的瓦片圖層、地圖視圖和加載的目標(biāo)HTML標(biāo)簽。

1.ol.Map：地圖容器類，是OpenLayers 3 的核心部件，用于顯示地圖，可以加載各種類型的圖層，加載地圖控件（比例尺，鷹眼，地圖的縮放等等），以及與地圖交互的功能控件等。通過實(shí)例化地圖容器對象來加載地圖，并對target、layers、view參數(shù)進(jìn)行設(shè)置，這是地圖加載的必備三要素。
2.ol.layer.Tile:瓦片圖層類，主要用于加載瓦片圖層，可以通過實(shí)例化瓦片圖層對象，綁定數(shù)據(jù)源（source）加載對應(yīng)的瓦片圖層。
3.ol.source.OSM :封裝的OpenStreetMap在線瓦片服務(wù)數(shù)據(jù)的數(shù)據(jù)源類，創(chuàng)建此數(shù)據(jù)源對象并加載到瓦片圖層中。
ol.View：地圖視圖類，主要是控制地圖與人的交互，如縮放、調(diào)整地圖顯示分辨率以及旋轉(zhuǎn)地圖等。通過實(shí)例化地圖視圖對象，設(shè)置地圖的中心點(diǎn)（center）、初試顯示中心（zoom）等參數(shù)。

在加載圖層是，除了通過layers參數(shù)來設(shè)置地圖這種方式外，Map也提供了addLayer方法動態(tài)加載圖層對象。例如加載圖層的代碼如下：

<div id="map"></div>
<script type="text/javascript">
 //實(shí)例化Map對象，用于加載地圖
 var map = new ol.Map({
 target: 'map', //地圖容器div的id
 //設(shè)置在地圖容器中加載圖層
 layers: [],
 //地圖視圖設(shè)置
 view: new ol.View({
 center: [32, 113], //地圖顯示的初始中心
 zoom: 2 //地圖初始顯示的級別
 })
 });
 //實(shí)例化OSM瓦片地圖的瓦片圖層
 var tileLayer = new ol.layer.Tile({
 source: new ol.source.OSM()
 });
 //將瓦片圖層添加到地圖容器中
 map.addLayer(tileLayer);
</script>

方法2

第一種方法是直接在HTML頁面中的 body 標(biāo)簽中加載地圖，這種方式在瀏覽器解析時(shí)按照順序加載執(zhí)行，第二種方法就是我們可以現(xiàn)在html頁面的head 的標(biāo)簽中編寫javascript代碼，也就是說寫一個(gè)加載OSM地圖的init函數(shù)，然后在網(wǎng)頁的 body 標(biāo)簽中由onload方法調(diào)用加載地圖的init函數(shù)，這種加載方法在瀏覽器解析時(shí)，首先加載javascript，當(dāng)加載頁面內(nèi)容時(shí)在調(diào)用處，再執(zhí)行相應(yīng)的javascript，實(shí)現(xiàn)頁面加載完成后立即加載地圖數(shù)據(jù)的功能。

代碼如下：

<!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() {
 //實(shí)例化Map對象，用于加載地圖
 var map = new ol.Map({
 target: 'map', //地圖容器div的id
 //在地圖容器中加載的圖層
 layers: [
 //加載瓦片圖層數(shù)據(jù)
 new ol.layer.Tile({
 source: new ol.source.OSM() //加載osm瓦片
 })
 ],
 //地圖視圖設(shè)置
 view: new ol.View({
 center: [0, 0],
 zoom: 2

 })

 });

 }
 </script>
</head>

<body onload="init()">
 <div id="map"></div>
</body>

</html>

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

您可能感興趣的文章: