OpenLayer3入門——[一]
阿新 • • 發佈：2018-12-01
一、OpenLayer3下載
- 首先下載OpenLayer3開發包，步驟如下：
- 下載地址https://github.com/openlayers/openlayers/releases/tag/v3.20.1
- 選擇對應的包
- 將對應的檔案加入到專案中
二、HelloWord
程式碼如下
<html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <title>GIS</title> <!-- bootstrap樣式 --> <link rel="stylesheet" href="/css/bootstrap.min.css"> <!-- OpenLayer樣式 --> <link rel="stylesheet" href="/css/ol.css"/> <!-- 自定義樣式 --> <link rel="stylesheet" href="/css/index.css"/> <!-- JS --> <!-- <script src="/js/ol.js"></script> --> <script src="/js/ol-debug.js"></script> <script src="/js/jquery-1.4.1.js"></script></head> <body> <div class="back-img"> <!--底層地圖--> <div class="sr-1"> <div id="centerMap"></div> </div> </div> </body> <script type="text/javascript"> // 初始化地圖 var map; $(function(){ initmap(); }) function initmap(){ debugger; // 初始化地圖引數 map = new ol.Map({ target: 'centerMap',// DOM中地圖容器的id layers: [ ],// 圖層可以在地圖初始化一起進行初始化也可以後期通過addLayer方法進行新增 view:new ol.View({ // 檢視 center:[13380880,3535823],// 設定地圖中心座標點 zoom:8,// 設定初始化顯示層級 minZoom:7,// 最小顯示層級 maxZoom:14 // 最大顯示層級 }) }); //建立一個使用Open Street Map地圖源的瓦片圖層 var tilelayers = new ol.layer.Tile({source:new ol.source.OSM()}); map.addLayer(tilelayers); } </script> </html>
下面詳細解釋上面地圖建立中各個程式碼語句：
首先是說一下openlayers3的組成部分:
1). ol.map:它本身並沒有什麼實事需要他做，他只是一個協調者，去協調各個組成部分。對於我們開發而言，它就是一個程式的入口，我們可以通過它使用其提供的功能。
2) ol.view:即檢視。它主要就是控制地圖顯示的位置以及層級等功能
3) ol.layer:即圖層。在openlayers3中針對不同業務有著多種多樣的圖層類提供，而ol.layer相當於一個管理者，有效處理地圖資料來源的多樣性和複雜性問題。
4) ol.source:即資料來源。它是整個地圖背後的核心部分，如果沒有資料，地圖是渲染不出來。它與圖層一一對應，針對不同的圖層也會有不同的資料來源。
還有兩個組成部分:控制元件（ol.control），互動（ol. interaction），這裡就不細講了，在後面用到是會提到。
現在說程式碼中ol.map初始化的引數：
1). target : 這個做地圖開發的都懂的，就是在DOM中定義的地圖容器，一般是一個div
2) layers: openlayers3支援多個圖層顯示，我是通過後期addlayer方法新增上去的ol.layer.Tile是ol.layer下的一個子類。主要是用來定義瓦片圖層。
3) view：主要定義地圖顯示的中心點以及層級，可能有人疑問這個地圖中心點為什麼不是常見的WGS84座標系座標點。這主要是openlayers預設使用的墨卡託投影座標系，當然我們也是可以使用WGS84座標系的。