openlayers [五] 地图图层数据来源source 详解

1 序言

初始化一个地图，必不可少的三要素。target，view，layers。source Layer 是 的重要组成部分。如果没有数据源你就不能渲染处地图的底图，也就没有任何含义

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；

3 列举 source 的用法

3.1 ol.source.Vector 的使用（矢量图层的数据来源）

3.1.1 基本事件

addfeature，当一个要素添加到 source 中触发；
removefeature，当要素移除时候发生；
changefeature，当要素变化时触发；
clear，当 source 的 clear 方法调用时候触发；

3.1.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。

features 方法实现

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);

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方法用于读取数据。