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应用原理的更多相关文章

  1. OpenLayers工作原理

    1.数据组织 OpenLayers通过同层(Layer)进行组织渲染,然后通过数据源设置具体的地图数据来源.因此,Layer与Source是密切相关的对应关系,缺一不可.Layer可看做渲染地图的层容 ...

  2. HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

    在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web  ...

  3. HT for Web整合OpenLayers实现GIS地图应用

    HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的Ope ...

  4. openlayers 加载瓦片详解 一

    在这先说点题外话,本人在研究webgl 三维球过程中惊人发现,openlayers 的开发人员也在研究webgl并经证实他们也正在研发基于 webgl的三维gis开源平台,这可能是首个开源的三维平台, ...

  5. WebGIS前端瓦片地图显示原理及实现

    目前,有很多WebGIS开发包,ArcGIS API for JS.OpenLayers.LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能.我们很方便的使用这些库的时候,也让我们 ...

  6. openlayers调用瓦片地图分析

    网上有诸多资料介绍openlayers如何调用百度地图或者是天地图等常见互联网地图,本文作者使用的是不是常见的互联网瓦片,现将调用过程进行整理与大家分享. 首先,openlayers就不赘述了(官网: ...

  7. openLayers 3知识回顾

    openlayers 知识 前段时间帮助同事重构一个地图类的项目,然后就学习了openLayer3这个框架,但是官网上没有中文版,也没有详细的例子解释,我只能遇到看不懂的就翻译成中文来用,为了方便以后 ...

  8. D3、openlayers的一次尝试

    近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下: 此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用openlayers展示的地图.而其难点却在 ...

  9. openLayers 4 canvas图例绘制,canvas循环添加图片,解决图片闪烁问题

    一.问题来源: 接触Openlayers 一段时间了,最近做了一个农业产业系统,项目中涉及到产业图例,最后考虑用canvas来绘制图例图像.当中带图片的图例移动时,图片会实现闪烁留白情况.闪烁是因为绘 ...

随机推荐

  1. DUMP3.5 企业级电商项目

    购物车模块 加入商品 更新商品数 查询商品数 移除商品 单选/取消 全选/取消  购物车列表 [浮点型商业运算精度丢失问题]ej1st 一书提到 float double只适合科研计算,BigDeci ...

  2. LOJ 3049: 洛谷 P5284: 「十二省联考 2019」字符串问题

    题目传送门:LOJ #3049. 题意简述: 给定一个长度为 \(n\) 的母串 \(S\). 有 \(n_a\) 个 A 类串,都是 \(S\) 的子串,以区间的形式给出. 有 \(n_b\) 个 ...

  3. Linux安装配置git

    1.查看git安装版本 git version 2.查看git安装位置 whereis git 3.yum安装git yum install git 4.生成ssh key cd /root/.ssh ...

  4. matplotlib学习笔记

    1.简介 matplotlib是python的一个2D绘图库,它可以在不同平台上地使用多种通用的绘图格式(hardcopy formats)和交互环境绘制出出版物质量级别的图片.matplotlib可 ...

  5. 利用Centos服务器来搭建自己的splash,不再被安装的各种环境繁琐而担忧

    Centos7.5 ----- docker ------- splash               第一步:服务器环境的配置               第二步:dcoker环境的配置       ...

  6. ScheduledThreadPoolExecutor Usage

    refs: https://blog.csdn.net/wenzhi20102321/article/details/78681379 对比一下Timer和ScheduledThreadPoolExe ...

  7. Eclipse连接HBase 报错:org.apache.hadoop.hbase.PleaseHoldException: Master is initializing

    在eclipse中连接到HBase报错org.apache.hadoop.hbase.PleaseHoldException: Master is initializing,搜索了好久,网上其它人说的 ...

  8. hiveserver2启动成功但无法通过beeline连接

    可能是配置的问题. 我将hive.metastore.uris从配置文件中注释掉之后解决了hiveserver2启动成功但无法通过beeline连接的问题. [root@node03 conf]# v ...

  9. Softmax 回归 vs. k 个二元分类器

    如果你在开发一个音乐分类的应用,需要对k种类型的音乐进行识别,那么是选择使用 softmax 分类器呢,还是使用 logistic 回归算法建立 k 个独立的二元分类器呢? 这一选择取决于你的类别之间 ...

  10. 一起学爬虫——使用Beautiful Soup爬取网页

    要想学好爬虫,必须把基础打扎实,之前发布了两篇文章,分别是使用XPATH和requests爬取网页,今天的文章是学习Beautiful Soup并通过一个例子来实现如何使用Beautiful Soup ...