OpenLayers 4 ol.source 详解

「爱情、让人受尽委屈。」 2022-10-05 12:59 279阅读 0赞

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 事件

包含四个事件，`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 中必须（required）的选项，定义了地图数据的来源，与数据有关的函数，如addfeature、getfeature等函数都定义在 source 中，而且数据源支持多种格式。

> [OpenLayers 3 之 地图图层数据来源（ol.source）详解][OpenLayers 3 _ _ol.source]  
> [ol.source API][]

[OpenLayers 3 _ _ol.source]: https://blog.csdn.net/qingyafan/article/details/45950125
[ol.source API]: https://openlayers.org/en/latest/apidoc/ol.source.html