openlayers应用原理
1、数据组织
OpenLayers通过同层(Layer)进行组织渲染,然后通过数据源设置具体的地图数据来源。因此,Layer与Source是密切相关的对应关系,缺一不可。Layer可看做渲染地图的层容器,具体的数据需要通过Source设置。
地图数据根据数据源(Source)可分为Image、Tile、Vector三大类型的数据源类,对应设置到地图图层(Layer)的Image、Tile、Vector三大类别的图层中。
2、数据解析
ol.format.Feature类用于读/写各种格式的数据,封装了多种格式的子类即各类数据解析器,包括XML、Text、JSON类型的各种格式数据解析器
3、数据渲染
先通过URL获取数据,然后用各种格式的解析器解析数据,再用所谓的渲染器在图层中进行渲染,最后结合相应的控件表现出来。渲染功能由渲染器(renderer相关类)实现,通过Map的renderer属性设置渲染类型,然后根据渲染类型(Canvas、DOM、WebGL)与同层类型(Image/Tile/Vector)匹配相应的渲染器将图层数据渲染显示出来。
4、地图表现
Map类是一个地图容器,用target属性与DIV关联。
5、事件机制
地图事件类(ol.MapEvent),包含moveend、postrender等
地图浏览器事件类(ol.MapBrowserEvent),包含singleclick、click、dbclick、pointermove、pointerdrag事件
对象事件类(ol.ObjectEvent),包含change、propertychange事件
选择控件事件类(ol.SelectEvent),包含select事件
绘制控件事件类(ol.interaction.DrawEvent),包含drawstart、drawend事件
修改控件事件类(ol.ModifyEvent),包含modifystart、modifyend事件
集合事件类(ol.CollectionEvent),包含add、remove事件
openlayers应用原理的更多相关文章
- OpenLayers工作原理
1.数据组织 OpenLayers通过同层(Layer)进行组织渲染,然后通过数据源设置具体的地图数据来源.因此,Layer与Source是密切相关的对应关系,缺一不可.Layer可看做渲染地图的层容 ...
- HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web ...
- HT for Web整合OpenLayers实现GIS地图应用
HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的Ope ...
- openlayers 加载瓦片详解 一
在这先说点题外话,本人在研究webgl 三维球过程中惊人发现,openlayers 的开发人员也在研究webgl并经证实他们也正在研发基于 webgl的三维gis开源平台,这可能是首个开源的三维平台, ...
- WebGIS前端瓦片地图显示原理及实现
目前,有很多WebGIS开发包,ArcGIS API for JS.OpenLayers.LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能.我们很方便的使用这些库的时候,也让我们 ...
- openlayers调用瓦片地图分析
网上有诸多资料介绍openlayers如何调用百度地图或者是天地图等常见互联网地图,本文作者使用的是不是常见的互联网瓦片,现将调用过程进行整理与大家分享. 首先,openlayers就不赘述了(官网: ...
- openLayers 3知识回顾
openlayers 知识 前段时间帮助同事重构一个地图类的项目,然后就学习了openLayer3这个框架,但是官网上没有中文版,也没有详细的例子解释,我只能遇到看不懂的就翻译成中文来用,为了方便以后 ...
- D3、openlayers的一次尝试
近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下: 此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用openlayers展示的地图.而其难点却在 ...
- openLayers 4 canvas图例绘制,canvas循环添加图片,解决图片闪烁问题
一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...
随机推荐
- 412 6个题 BOM and DOM 定义计数器 网页跳转 网页前进后退
AM BOM-JavaScript: 提供一系列对象哟用于和浏览器窗口交互,对象主要有 window.document.location.navigator.screen 统称浏览器对象模型(Brow ...
- MVC RedirectToAction 跳转时传参问题
RedirectToAction方法提供了5个重载方法 1.单纯跳转,不带参数. string redirectUrl = "/List" ; return RedirectToA ...
- tnsping 不通
好久没装oracle 了,竟然被一个简单问题一下子蒙住了,防火墙没关,或者说没有放开oracle端口,这都能忘,还是记录一下吧.
- 【原创】运维基础之yum离线环境安装软件
首先查看系统版本号,然后根据版本号从 CentOS-7-x86_64-DVD-1708.iso 和 CentOS-7-x86_64-Everything-1708.iso 根据需要选择一个下载,我这里 ...
- Flask开发微电影网站(九)
1.后台管理之电影管理 1.1 电影管理之所有电影收藏列表 1.1.1 电影管理之电影收藏列表视图函数 在admin目录下的views.py文件中定义电影收藏列表视图函数 电影收藏列表视图函数需要被登 ...
- Java_数据类型
变量就是申请内存来存储值. java的两大数据类型:内置数据类型和引用数据类型 数据类型 6种数据类型(4种整数型,2种浮点型),一种字符类型,一种布尔类型 数据类型 位数 描述 byte 8位 -1 ...
- form表单获取多选的值
flask 中 form 表单直接获取多选框的值时 language = request.values.getlist('values')或 language=request.from.getlist ...
- 浮点数运算的精度问题:以js语言为例
在 JavaScript 中整数和浮点数都属于 Number 数据类型,所有数字都是以 64 位浮点数形式储存,即便整数也是如此. 所以我们在打印 1.00 这样的浮点数的结果是 1 而非 1.00 ...
- 连接mysql报zone时区错误
报错信息: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zon ...
- 解码escape类型的unicode
content = Regex.Unescape(content);