开源

OpenLayers 4 ol.source 详解

2018-05-03  本文已影响18人  changhr2013

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

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

二、用法说明

1. ol.source.Vector

矢量图层的数据源

1.1 事件

包含四个事件,addfeaturechangefeatureclearremovefeature

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
 */

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 特有的选项:

接受的事件

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)}}
 */

触发的事件

四、总结

source 是 layer 中必须(required)的选项,定义了地图数据的来源,与数据有关的函数,如addfeature、getfeature等函数都定义在 source 中,而且数据源支持多种格式。

OpenLayers 3 之 地图图层数据来源(ol.source)详解

上一篇 下一篇

猜你喜欢

热点阅读