OpenLayers 4 ol.source 详解
source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址。
除了在构造函数中指定外,还可以使用 layer.setSource(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
,fireol.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
;
二、用法说明
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)详解
ol.source API
OpenLayers 4 ol.source 详解相关推荐
- php mysql source_Mysql数据库导入命令Source详解
Mysql数据库导入命令Source详解 几个常用用例: 1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldump -u root -p data ...
- openlayers6【五】地图图层数据来源 source 详解
文章目录 1. 写在前面 2. source 数据源都有哪些类型 2. source 用法实例 2.1 ol.source.Vector 的使用(矢量图层的数据来源) 2.2 ol.source.Im ...
- mysql 导入 source_Mysql数据库导入命令Source详解
几个常用用例: 1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 mysqldump -u root -p dataname >dataname.sq ...
- OpenLayers 之 地图图层数据来源(ol.source)详解,ps图层混合模式详解
source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址.除了在构造函数中制定外,可以使用 layer.setSource(source) 稍后指定. 一.包含的类型 上面介绍的都 ...
- OpenLayers 3 之 地图样式(ol.style)详解
地图样式是由 style 类控制的,其包含了地图样式的方方面面,例如,填充色.图标样式.图片样式.规则图形样式.边界样式.文字样式等,样式一般针对矢量要素图层. 矢量图层样式可以事先写好,写成静态的, ...
- OpenLayers 6 代码绘制/draw交互组件绘制两种方式绘制椭圆过程详解
引言 OpenLayers可以通过代码绘制多种几何形状,也可以通过draw类型的交互组件绘制几何形状,官方实例提供了类如圆.折线.矩形.星形等方法.除此之外,椭圆这种图形其实也是非常常见的几何图形,但 ...
- 视频教程-Openlayers实例详解-其他
Openlayers实例详解 国防科技大学计算机专业硕士研究生,IT公司技术支持部门负责人 胡灏 ¥598.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课 ...
- OpenLayers官方示例详解七之图层的最小、最大分辨率(Layer Min/Max Resolution)
目录 一.示例简介 二.代码详解 一.示例简介 这个示例加载了一个MapBox的瓦片图层和一个Open Street Map的瓦片图层,同时使用最小.最大分辨率限制图层加载的比例级别. 使用鼠标放大两 ...
- OpenLayers官方示例详解六之线串箭头样式(LineString Arrows)
目录 一.示例简介 二.代码详解 三.总结 一.示例简介 为每一个线串(LineString)的子线段绘制箭头. 二.代码详解 <!DOCTYPE html> <html lang= ...
最新文章
- 除了分析引擎 2.0,神策再发一波儿新功能!
- 规格选择_止水螺杆规格及选择
- LeetCode之Single Number
- ItemCF,基于物品的协同过滤算法
- 苦练IoT应用开发,还能加速变现,这个机会别错过
- Vue路由设置嵌套(一级二级三级展示并且显示定向选中)
- nacos 服务日志_如何屏蔽Nacos日志输出?
- 大漠插件保护盾_易辅客栈第8套 大漠插件命令详解及使用方法
- 网站被黑检测与网站被黑处理方法
- psql计算环比和同比
- 如何自学计算机- 计划版 cs
- 如何在功能、特点、价格和性能方面选择PDF编辑器?
- java excel 饼图_Java 在 Excel 中创建饼图/环形图
- SQL Server获取当年第一天当年最后一天当月第一天当月最后一天
- 《L-谷氨酰胺和L-精氨酸发酵生产》全书阅读笔记
- hive报错 spark_Spark是否能替代Hive
- MVG读书笔记——单应矩阵估计这件小事(一)
- 《华为机试》刷题之HJ58 输入n个整数,输出其中最小的k个
- 知了猴的营养成分和作用
- 论文脚注上方横线不是顶格的怎么办?
热门文章
- 尚硅谷大数据开发Day04
- MAYA2018常用命令
- svn: E155037: Previous operation has not finished; run 'cleanup' if it was i
- Echarts可视化 之custom自定义系列
- Vue3.0源码解读 - 响应式系统
- 右键添加显示隐藏文件夹功能
- DataWhale 组队学习爬虫 Task2
- JavaSSM笔记(二)SpringMvc基础
- 新闻联播变脸报道“嫦娥发射”才更酷
- 编程题目:使用C++语言模拟完成一个简单的计算机系统