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

OpenLayers 4 ol.source 详解相关推荐

  1. php mysql source_Mysql数据库导入命令Source详解

    Mysql数据库导入命令Source详解 几个常用用例: 1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldump -u root -p data ...

  2. openlayers6【五】地图图层数据来源 source 详解

    文章目录 1. 写在前面 2. source 数据源都有哪些类型 2. source 用法实例 2.1 ol.source.Vector 的使用(矢量图层的数据来源) 2.2 ol.source.Im ...

  3. mysql 导入 source_Mysql数据库导入命令Source详解

    几个常用用例: 1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 mysqldump -u root -p dataname >dataname.sq ...

  4. OpenLayers 之 地图图层数据来源(ol.source)详解,ps图层混合模式详解

    source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址.除了在构造函数中制定外,可以使用 layer.setSource(source) 稍后指定. 一.包含的类型 上面介绍的都 ...

  5. OpenLayers 3 之 地图样式(ol.style)详解

    地图样式是由 style 类控制的,其包含了地图样式的方方面面,例如,填充色.图标样式.图片样式.规则图形样式.边界样式.文字样式等,样式一般针对矢量要素图层. 矢量图层样式可以事先写好,写成静态的, ...

  6. OpenLayers 6 代码绘制/draw交互组件绘制两种方式绘制椭圆过程详解

    引言 OpenLayers可以通过代码绘制多种几何形状,也可以通过draw类型的交互组件绘制几何形状,官方实例提供了类如圆.折线.矩形.星形等方法.除此之外,椭圆这种图形其实也是非常常见的几何图形,但 ...

  7. 视频教程-Openlayers实例详解-其他

    Openlayers实例详解 国防科技大学计算机专业硕士研究生,IT公司技术支持部门负责人 胡灏 ¥598.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课 ...

  8. OpenLayers官方示例详解七之图层的最小、最大分辨率(Layer Min/Max Resolution)

    目录 一.示例简介 二.代码详解 一.示例简介 这个示例加载了一个MapBox的瓦片图层和一个Open Street Map的瓦片图层,同时使用最小.最大分辨率限制图层加载的比例级别. 使用鼠标放大两 ...

  9. OpenLayers官方示例详解六之线串箭头样式(LineString Arrows)

    目录 一.示例简介 二.代码详解 三.总结 一.示例简介 为每一个线串(LineString)的子线段绘制箭头. 二.代码详解 <!DOCTYPE html> <html lang= ...

最新文章

  1. 除了分析引擎 2.0,神策再发一波儿新功能!
  2. 规格选择_止水螺杆规格及选择
  3. LeetCode之Single Number
  4. ItemCF,基于物品的协同过滤算法
  5. 苦练IoT应用开发,还能加速变现,这个机会别错过
  6. Vue路由设置嵌套(一级二级三级展示并且显示定向选中)
  7. nacos 服务日志_如何屏蔽Nacos日志输出?
  8. 大漠插件保护盾_易辅客栈第8套 大漠插件命令详解及使用方法
  9. 网站被黑检测与网站被黑处理方法
  10. psql计算环比和同比
  11. 如何自学计算机- 计划版 cs
  12. 如何在功能、特点、价格和性能方面选择PDF编辑器?
  13. java excel 饼图_Java 在 Excel 中创建饼图/环形图
  14. SQL Server获取当年第一天当年最后一天当月第一天当月最后一天
  15. 《L-谷氨酰胺和L-精氨酸发酵生产》全书阅读笔记
  16. hive报错 spark_Spark是否能替代Hive
  17. MVG读书笔记——单应矩阵估计这件小事(一)
  18. 《华为机试》刷题之HJ58 输入n个整数,输出其中最小的k个
  19. 知了猴的营养成分和作用
  20. 论文脚注上方横线不是顶格的怎么办?

热门文章

  1. 尚硅谷大数据开发Day04
  2. MAYA2018常用命令
  3. svn: E155037: Previous operation has not finished; run 'cleanup' if it was i
  4. Echarts可视化 之custom自定义系列
  5. Vue3.0源码解读 - 响应式系统
  6. 右键添加显示隐藏文件夹功能
  7. DataWhale 组队学习爬虫 Task2
  8. JavaSSM笔记(二)SpringMvc基础
  9. 新闻联播变脸报道“嫦娥发射”才更酷
  10. 编程题目:使用C++语言模拟完成一个简单的计算机系统