openLayer的學習小結

WebGIS引擎–openLayer的學習小結

之前一直以為是一個簡單的圖層插件，後來在項目中用到了，才發現openLayer是如此的強大。

ol.Map

作為最重要的一個地圖類,在建立地圖時必須使用,主要格式如下:

var map=new ol.Map({...});
           

{}中主要定義具體的參數,本篇主要介紹的參數有layer、view、control、target。

1、ol.Layer

layer,顧名思義就是圖層，一個map類可以有多個layer（圖層）。layer和source是一一對應的，主要形式如下：

layers: [ new ol.layer.Tile({source: new ol.source.OSM()})]
           

layer和source的層次結構如下圖:

可以看出source有三種資料源：Tile、Image和Vector。

Tile：瓦片資料源，大部分的地圖都采用這種資料源的圖層。（較為複雜）

Image：一整張圖檔，适用于一些小場景地圖。

Vector：矢量資料源，點，線，面等等常用的地圖元素(Feature)，就囊括到這裡面。

重點介紹Tile，其有若幹的子類節點。線上服務的：ol.source.BingMaps(Bing地圖)、ol.source.OSM、ol.source.Stamen; ol.source.XYZ等。

2、ol.View

地圖的視窗，一個map對象隻能有一個view視圖。主要形式如下：

view: new ol.View({
 center: [,],
 zoom: 
 })
           

其中的center屬性适用于設定地圖的中心，zoom是圖層個數。

view參數可以對地圖進行移動，縮放操作，具體需要對其center和zoom屬性進行設定。另外center屬性可以自定義設定某一個點為地圖中心，具體的代碼如下所示：

center: ol.proj.transform([XX,XX],source,destnation)
           

source為原坐标的坐标系，destnation為目标坐标的坐标系，目前用的坐标系主要由兩種，分别是EPSG:4326(是WGS84坐标系)和EPSG:3857(用于web地圖)

3、ol.Control

地圖上的控件集合，有下面幾種控件類。

- Attribution：右下角的地圖資訊控件

- FullScreen：全屏控件

- MousePosition ：滑鼠位置控件，滑鼠放置處顯示經緯度。

- overviewMap：鳥瞰圖控件

- Rotate：指北針控件

- ScaleLine：比例尺控件

- Zoom：縮放控件

- ZoomSlider：縮放滾動條控件

- ZoomToExtent：放大到設定區域控件

而一般在map中定義時采用兩種方式。

其一，用ol.control.defauls來配置預設的幾個參數，方式如下：

controls: ol.control.defaults({
           attribution:false,
           rotate:false,
           zoom:false
   })//預設均不設定
           

其二,自定義控件類設定，方式如下：

controls: ol.control.defaults().extent({
           new ol.control.FullScreen(),
           new ol.control.ScaleLine(),
           ...
   })//自定義設定
           

4、ol.target

指定地圖在頁面中具體哪個位置顯示。主要形式1如下：