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

一、包含的类型

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

  • 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 中必须的选项,定义着地图数据的来源,与数据有关的函数,如addfeature、getfeature等函数都定义在 source 中,而且数据源支持多种格式。

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

  1. openlayers3—地图图层数据来源(ol.source)

    ol.source.BingMaps,必应地图的数据: ol.source.Cluster,聚族矢量数据: ol.source.ImageCanvas,数据来源是一个canvas元素,其中数据是图片: ...

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

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

  3. 三维电子沙盘卫星图片矢量地图高程数据来源

    三维电子沙盘卫星图片矢量地图高程数据来源现在不管什么GIS平台首先要解决的就是数据来源问题,因为没有数据的GIS就是一个空壳,下面我就目前一些主流的数据获取 方式了解做如下之我见(主要针对互联网上的一 ...

  4. OpenLayers 4 ol.source 详解

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

  5. vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能

    vue3.0 + typescript openlayers实现地图标点.移动.画线.显示范围.测量长度.测量面积.画三角形.画正方形.画圆.线选.画笔.清除测量.清除地图所有等功能 由于最近项目中用 ...

  6. openlayers之地图测距侧面

    项目背景vue-cli3.0 public下html需要引入文件 <link rel="stylesheet" href="<%= BASE_URL %> ...

  7. Xamarin.Forms中为WebView指定数据来源Source

    Xamarin.Forms中为WebView指定数据来源Source 网页视图WebView用来显示HTML和网页形式内容.使用这种方式,可以借助网页形式进行界面设计,并利于更新和维护.WebView ...

  8. Python:利用python编程将上海十六区,2020年5月份房价实时地图(数据来源房天下)进行柱状图、热图可视化

    Python:利用python编程将上海十六区,2020年5月份房价实时地图(数据来源房天下)进行柱状图.热图可视化 目录 上海十六区,2020年5月份房价实时地图(数据来源房天下)可视化 雷达图.柱 ...

  9. QGIS数据可视化学习笔记01——一般的图层样式调整和在地图上添加图表

      说明:QGIS数据可视化章节用的数据为QGIS绘制一张地图学习章节的数据,传送门:https://blog.csdn.net/qq_47188967/article/details/1301962 ...

最新文章

  1. Bitcoin Unlimited发布BCH新版本,石墨烯技术迎来进展
  2. RHEL7.2上基于eSpeak实现TTS
  3. Fabonacci三种方法求解C++
  4. Linux权限中的大写s,Linux文件权限、用户、组、文本实操二
  5. 数据可视化的开源方案: Superset vs Redash vs Metabase (一)
  6. 360加固分析(一)
  7. 一季度跨越式增长,高灯科技跑出“第二曲线”
  8. 大学有哪些专业python_python就业方向有哪些?
  9. QuickSort 优化后的快速排序算法
  10. R语言堆叠占比柱状图_R语言执行单因素方差分析及多重比较
  11. 大一html网页制作期末网页设计——环境保护-小黄车(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 环保生态 绿色环境
  12. OpenStack柏林峰会主会场侧记:OpenStack立柱、拱券与灵魂
  13. STM8S103硬件I2C的操作注意事项
  14. 基于OpenCV的银行卡号识别系统实现(三)-----输入图像的处理+代码实现
  15. 学习c语言有什么作用,c语言有什么用 小白如何学习c语言
  16. Python 代理验证程序(For 无忧代理) 多线程版
  17. springboot项目启动遇到问题:AopAutoConfiguration matched: - @ConditionalOnProperty (spring.aop.auto=true)
  18. PDF文件如何设置密码保护?
  19. css样式z-index最大值和z-index最小值
  20. Linux platform

热门文章

  1. 毕业设计:基于java的小区物业信息管理系统的设计与实现(1)
  2. 仿哔哩哔哩视频app小程序模板源码
  3. 【Niagara Vykon N4】物联网学习 02 照明控制
  4. 《Fundamentals Of Computer Graphics》虎书第三版翻译——第五章 线性代数
  5. mysql 5.7.21 winx64_mysql5.7.21 winx64安装配置图文分享
  6. 被人民日报点名的马保国,一年能挣多少钱?
  7. MATLAB中常用到的符号汇总(持续更新)
  8. Comet OJ - 2019国庆欢乐赛(赛后整理)
  9. 桌面计算机 回收站图标,桌面回收站图标不见了怎么解决【图文】
  10. mysql容器保存为镜像实战操作(拷贝方法)