OpenLayers 之 地图图层数据来源（ol.source）详解，ps图层混合模式详解

source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址。除了在构造函数中制定外，可以使用 layer.setSource(source) 稍后指定。

一、包含的类型

上面介绍的都是可以实例化的类，还有一部分基类，不能被实例化，只负责被继承，有：

• 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 中，而且数据源支持多种格式。

转载自：https://blog.csdn.net/lu18225857116/article/details/51721423