欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年09月25日 09:47:52   作者：jiegsier  
這篇文章主要為大家詳細介紹了OpenLayers3實現(xiàn)地圖顯示功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

需要注意的是這里下載有兩個版本，①：僅包括開發(fā)庫（開發(fā)與調試的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.新建一個文件夾，用于我們編寫網頁，然后在文件夾中新建js文件夾，以及css文件夾，首先我們將前面下載的OpenLayers 3 的開發(fā)庫和樣式文件（ol.js、ol.css）復制到js文件夾中。
2.在文件夾中新建一個HTML網頁，在網頁的head 標簽中引入ol.js與ol.css。
3.在網頁body 中新建一個div作為地圖容器，設置其id為“map”，并通過css設置來設置容器的樣式。
4.編寫代碼創(chuàng)建一個地圖容器對象（ol.Map），通過target參數(shù)關聯(lián)到目標容器（id為“map”的div），通過view參數(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
 //設置在地圖容器中加載圖層
 layers: [
 //加載瓦片圖層
 new ol.layer.Tile({
 //圖層對應的數(shù)據源，這里為加載OpenStreetMap在線瓦片服務數(shù)據
 source: new ol.source.OSM()
 })
 ],
 //地圖視圖設置
 view: new ol.View({
 center: [32, 113], //地圖顯示的初始中心
 zoom: 2 //地圖初始顯示的級別
 })
 });
 </script>
</body>

</html>

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

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

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

<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 標簽中加載地圖，這種方式在瀏覽器解析時按照順序加載執(zhí)行，第二種方法就是我們可以現(xiàn)在html頁面的head 的標簽中編寫javascript代碼，也就是說寫一個加載OSM地圖的init函數(shù)，然后在網頁的 body 標簽中由onload方法調用加載地圖的init函數(shù)，這種加載方法在瀏覽器解析時，首先加載javascript，當加載頁面內容時在調用處，再執(zhí)行相應的javascript，實現(xiàn)頁面加載完成后立即加載地圖數(shù)據的功能。

代碼如下：

<!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ù)據
 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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論