文章目錄
1. 寫在前面
在 openlayers 6【二】vue 初始化map地圖詳解 中，我們講了初始化一個地圖，必不可少的三要素。target，view，layers。在前面的兩片文章中也講了 view 和 layers 是什麼。source 是 Layer 的重要組成部分。當然，layers圖層裏面也是有一個必不可少的屬性，那就是 source 數據源，如果沒有數據源你就不能渲染處地圖的底圖，也就沒有任何含義 (這裏的必不不是說是必須有，沒有這屬性也能顯示)
2. 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；
2. source 用法實例
可以看到，source 存在很多種，我們也不可能都去講一遍，下面挑幾個大家常用的 來寫
2.1 ol.source.Vector 的使用（矢量圖層的數據來源）
2.1.1 基本事件(重要)
addfeature，當一個要素添加到 source 中觸發；
removefeature，當要素移除時候發生；
changefeature，當要素變化時觸發；
clear，當 source 的 clear 方法調用時候觸發；
2.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。
2.1.3 實例
2.1.3.1 features 方法實現
這裏是一箇中國地圖的geoJson數據。格式也是GeoJSON字符串格式。那麼我們可以用來初始化一個圖層。（這裏只是貼了核心的部分代碼，完整的請看後面博客會寫）
import areaGeo from "@/geoJson/china.json";
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(areaGeo )
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: style
});
map.addLayer(vectorLayer);
2.1.3.2 url + format 方法實現
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../geoJson/china.json',
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.2 ol.source.Image的使用（提供單一的圖片地圖）
2.2.1 基本事件
imageloadstart，圖片地圖開始加載觸發的事件；
imageloadend，圖片地圖加載完畢觸發的事件；
imageloaderror，圖片地圖加載出錯時觸發的事件。
2.2.2 接受的參數
/**
* @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，地圖分辨率。其他的選項都與以上的一樣。
3. 寫在後面
上面只是簡單的講了兩個案例，還要更多的沒有說到，後面會補充一些。根據後面實際業務需求去寫，大家更能理解
source 是 layer 中必須的選項，定義着地圖數據的來源，與數據有關的函數，如addfeature、getfeature等函數都定義在 source 中，而且數據源支持多種格式。