1. 程式人生 > >OpenLayers 3 之 地圖圖層資料來源(ol.source)詳解

OpenLayers 3 之 地圖圖層資料來源(ol.source)詳解

source 是 Layer 的重要組成部分,表示圖層的來源,也就是服務地址。除了在建構函式中制定外,可以使用 layer.setSource(source) 稍後指定。

一、包含的型別

  1. ol.source.BingMaps ,必應地圖的切片資料,繼承自ol.source.TileImage
  2. ol.source.Cluster,聚簇向量資料,繼承自ol.source.Vector
  3. ol.source.ImageCanvas,資料來源是一個 canvas 元素,其中的資料是圖片,繼承自 ol.source.Image
  4. ol.source.ImageMapGuide,Mapguide 伺服器提供的圖片地圖資料,繼承自 ol.source.Image
    ,fire ol.source.ImageEvent
  5. ol.source.ImageStatic,提供單一的靜態圖片地圖,繼承自ol.source.Image
  6. ol.source.ImageVector,資料來源是一個 canvas 元素,但是其中的資料是向量來源 ol.source.Vector,繼承自 ol.source.ImageCanvas
  7. ol.source.ImageWMS,WMS 服務提供的單一的圖片資料,繼承自 ol.source.Image,觸發 ol.source.ImageEvent
  8. ol.source.MapQuest,MapQuest 提供的切片資料,繼承自 ol.source.XYZ
  9. ol.source.OSM,OpenStreetMap 提供的切片資料,繼承自 ol.source.XYZ
  10. ol.source.Stamen,Stamen 提供的地圖切片資料,繼承自 ol.source.XYZ
  11. ol.source.TileVector,被切分為網格的向量資料,繼承自 ol.source.Vector
  12. ol.source.TileDebug,並不從伺服器獲取資料,而是為切片渲染一個網格,繼承自 ol.source.Tile
  13. ol.source.TileImage,提供切分成切片的圖片資料,繼承自 ol.source.Tile,觸發 ol.source.TileEvent
  14. ol.source.TileUTFGrid,TileJSON 格式 的 UTFGrid 互動資料,繼承自 ol.source.Tile
  15. ol.source.TileJSON,TileJSON 格式的切片資料,繼承自 ol.source.TileImage
  16. ol.source.TileArcGISRest,ArcGIS Rest 服務提供的切片資料,繼承自 ol.source.TileImage
  17. ol.source.WMTS,WMTS 服務提供的切片資料。繼承自 ol.source.TileImage
  18. ol.source.XYZ,XYZ 格式的切片資料,繼承自 ol.source.TileImage
  19. 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

二、用法說明

1. ol.source.Vector

向量圖層的資料來源

1.1 事件

包含四個事件,addfeaturechangefeatureclearremovefeature

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,地圖所處的狀態,包括undefinedloadingreadyerror
  • 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,圖片地圖加載出錯時觸發的事件。

四、總結

source 是 layer 中必須的選項,定義著地圖資料的來源,與資料有關的函式,如addfeature、getfeature等函式都定義在 source 中,而且資料來源支援多種格式。