OpenLayers 3 之 地圖圖層資料來源(ol.source)詳解
source 是 Layer 的重要組成部分,表示圖層的來源,也就是服務地址。除了在建構函式中制定外,可以使用 layer.setSource(source)
稍後指定。
一、包含的型別
- 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
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
;
二、用法說明
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,圖片地圖加載出錯時觸發的事件。
四、總結
source 是 layer 中必須的選項,定義著地圖資料的來源,與資料有關的函式,如addfeature、getfeature等函式都定義在 source 中,而且資料來源支援多種格式。