OpenLayers 之 地图图层数据来源(ol.source)详解,ps图层混合模式详解
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 事件
包含四个事件,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 中必须的选项,定义着地图数据的来源,与数据有关的函数,如addfeature、getfeature等函数都定义在 source 中,而且数据源支持多种格式。
OpenLayers 之 地图图层数据来源(ol.source)详解,ps图层混合模式详解相关推荐
- openlayers3—地图图层数据来源(ol.source)
ol.source.BingMaps,必应地图的数据: ol.source.Cluster,聚族矢量数据: ol.source.ImageCanvas,数据来源是一个canvas元素,其中数据是图片: ...
- openlayers6【五】地图图层数据来源 source 详解
文章目录 1. 写在前面 2. source 数据源都有哪些类型 2. source 用法实例 2.1 ol.source.Vector 的使用(矢量图层的数据来源) 2.2 ol.source.Im ...
- 三维电子沙盘卫星图片矢量地图高程数据来源
三维电子沙盘卫星图片矢量地图高程数据来源现在不管什么GIS平台首先要解决的就是数据来源问题,因为没有数据的GIS就是一个空壳,下面我就目前一些主流的数据获取 方式了解做如下之我见(主要针对互联网上的一 ...
- OpenLayers 4 ol.source 详解
source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址. 除了在构造函数中指定外,还可以使用 layer.setSource(source) 稍后指定. 一.包含的类型 ol.s ...
- vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
vue3.0 + typescript openlayers实现地图标点.移动.画线.显示范围.测量长度.测量面积.画三角形.画正方形.画圆.线选.画笔.清除测量.清除地图所有等功能 由于最近项目中用 ...
- openlayers之地图测距侧面
项目背景vue-cli3.0 public下html需要引入文件 <link rel="stylesheet" href="<%= BASE_URL %> ...
- Xamarin.Forms中为WebView指定数据来源Source
Xamarin.Forms中为WebView指定数据来源Source 网页视图WebView用来显示HTML和网页形式内容.使用这种方式,可以借助网页形式进行界面设计,并利于更新和维护.WebView ...
- Python:利用python编程将上海十六区,2020年5月份房价实时地图(数据来源房天下)进行柱状图、热图可视化
Python:利用python编程将上海十六区,2020年5月份房价实时地图(数据来源房天下)进行柱状图.热图可视化 目录 上海十六区,2020年5月份房价实时地图(数据来源房天下)可视化 雷达图.柱 ...
- QGIS数据可视化学习笔记01——一般的图层样式调整和在地图上添加图表
说明:QGIS数据可视化章节用的数据为QGIS绘制一张地图学习章节的数据,传送门:https://blog.csdn.net/qq_47188967/article/details/1301962 ...
最新文章
- Bitcoin Unlimited发布BCH新版本,石墨烯技术迎来进展
- RHEL7.2上基于eSpeak实现TTS
- Fabonacci三种方法求解C++
- Linux权限中的大写s,Linux文件权限、用户、组、文本实操二
- 数据可视化的开源方案: Superset vs Redash vs Metabase (一)
- 360加固分析(一)
- 一季度跨越式增长,高灯科技跑出“第二曲线”
- 大学有哪些专业python_python就业方向有哪些?
- QuickSort 优化后的快速排序算法
- R语言堆叠占比柱状图_R语言执行单因素方差分析及多重比较
- 大一html网页制作期末网页设计——环境保护-小黄车(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 环保生态 绿色环境
- OpenStack柏林峰会主会场侧记:OpenStack立柱、拱券与灵魂
- STM8S103硬件I2C的操作注意事项
- 基于OpenCV的银行卡号识别系统实现(三)-----输入图像的处理+代码实现
- 学习c语言有什么作用,c语言有什么用 小白如何学习c语言
- Python 代理验证程序(For 无忧代理) 多线程版
- springboot项目启动遇到问题:AopAutoConfiguration matched: - @ConditionalOnProperty (spring.aop.auto=true)
- PDF文件如何设置密码保护?
- css样式z-index最大值和z-index最小值
- Linux platform
热门文章
- 毕业设计:基于java的小区物业信息管理系统的设计与实现(1)
- 仿哔哩哔哩视频app小程序模板源码
- 【Niagara Vykon N4】物联网学习 02 照明控制
- 《Fundamentals Of Computer Graphics》虎书第三版翻译——第五章 线性代数
- mysql 5.7.21 winx64_mysql5.7.21 winx64安装配置图文分享
- 被人民日报点名的马保国,一年能挣多少钱?
- MATLAB中常用到的符号汇总(持续更新)
- Comet OJ - 2019国庆欢乐赛(赛后整理)
- 桌面计算机 回收站图标,桌面回收站图标不见了怎么解决【图文】
- mysql容器保存为镜像实战操作(拷贝方法)