OpenLayers 4 ol.source 详解

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

包含四个事件,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
 */
  • 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,地图所处的状态,包括undefinedloadingreadyerror
  • 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)详解
ol.source API

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容