OpenLayers项目分析——（九）控件

布满荆棘的人生 2022-08-08 11:52 351阅读 0赞

OpenLayers中的控件，是通过加载到**地图**上而起作用的，也算地图表现的一部分。同时，控件需要对地图发生作用，所以每个控件也持有对地图（map对象）的引用。

前面说过，控件是于事件相关联的。具体的说就是控件的实现是依赖于事件绑定的，每个OpenLayers.Control及其子类的实例都会持有一个handler的引用的。

那么，怎么来创建并添加一个控件呢？用下面的语句：

//实例化一个控件

var control1 = new OpenLayers.Control(\{div: myDiv\});

//向地图中添加控件

var map = new OpenLayers.Map('map', \{ controls: \[\] \});

map.addControl(control1 );

对一些常用的OpenLayers控件，项目本身都封装好了，用下面的语句添加：

map.addControl(new OpenLayers.Control.PanZoomBar());

map.addControl(new OpenLayers.Control.MouseToolbar());

map.addControl(new OpenLayers.Control.LayerSwitcher(\{'ascending':false\}));

map.addControl(new OpenLayers.Control.Permalink());

map.addControl(new OpenLayers.Control.Permalink('permalink'));

map.addControl(new OpenLayers.Control.MousePosition());

map.addControl(new OpenLayers.Control.OverviewMap());

map.addControl(new OpenLayers.Control.KeyboardDefaults());

先看看OpenLayers. Control基类的实现过程，再选择几个典型的子类分析一下。

**　OpenLayers. Control：**

//设置控件的map属性，即控件所引用的地图

setMap: function(map) \{

this.map = map;

if (this.handler) \{

this.handler.setMap(map);

//drew方法，当控件准备显示在地图上是被调用。当然，这个方法只对有图标的控件起

//作用。

draw: function (px) \{

if (this.div == null) \{

this.div = OpenLayers.Util.createDiv();

this.div.id = this.id;

this.div.className = this.displayClass;

if (px != null) \{

this.position = px.clone();

this.moveTo(this.position);

return this.div;

前面说过，OpenLayers.Control及其子类的实例都是会持有一个handler的引用的，因为每个控件起作用时，鼠标事件都是不一样的，这需要动态的绑定和接触绑定。在OpenLayers.Control中是通过active和deactive两个方法实现，就是动态的激活和注销。

//激活方法

activate: function () \{

if (this.active) \{

return false;

if (this.handler) \{

this.handler.activate();

this.active = true;

return true;

//注销方法

deactivate: function () \{

if (this.active) \{

if (this.handler) \{

this.handler.deactivate();

this.active = false;

return true;

return false;

再来看OpenLayers.Control的子类，即各类“特色”控件。选鹰眼控件OpenLayers. Control. OverviewMap和矢量编辑工具条控件OpenLayers. Control. EditingToolbar来说。

顺便说一句，OpenLayers中的控件有些是需要图标的，像EditingToolbar，有些是不需要的，像OpenLayers. Control. DragPan。

**　OpenLayers. Control. OverviewMap：**

“鹰眼”实际上也是地图**导航**的一种形式，在外部形态上跟图层开关控件有点儿像。

添加鹰眼控件的语句：

map.addControl(new OpenLayers.Control.OverviewMap());

在它实现的成员函数中，draw函数是核心，继承基类OpenLayers.Control，在地图中显示这个控件。

此控件关联了一些浏览器事件，比如

rectMouseDown: function (evt) \{

if(!OpenLayers.Event.isLeftClick(evt)) return;

this.rectDragStart = evt.xy.clone();

this.performedRectDrag = false;

OpenLayers.Event.stop(evt);

\}。

**OpenLayers. Control. EditingToolbar：**

OpenLayers从2.3版就对矢量编辑进行了支持，就是图上右上角几个图标。完成点、线、面的编辑功能。

同样，它也是用drew方法激活：

draw: function() \{

Var　div　= OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);

this.activateControl(this.controls\[0\]);

return div;

下面的代码是使用此控件的具体过程：

Var  map, layer;

map = new OpenLayers.Map( 'map', \{ controls: \[\] \} );

layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",

"http://labs.metacarta.com/wms/vmap0", \{layers: 'basic'\} );

map.addLayer(layer);

vlayer = new OpenLayers.Layer.Vector( "Editable" );

map.addLayer(vlayer);

map.addControl(new OpenLayers.Control.PanZoomBar());

map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));

map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

OpenLayers项目分析——（九）控件

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关《Flutter 控件大全》第九十九：Transform

相关 OpenLayers鼠标位置控件

相关 OpenLayers项目分析——（九）控件

相关 OpenLayers项目分析（七）地图表现

相关 OpenLayers项目分析（六）数据渲染分析

相关 OpenLayers 项目分析（三）-OpenLayers中定制JavaScript内置类

相关 OpenLayers 项目分析（三）BaseTypes

相关 OpenLayers项目分析——（一）项目介绍

相关实时段分析控件

相关 openlayer加载各种小控件