Openlayers project analysis-(10) Controls

Controls in openlayers are loadedMapIs also part of the map. At the same time, the control needs to take effect on the map, so each control also holds a reference to the map (map object.

As mentioned above, controls are associated with events. Specifically, the implementation of controls depends on Event binding. Each openlayers. Control and its subclass instance will hold a handler reference.

How can I create and add a control? Use the following statement:

// Instantiate a control

VaR control1 = new openlayers. Control ({Div: mydiv });

// Add controls to the map

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

Map. addcontrol (control1 );

For some commonly used openlayers controls, the project itself is encapsulated and added with the following statement:

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 ());

First, let's take a look at the implementation process of the openlayers. Control Base class, and then select several typical child classes for analysis.

　Openlayers. Control:

// Set the map attribute of the control, that is, the Map referenced by the Control

Setmap: function (MAP ){

This. Map = map;

If (this. Handler ){

This. handler. setmap (MAP );

}

}

// The drew method is called when the control is ready to be displayed on the map. Of course, this method only applies to controls with graphic objects.

// Function.

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;

}

As mentioned above, the instances of openlayers. Control and its sub-classes all hold a reference of handler, because the mouse events are different when each control works, which requires dynamic binding and contact binding. Openlayers. control is implemented through the active and deactive methods, that is, dynamic activation and logout.

// Activation Method

Activate: function (){

If (this. Active ){

Return false;

}

If (this. Handler ){

This. handler. Activate ();

}

This. Active = true;

Return true;

}

// Logout Method

Deactivate: function (){

If (this. Active ){

If (this. Handler ){

This. handler. Deactivate ();

}

This. Active = false;

Return true;

}

Return false;

}

　　

Let's take a look at the subclass of openlayers. Control, that is, various "special" controls. Choose openlayers. Control. overviewmap and openlayers. Control. editingtoolbar.

By the way, some controls in openlayers require icons, such as editingtoolbar, and some do not, such as openlayers. Control. dragpan.

 

　Openlayers. Control. overviewmap:

Eagleeye is actually a map.NavigationIn the external form, it is a bit like the layer switch control.

Statement for adding the eagleeye control:

Map. addcontrol (New openlayers. Control. overviewmap ());

In its member functions, the draw function is the core and inherits the base class openlayers. Control. This control is displayed in the map.

This control is associated with some browser events, such

Rectmousedown: function (EVT ){

If (! Openlayers. event. isleftclick (EVT) return;

This. rectdragstart = EVT. XY. Clone ();

This. Optional medrectdrag = false;

Openlayers. event. Stop (EVT );

}.

 

　　Openlayers. Control. editingtoolbar:

Openlayers supports vector editing from Version 2.3, that is, Several icons in the upper right corner of the graph. Edit points, lines, and surfaces.

Similarly, it is activated using the drew method:

Draw: function (){

VaR DIV = openlayers. Control. Panel. Prototype. Draw. Apply (this, arguments );

This. activatecontrol (this. controls [0]);

Return div;

}

　　

The following code uses this control:

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 );