OpenLayers源码简介

源代码总体结构分析

  通过前面的项目介绍,我们大概已经知道 Openlayers是什么,能够做什么,有什么意义。接下来我们分析它怎么样,以及怎样实现的等问题。



  这 个图是从它的文档上截取的,旨在从感官上认识一下OpenLayers的类。下面分别介绍(文档中的类是按字母顺序排列的,也按这个顺序说吧):

  我们看到在类的顶层“高高在上”的是 OpenLayers,它为整个项目实现提供名称空间(JavaScript语言没有名称空间一说,但是它确实有自己的机制实现类似的功能,后面会说 明),它直接拥有一常量  VERSION_NUMBER,以标识版本。

    Ajax 顾名思义,用于实现Ajax功能,只是OpenLayers的开发者们把它 单独写到一个类里了,其中用到了Prototype.js框架里的一些东西。同时,设计的时候也考虑了跨浏览器的问题。

   BaseTypes 这里定制了OpenLayers中用到的 string,number   function。比 如,OpenLayers. String. startsWith,用于测试一个字符串是否一以另一个字符串开 头;OpenLayers. Number. limitSigDigs,用于限制整数的有效数 位;OpenLayers. Function.bind,用于把某一函数绑定于对象等等。

   Console OpenLayers.Console,此名称空间用于调试和把错误等输出到“控制台”上,需要结合使 用../Firebug/firebug.js。

   Control 我 们通常所说的控件类,它提供各种各样的控件,比如上节中说的图层开关 LayerSwitcher,编 辑工具条EditingToolbar等等。加载控件的例子

复制代码
  1. class = new OpenLayers.Map('map', { controls: [] });
  2. map.addControl(new OpenLayers.Control.PanZoomBar());
  3. map.addControl(new OpenLayers.Control.MouseToolbar());


   Events 用于实现OpenLayers的事件机制。具体来说, OpenLayers中的事件分为两种,一种是浏览器事件,例如mouseup,mousedown之类的;另外一种是自定义的,如addLayer之 类的。 OpenLayers中的事件机制是非常值得我们学习的,后面将具体讨论。

   Feature 我们知道:Feature是 geography 和attributes的 集合。在OpenLayers中,特别地OpenLayers.Feature 类由一个marker 和一个lonla组成。



OpenLayers. Feature.WFS与OpenLayers. Feature. Vector继承于它。

   Format: 此类用于读/写各种格式的数据,它的子类都分别创建了各个格式的解析器。这些格式有: XML GML、GeoJSON GeoRSS、JSON、KML 、WFS、WKT( Well-Known Text )

    Geometry 怎么翻译呢,几何?是对地理对象的描述。它的子类有 Collection、Curve、LinearRing、LineString、MultiLineString、MultiPoint、 MultiPolygon、Point、Polygon、Rectangle、Surface,正是这些类的实例,构成了我们看到的地图。需要说明的是, Surface 类暂时还没有实现。

   Handler: 这 个类用于处理序列事件,可被激活和取消。同时,它也有命名类似于浏览器事件的方法。当一个 handler 被激活,处理事件的方法就会被注册到浏览器监听器listener ,以响应相应的事件;当一个handler被取消,这些方法在事件监听器中也会 相应的被取消注册。Handler通过控件control被创建,而control通过icon表现。

   Icon 在计算机屏幕上以图标的形式呈现,有url、尺寸size和位置position3个属性。一般情况,它与  OpenLayers.Marker结合应用,表现为一个 Marker

   Layer: 图层。

   Map 网业中动态地图。它就像容器,可向里面添加图层Layer和控件Control。实际上,单个Map是毫无意义的,正是Layer 和Control成就了它。

   Marker 它的实例是 OpenLayers.LonLat 和OpenLayers.Icon的集合。通俗一点儿说, Icon附上一定的经纬度就是Marker。

它们的组合关系是:



   Popup 地图上一个小巧的层,实现地图“开关”功能。使用例 子:

复 制代码
  1. Class = new OpenLayers.Popup("chicken", new OpenLayers.LonLat(5,40), new OpenLayers.Size(200,200),  "example popup", true);
  2. map.addPopup(popup);


   Renderer 渲染类。 在 OpenLayers中,渲染功能是作为矢量图层的一个属性存在的,我们称之为渲染器,矢量图层就是通过这个渲染器提供的方法将矢量数据显示出来。以 SVG 和VML为例,继承关系是这样的:      

 

至于 OpenLayers. Renderer. Elements为什么要存在,以及它的渲染 机制,后面会说。



   Tile 设计这个类用于指明单个“瓦片”Tile,或者更小的分辨率。Tiles存储它们自身的信息,比如url和size等。它的类继承 关系如下:

     

   Util:“ 跑龙套”的类。

  写到这里,可以看到OpenLayers 的类缠绕的挺麻烦的,接下来的文章将从代码部分分 析更细部的东西。

转载自:http://www.3snews.net/html/24/10624-17441.html  

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以通过以下步骤下载OpenLayers: 1. 访问OpenLayers官方网站:http://openlayers.org/ \[1\]。 2. 在左上角找到最新版本的链接,并点击进入。 3. 在页面下方找到"get the code",点击进入。 4. 在打开的链接中,找到需要下载的版本,可以选择下载包含必要的js和css样式的-dist.zip版本,或者包含API、源码和实例的版本。 5. 也可以直接访问此链接下载各种版本的OpenLayers:https://github.com/openlayers/openlayers/releases/ \[1\]。 另外,您还可以通过以下方式获取OpenLayers 6.15.1版本的开发库资源包: 1. 访问OpenLayers官方网站:http://openlayers.org/ \[2\]。 2. 在页面中找到下载链接,选择v6.15.1版本的开发库资源包:https://github.com/openlayers/openlayers/releases/tag/v6.15.1 \[2\]。 在HTML页面中引用OpenLayers 6开发库的方法非常简单,只需要在页面中添加以下代码即可: ```html <link href="./static/css/ol.css" rel="stylesheet" type="text/css" /> <script src="./static/libs/ol5/ol.js" type="text/javascript"></script> ``` 如果您是使用NodeJS进行开发,可以通过以下方式引用OpenLayers 6开发库: ```javascript const ol = require('openlayers'); ``` 希望以上信息对您有所帮助! #### 引用[.reference_title] - *1* [Openlayers各种下载方法](https://blog.csdn.net/hyj_pc/article/details/80927734)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [OpenLayers 6基于Windows的开发环境配置](https://blog.csdn.net/liu2004051957/article/details/127894511)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值