OpenLayers3實現(xiàn)地圖顯示功能
本文實例為大家分享了OpenLayers3實現(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)。打開后如圖所示：
需要注意的是這里下載有兩個版本，①：僅包括開發(fā)庫（開發(fā)與調(diào)試的JS庫以及CSS文件），②：包括開發(fā)庫、開發(fā)庫源碼、示例、API等所有開發(fā)資源。
在這里我下載了第一個版本，下載后如圖所示：
2. 顯示一個OSM瓦片地圖
這里我們介紹基于OpenLayers 3 API顯示一個OSM瓦片地圖（即OpenStreeMap的瓦片地圖）。
方法1
實現(xiàn)思路：對地圖的顯示，首先需要創(chuàng)建一個地圖容器對象（oL.Map類），然后在容器里面加載圖層來實現(xiàn)。
實現(xiàn)步驟：
1.新建一個文件夾，用于我們編寫網(wǎng)頁，然后在文件夾中新建js文件夾，以及css文件夾，首先我們將前面下載的OpenLayers 3 的開發(fā)庫和樣式文件（ol.js、ol.css）復制到j(luò)s文件夾中。
2.在文件夾中新建一個HTML網(wǎng)頁，在網(wǎng)頁的head 標簽中引入ol.js與ol.css。
3.在網(wǎng)頁body 中新建一個div作為地圖容器，設(shè)置其id為“map”，并通過css設(shè)置來設(shè)置容器的樣式。
4.編寫代碼創(chuàng)建一個地圖容器對象（ol.Map），通過target參數(shù)關(guān)聯(lián)到目標容器（id為“map”的div），通過view參數(shù)設(shè)置地圖視圖（ol.View）。
實現(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">
//實例化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）時，至少需要一個可視區(qū)域（View），以及在可以區(qū)域中顯示的一個或者多個圖層（layer），和一個地圖加載的目標標簽（target）。所以通過target、layers、view參數(shù)來設(shè)置加載地圖必須的瓦片圖層、地圖視圖和加載的目標HTML標簽。
1.ol.Map：地圖容器類，是OpenLayers 3 的核心部件，用于顯示地圖，可以加載各種類型的圖層，加載地圖控件（比例尺，鷹眼，地圖的縮放等等），以及與地圖交互的功能控件等。通過實例化地圖容器對象來加載地圖，并對target、layers、view參數(shù)進行設(shè)置，這是地圖加載的必備三要素。
2.ol.layer.Tile:瓦片圖層類，主要用于加載瓦片圖層，可以通過實例化瓦片圖層對象，綁定數(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è)置地圖的中心點（center）、初試顯示中心（zoom）等參數(shù)。
在加載圖層是，除了通過layers參數(shù)來設(shè)置地圖這種方式外，Map也提供了addLayer方法動態(tài)加載圖層對象。例如加載圖層的代碼如下：
<div id="map"></div>
<script type="text/javascript">
//實例化Map對象，用于加載地圖
var map = new ol.Map({
target: 'map', //地圖容器div的id
//設(shè)置在地圖容器中加載圖層
layers: [],
//地圖視圖設(shè)置
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 標簽中加載地圖，這種方式在瀏覽器解析時按照順序加載執(zhí)行，第二種方法就是我們可以現(xiàn)在html頁面的head 的標簽中編寫javascript代碼，也就是說寫一個加載OSM地圖的init函數(shù)，然后在網(wǎng)頁的 body 標簽中由onload方法調(diào)用加載地圖的init函數(shù)，這種加載方法在瀏覽器解析時，首先加載javascript，當加載頁面內(nèi)容時在調(diào)用處，再執(zhí)行相應(yīng)的javascript，實現(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() {
//實例化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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
用JSON.parse 來轉(zhuǎn)換成json對象，由于有注釋的存在則無法正確轉(zhuǎn)換甚至報錯。匹配字符串中的所有注釋，包括單行和多行注釋2013-11-11
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)表格動態(tài)變色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
TypeScript 數(shù)組Array操作的常用方法
區(qū)別JavaScript函數(shù)聲明與變量聲明
JavaScript Ajax Json實現(xiàn)上下級下拉框聯(lián)動效果實例代碼
