OpenLayers 3 之 地圖圖層數據來源（ol.source）詳解

原文地址

source 是 Layer 的重要組成部分，表示圖層的來源，也就是服務地址。除了在構造函數中制定外，能夠使用 layer.setSource(source) 稍後指定。
1、包含的類型

    ol.source.BingMaps ，必應地圖的切片數據，繼承自ol.source.TileImage；
    ol.source.Cluster，聚簇矢量數據，繼承自ol.source.Vector；
    ol.source.ImageCanvas，數據來源是一個 canvas 元素，其中的數據是圖片，繼承自 ol.source.Image；
    ol.source.ImageMapGuide，Mapguide 服務器提供的圖片地圖數據，繼承自 ol.source.Image，fire ol.source.ImageEvent；
    ol.source.ImageStatic，提供單一的靜態圖片地圖，繼承自ol.source.Image；
    ol.source.ImageVector，數據來源是一個 canvas 元素，可是其中的數據是矢量來源 ol.source.Vector，繼承自 ol.source.ImageCanvas；
    ol.source.ImageWMS，WMS 服務提供的單一的圖片數據，繼承自 ol.source.Image，觸發 ol.source.ImageEvent；
    ol.source.MapQuest，MapQuest 提供的切片數據，繼承自 ol.source.XYZ；
    ol.source.OSM，OpenStreetMap 提供的切片數據，繼承自 ol.source.XYZ；
    ol.source.Stamen，Stamen 提供的地圖切片數據，繼承自 ol.source.XYZ；
    ol.source.TileVector，被切分爲網格的矢量數據，繼承自 ol.source.Vector；
    ol.source.TileDebug，並不從服務器獲取數據，而是爲切片渲染一個網格，繼承自 ol.source.Tile；
    ol.source.TileImage，提供切分紅切片的圖片數據，繼承自 ol.source.Tile，觸發 ol.source.TileEvent；
    ol.source.TileUTFGrid，TileJSON 格式 的 UTFGrid 交互數據，繼承自 ol.source.Tile；
    ol.source.TileJSON，TileJSON 格式的切片數據，繼承自 ol.source.TileImage；
    ol.source.TileArcGISRest，ArcGIS Rest 服務提供的切片數據，繼承自 ol.source.TileImage；
    ol.source.WMTS，WMTS 服務提供的切片數據。繼承自 ol.source.TileImage；
    ol.source.XYZ，XYZ 格式的切片數據，繼承自 ol.source.TileImage；
    ol.source.Zoomify，Zoomify 格式的切片數據，繼承自 ol.source.TileImage。

上面介紹的都是能夠實例化的類，還有一部分基類，不能被實例化，只負責被繼承，有：

    ol.source.Image，提供單一圖片數據的類型，直接繼承自 ol.source.Source；
    ol.source.Tile，提供被切分爲網格切片的圖片數據，繼承自 ol.source.Source；
    ol.source.Vector，提供矢量圖層數據，繼承自 ol.source.Source；

2、用法說明
1. ol.source.Vector

矢量圖層的數據來源
1.1 事件

包含四個事件，addfeature，changefeature，clear，removefeature。

addfeature，當一個要素添加到 source 中觸發；
changefeature，當要素變化時觸發；
clear，當 source 的 clear 方法調用時候觸發；
removefeature，當要素移除時候發生。
1.2 參數

接受的參數：


/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *     features: (Array.<ol.Feature>|undefined),
 *     format: (ol.format.Feature|undefined),
 *     loader: (ol.FeatureLoader|undefined),
 *     logo: (string|olx.LogoOptions|undefined),
 *     strategy: (ol.LoadingStrategy|undefined),
 *     url: (string|undefined),
 *     wrapX: (boolean|undefined)}}
 * @api
 */

 

    attribution，地圖右下角的 logo 包含的內容；
    features，地理要素，從字符串讀取的數據；
    format，url屬性設置後，加載要素使用的數據格式，採用異步的 AJAX 加載；
    loader，加載要素使用的加載函數；
    logo，logo包含的內容；
    strategy，加載要素使用的策略，默認是 一次性加載全部要素；
    url，要素數據的地址；
    wrapX，是否在地圖水平座標軸上重複，默認是 true。

1.3 實例

features 方法
假若有一個包含空間數據的字符串，geojsonObject，是GeoJSON字符串格式，那麼能夠用來初始化一個圖層。

var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: style
});

map.addLayer(vectorLayer);

    

url + format 方法
若是有一個文件做爲數據源，那麼能夠配置 url 屬性來加載數據：

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/geojson/countries.geojson',
    format: new ol.format.GeoJSON()
  })
});

    

這兩種方法中都會指定數據來源格式， 矢量數據源支持的格式包含不少：gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities（兼容 wms 的格式）、 wms getfeatureinfo、 wmts capabilities、xlink、xsd等格式。這些格式都有readFeatures 、readFeature 和readGeometry 方法用於讀取數據。
2. ol.source.Tile

提供被切分爲切片的圖片地圖數據
可配置的選項

/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *            extent: (ol.Extent|undefined),
 *            logo: (string|olx.LogoOptions|undefined),
 *            opaque: (boolean|undefined),
 *            tilePixelRatio: (number|undefined),
 *            projection: ol.proj.ProjectionLike,
 *            state: (ol.source.State|undefined),
 *            tileGrid: (ol.tilegrid.TileGrid|undefined),
 *            wrapX: (boolean|undefined)}}
 */
 
與 vector 同樣的選項就不介紹了，介紹與 vector 特有的選項：

    extent，地圖視圖默認的座標範圍；
    opaque，不透明與否，一個布爾值，默認 false；
    tilePixelRatio，切片的大小調整選項，如 256 × 256，和 512 × 512；
    projection，投影；
    state，地圖所處的狀態，包括undefined，loading，ready，error；
    tileGrid，覆蓋在地圖上的格網；

接受的事件

    tileloadstart，切片開始加載時觸發的事件；
    tileloadend，切片加載完畢觸發事件；
    tileloaderror，切片加載出錯時的處理。

3. ol.source.Image

提供單一的圖片地圖。
能夠配置的選項

/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *            extent: (null|ol.Extent|undefined),
 *            logo: (string|olx.LogoOptions|undefined),
 *            projection: ol.proj.ProjectionLike,
 *            resolutions: (Array.<number>|undefined),
 *            state: (ol.source.State|undefined)}}
 */

   

    resolutions，地圖分辨率。其餘的選項都與以上的同樣。

觸發的事件

    imageloadstart，圖片地圖開始加載觸發的事件；
    imageloadend，圖片地圖加載完畢觸發的事件；
    imageloaderror，圖片地圖加載出錯時觸發的事件。

4、總結

source 是 layer 中必須的選項，定義着地圖數據的來源，與數據有關的函數，如addfeature、getfeature等函數都定義在 source 中，並且數據源支持多種格式。