![Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],Find your way with SAPO Mapas API SAPO Codebits 2009](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Find your way with SAPO Mapas API
Ähnlich wie Find your way with SAPO Mapas API (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Find your way with SAPO Mapas API
- 1. Find your way with API André Matos & João Duarte
- 8. OpenLayers - A brief overview (3) Find your way with SAPO Mapas API SAPO Codebits 2009
- 26. Demo Add controls to your map
- 29. Demo Implementing a custom control
- 33. Demo Using the search service
- 35. SAPO Mapas API – Itineraries (2) Find your way with SAPO Mapas API SAPO Codebits 2009
- 38. Demo Using the itineraries service
- 40. Demo The last demo as a resource
- 41. Q & A
Hinweis der Redaktion
- A maioria das funcionalidades disponiveis em mapas.sapo.pt, estão também disponiveis via SAPO Mapas API.
- Nova versão lançada em julho. Mostar página do Mapas. Itinerarios. Pesquisas. Transportes públicos Controlos TUDO Disponível via SAPO Mapas API!
- OpenLayers como motor de mapa Javascript para construir a camada de abstração e montar a API de mapas do SAPO. Webservices para consumir conteúdos e apresenta-los sobre o mapa.
- Tipo principal Map. Qualquer interação com o mapa passará por este tipo. Se for usado o tipo Map do OpenLayers será necessário inidicar um enpoint para as imagens de mapa. Indicar projecções, sistemas de coordenadas, etc. O tipo SAPO.Maps.Map já implementa toda ess abstração. Controlos: Facilita a colocação de HTML sobre o mapa. Apenas têm de definir o HTML que pretendem colocar e o controlo faz o resto. Não se têm de preocupar com os posicionamentos. Podem indicar a posição do HTML sobre o mapa. Exemplos de controlos existentes: Barra de zoom e navegação. Menu de base layers. Minimap MousePosition OL já disponibiliza uma panoplia de controlos: free hand, permite desenhar shapes sobre o mapa.
- Popup e features. Popup - É aqui que definimos o desenho do popup que usamos nos mapas do SAPO. Se não gostarem do nosso popup é possível defenirem um novo ou usarem um já existente. Para definir um novo basta estender a classe Popup. Ou podem usar um já existente, anchoredBuble, FrameCloud Features - Desenho vectorial. É através de features que desenhamos marcadores, linhas e poligonos. Veremos mais a frente a API do SAPO para isso.
- Nestes links poderão encontrar mais informação sobre o OL. Página principal, onde poderão fazer o download do OpenLayers, actualmente na versão 2.8. Galeria de exemplos. Class reference. Embora seja preferivel olhar para o código. Esta documentação é produzida de forma automática. Diagrama UML que ajuda a perceber por alto a arquitectura do OpenLayers (É muito grande) Mailing lists. Onde podem colocar duvidas ou até colaborar no projecto.
- Este slide apenas serve para mostrar que as funcionalidades existentes no openlayers são mantidas, i. e., se alguem for um utilizador experiente de openlayers e pretender tirar partido de alguma funcionalidade, por exemplo, adicionar uma layer KML, GML etc, pode continuar a faze-lo através da API de mapas do SAPO. A API de mapas do SAPO abstraí do openlayers e ao mesmo tempo adiciona mais funcionalidades.
- É o tipo principal na API de mapas. Tudo passa por este tipo. Para desenhar um mapa na página, e necessário instanciar este tipo. Providencia de forma simples interagir com o mapa. Fazer zoom, centrar o mapa, adicionar controlos, inibir o zoom com a wheel do rato, trocar as base layers.
- Para colocar um mapa na página apenas é preciso instanciar mapa, passando o div para o qual o mapa se vai renderizar. Trocamos o tipo de vista do mapa. Por ultimo o mapa é centrado em lisboa com o nível de zoom 13.
- Como é possivel ver nos mapas do sapo, estão disponiveis as seguintes layers: Map Satellite Hybrid Terrain
- A instancia de mapa contém o seguinte método: getBaseLayers() Este método contém as base layers disponiveis na API de mapas. para alterar a layer base basta evocar o método setBaseLayer com um dos objectos devolvidos pelo método getBaseLayers
- Como na maior parte das frameworks, a API de mapas é event driven. É possivel ser notificado sempre que dada acção ocorre. Para registar um evento deve aceder à propriedade events em mapa.
- Nós consideramos como overlay tudo o que se coloca em cima do mapa num determinado ponto. É como se estivesse agarrado à superficie terrestre. Como overlays temos: marcadores poligonos linhas Estes elementos desenham-se através de features do OpenLayers, numa layer vectorial.
- Para adicionar a overlay ao mapa, deve usar-se o método: addOverlay
- O que é isto de um controlo? há 2 tipos de controlos. o primeiro e mais importante de todos serve para representar HTML sobre o mapa. o 2º serve essencialmente para gerir comportamente sobre o mapa. Todos os controlos devem obedecer à seguinte interface OpenLayers.Control e devem implementar os seguintes métodos: draw(px) destroy
- ContextMenu: quando existe um right click sobre o mapa, apresenta um menu de contexto MapType2: Coloca sobre o mapa uma forma de trocar as baselayers MiniMap2: Coloca sobre o mapa um minimapa que permite fazer um overview sobre o mapa principal MousePosition: Coloca sobre o mapa um controlo que permite ver as coordenadas Navigation: Desenha um controlo que permite navegar, fazer zoom etc. Window: Coloca sobre o mapa uma janela flutuante que permite colocar html no seu interior
- Controlos usados no sapo mapas: Navigation2 MapType2 ContextMenu MousePosition MiniMap
- Nesta demo vamos demonstrar como podem adicionar controlos ao mapa.
- Explicar sintaxe de construção da classe. Construtor Destrutor Quando é chamado cada método. this.div Quando é chamado o draw
- Explicar sintaxe de construção da classe. Construtor Destrutor Quando é chamado cada método. this.div Quando é chamado o draw
- Exemplo de um custom control
- Possibilidade de fazer pesquisas semanticas: Comer em Lisboa Dormir em Lisboa Em que são apresentados sobre o mapa restaurantes ou hoteis, neste caso, com informação detalhada. Podemos ver que é apresentado o telefone, a morada e até uma pequena descrição.
- Exemplo de um custom control
- Disponibiliza uma forma de obter um caminho de um local para outro. Caminhos disponiveis: Mais rápido Mais curto A pé É pintado sobre o mapa o caminho, onde pode fazer zoom para ver com mais detalhe, e é colocada num painel a descrição do caminho. Está tudo disponivel para impressão.
- Coloca descrição detalhada sobre o painel lateral e desenha uma linha sobre o mapa. Esta informação é toda configurável. Se for fornecido apenas o painel os resultados são apresentados apenas sobre o painel. Se for fornecido o mapa apenas são apresentados sobre o mapa. Se forem ambos os resultados são desenhados sobre ambos os elementos
- Para construir um itinerário é necessário fornecer o mapa e um painel. Estes elementos são opcionais. ? Significa que o parâmetro não é obrigatório. Para obter o itinerário, basta evocar o método getItinerary, passando o local de partida, de chegada e o modo.
- Código para obter o itinerário. Cancelar se houver um pedido por um itinerário em curso, limpar o painel. Obter o itinerário.
- Esta demo demonstra a utilização dos itinerários.
- Documentação Galeria de exemplos Documentos de migração
- Como um bundle final com todas as funcionalidades apresentadas fizesmos esta demo, que também ficará como um recurso para ser utilizado pelos vossos projectos no codebits.