# 地图图层数据来源
前言👅
source 是 Layer 的重要组成部分。当然，layers图层里面也是有一个必不可少的属性，那就是 source 数据源，如果没有数据源你就不能渲染处地图的底图
# 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 |
# source用法实例
常用的
# ol.source.Vector的使用(矢量图层的数据来源)
# 基本事件
source.Vuctor🚓 (opens new window)
| 事件名 | 描述 |
|---|---|
| addfeature | 当一个要素添加到 source 中触发 |
| removefeature | 当要素移除时候发生 |
| changefeature | 当要素变化时触发 |
| clear | 当 source 的 clear 方法调用时候触发 |
# 选项参数
| 参数名 | 参数说明 |
|---|---|
| attribution | 地图右下角的 logo 包含的内容 |
| feature | 地理要素，从字符串读取的数据 |
| url | 要素数据的地址 |
| format | url属性设置后，加载要素使用的数据格式，采用异步的 AJAX 加载 |
| loader | 加载要素使用的加载函数 |
| strategy | 加载要素使用的策略，默认是 一次性加载所有要素 |
| wrapX | 是否在地图水平坐标轴上重复，默认是 true |
# 代码示例
- features 方法实现
中国地图的geoJson数据。格式也是GeoJSON字符串格式。初始化地图
import areaGeo from "@/geoJson/china.json";
import {Vector} from 'ol/layer'
import {Vector as SeourceVector } from 'ol/source'
import {GeoJSON} from 'ol/format'
var vectorSource = new SeourceVector({
features: (new GeoJSON()).readFeatures(areaGeo )
});
const style = {}
var vectorLayer = new Vector({
source: vectorSource,
style: style
});
map.value.addLayer(vectorLayer);
- url + format 方法实现
import {GeoJSON} from 'ol/format'
import {Vector} from 'ol.layer'
var vectorLayer = new Vector({
source: new ol.source.Vector({
url: '../geoJson/china.json',
format: new GeoJSON()
})
});
map.value.addLayer(vectorLayer);
小结
这两种方法中都会指定数据来源格式， 矢量数据源支持的格式包含很多：gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities（兼容 wms 的格式）、 wms getfeatureinfo、 wmts capabilities、xlink、xsd等格式。这些格式都有readFeatures、readFeature和readGeometry方法用于读取数据。
# ol.source.Image的使用（提供单一的图片地图）
# 基本事件
| 事件名 | 描述 |
|---|---|
| imageloadstart | 图片地图开始加载触发的事件 |
| imageloadend | 图片地图加载完毕触发的事件 |
| imageloaderror | 图片地图加载出错时触发的事件 |
# 参数
/**
* @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)}}
*/
# 总结
source 是 layer 中必须的选项，定义着地图数据的来源，与数据有关的函数，如addfeature、getfeature等函数都定义在 source 中，而且数据源支持多种格式。