SAPO Mapas API

MAPAS API

Classe OpenLayers.Control

Esta é a classe base dos controlos. Um controlo é um componente que é adicionado ao mapa para lhe adicionar comportamento. Um controlo também permite apresentar HTML sobre o mapa. Um exemplo de um controlo são os botões que permitem mudar o tipo de mapa. Estão sobre o mapa e as acções sobre eles modificam o estado do mapa.

Controlos já disponíveis na API:
SAPO.Maps.Control.MiniMap, SAPO.Maps.Control.MapTypeControl, SAPO.Maps.Control.NavigationControl.
Para criar um novo controlo é necessário estender a classe OpenLayers.Control. Uma vez criado o controlo, este pode ser adicionado ao mapa através do método addControl de SAPO.Maps.Map.
A seguir são listados os métodos a redefinir no controlo e as propriedades que podem ser acedidas. Nota: Sempre que redefinir um método no seu custom control, deve sempre invocar a implementação da classe base (OpenLayers.Control).

Métodos

Método	Retorno	Descrição
`setMap(map:SAPO.Maps.Map)`	`void`	Este método é chamado durante o `addControl` do mapa. Na classe base, cria uma propriedade `map` no controlo que referencia o mapa ao qual o controlo foi adicionado.
`draw(px?:OpenLayers.Pixel)`	`DOM Element`	É chamado durante o `addControl` do mapa. Este é o método a redefinir para criar o HTML do controlo. Deve no entanto chamar inicialmente o método `draw` da classe base, para que esta crie a propriedade `div`. Esta propriedade contém o elemento DOM ao qual deve ser adicionado o HTML do controlo. O método deve retornar a propriedade `div`. Recebe uma instância de `OpenLayers.Pixel` que (caso exista) indica a localização no mapa em que o controlo deve aparecer (deverão ser afectadas as propriedades `left` e `top` da propriedade `div`).
`activate()`	`void`	Este método activa o controlo. Normalmente só é redefinido quando o controlo possui handlers que necessitam de ser também eles activados.
`deactivate()`	`void`	Este método desactiva o controlo. Normalmente é redefinido quando o controlo possui handlers que necessitam de ser desactivados.
`destroy()`	`void`	Deverá libertar todos os recursos adquiridos (como por exemplo handlers de eventos). É chamado quando a instância de mapa é destruída.

Propriedades

Propriedade	Tipo	Descrição
`map`	`SAPO.Maps.Map`	Esta propriedade é afectada no método `setMap` da classe base `OpenLayers.Control`. É a referência para o mapa ao qual o controlo está adicionado.
`div`	`DOM Element`	Afectada no método `draw` da classe base `OpenLayers.Control`. Contém uma referência para o elemento DOM onde deve ser adicionado o HTML do controlo.

Exemplo

O seguinte exemplo mostra como criar um novo controlo que apresenta HTML sobre o mapa e como adicionar o controlo ao mapa.

Passo 1
Criar uma nova classe que estenda OpenLayers.Control e redefinir os métodos necessários.
Nota: A menos que explicitamente desejado, é boa prática no início de cada método a redefinir, chamar o método da classe base OpenLayers.Control.

function CustomControl(){ 

							        this.map = null;

							        this.div = null;

							  }

							  CustomControl.prototype = new OpenLayers.Control();

							  CustomControl.prototype.CLASS_NAME = 'Custom_Control';

							                    

							  /**

							   * Method: draw

							   *

							   * Parameters:

							   * {OpenLayers.Pixel} px - The place where the control should be positioned

							  */

							  CustomControl.prototype.draw = function(px){ 

							        OpenLayers.Control.prototype.draw.apply(this, arguments);

							                          

							        //Create some basic HTML (just a black rectangle)

							        var myDiv = document.createElement("div");

							        myDiv.style.width = "200px";

							        myDiv.style.height = "200px";

							        myDiv.style.backgroundColor = "black";

							                          

							        //Append the HTML to the this.div property

							        this.div.appendChild(myDiv);

							                          

							        //Check if a desired position has been set

							        if(px){

							              this.div.style.top = px.y;

							              this.div.style.left = px.x;

							        }

							        else{

							              //Assume a default position

							              this.div.style.top = "0px";

							              this.div.style.left = "0px";

							        }

							                          

							        //MUST return this.div

							        return this.div;                  

							  }

Passo 2
Criar uma página que contenha um mapa e o controlo criado. O código necessário para adicionar o controlo ao mapa é o seguinte:


				<script type="text/javascript">

			        function init(){

			              var map = new SAPO.Maps.Map("map");

			              var ccontrol = new CustomControl();

			              map.addControl(ccontrol, new OpenLayers.Pixel(100, 100));

			        }

			  </script>

MAPAS API

Classe OpenLayers.Control

CLASS REFERENCE

QUICKLINKS

Métodos

Propriedades

Exemplo