1. 程式人生 > >OpenLayers3基礎教程之實現地圖顯示功能

OpenLayers3基礎教程之實現地圖顯示功能

1.配置開發環境

使用OpenLayers 3開發WebGIS應用,我們首先需要配置開發環境,首先我們需要在openlayers官網獲取OpenLayers 3的開發庫。下載連結:官網。開啟後如圖所示:
這裡寫圖片描述

需要注意的是這裡下載有兩個版本,①:僅包括開發庫(開發與除錯的JS庫以及CSS檔案),②:包括開發庫、開發庫原始碼、示例、API等所有開發資源。

  • 在這裡我下載了第一個版本,下載後如圖所示:
    這裡寫圖片描述

2. 顯示一個OSM瓦片地圖

這裡我們介紹基於OpenLayers 3 API顯示一個OSM瓦片地圖(即OpenStreeMap的瓦片地圖)。

方法1
  • 實現思路:對地圖的顯示,首先需要建立一個地圖容器物件(oL.Map類),然後在容器裡面載入圖層來實現。

  • 實現步驟:

    1. 新建一個資料夾,用於我們編寫網頁,然後在資料夾中新建js資料夾,以及css資料夾,首先我們將前面下載的OpenLayers 3 的開發庫和樣式檔案(ol.js、ol.css)複製到js資料夾中。
    2. 在資料夾中新建一個HTML網頁,在網頁的head 標籤中引入ol.js與ol.css。
    3. 在網頁body 中新建一個div作為地圖容器,設定其id為“map”,並通過css設定來設定容器的樣式。
    4. 編寫程式碼建立一個地圖容器物件(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標籤。
  1. ol.Map:地圖容器類,是OpenLayers 3 的核心部件,用於顯示地圖,可以載入各種型別的圖層,載入地圖控制元件(比例尺,鷹眼,地圖的縮放等等),以及與地圖互動的功能控制元件等。通過例項化地圖容器物件來載入地圖,並對target、layers、view引數進行設定,這是地圖載入的必備三要素。
  2. ol.layer.Tile:瓦片圖層類,主要用於載入瓦片圖層,可以通過例項化瓦片圖層物件,繫結資料來源(source)載入對應的瓦片圖層。
  3. 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>