Universidad de Concepcin

Campus los ngeles

Ingeniera Geomtica










PRACTICA DE OPENLAYER




















Alumnos: Edgardo Astete M.
Asignatura: Software de Aplicacin.
Docentes: Gustavo Godoy Uribe
Carrera: Ingeniera Geomtica

Los ngeles, viernes 20 de junio de 2014.

Crear mi_primer_mapa.html

Dentro de la carpeta creada con nuestro nombre debemos crear un nuevo
archivo llamado mi_primer_mapa.html, este archivo lo abriremos con
nuestro editor de texto (notepad ++) y escribiremos lo siguiente:










En este cdigo se puede
observar la estructura general
del archivo HTML en el cual se
indica el ttulo de la pgina, el
nombre del mapa, ruta de
donde se extrae el mapa, se
hacen los llamados a los
archivos de estilo del mapa.
Crear el Javascript script_mapa.js

El archivo contendr la funcionalidad de nuestro mapa. Copiar lo siguiente en el
archivo:




Crear el CSS estilo_mapa.css

El estilo_mapa.css lo usaremos para aplicar los diferentes estilos a nuestra
aplicacin. En el archivo CSS escribiremos lo siguiente.


Cdigo JAVA
En esta imagen se muestra la
estructura mnima del cdigo Java,
el cual contiene la funcionalidad
del mapa, ac se llevan a cabo las
siguientes instrucciones:
Definicin de variable
mapa.
Se cargan las capas que
son obtenidas de los
servidores.
Control de la leyenda del
mapa.
Mapa de ubicacin
Control de zoom
Posicin de cursor
En este cdigo se definen los
siguientes parmetros:
Estilo del ttulo
Color de fondo de la
pgina
Tamao del mapa.

Desarrollo prctica
ARCHIVO HTML
















Ttulo de la
plataforma
Permite cargar imgenes en la HTML, se define
las caractersticas como tamao, posicin ,
insertarle ttulo etc.
En los Script se indican los servidores de los
que sern extradas las capas, adems se
hace el llamado al archivo JAVASCRIPT.
Se hace el llamado
al archivo .CSS el
que define los
estilos
En el body se indica que se debe cargar la
funcin y mediante los div se relaciona el
layerswitcher que hace que la leyenda se
muestre fuera del mapa.
CODIGO JAVASCRIPT



Definicin de variables
Se crea el objeto map en el div
Se crean las nuevas capas que se utilizaran, las
capas creadas son: Google, Osm, Gmap, Bmap,
Layout, Overmap, Satellite y Terrain.
Se agregan las capas creadas
Se agregan los controles al mapa, los controles
agregados son: Posicin del mouse, mapa de
ubicacin, escala grfica, escala, gratcula y
panzoom.
Se indica las coordenadas del lugar de inters , la
proyeccin que tendr el mapa y el zoom que este
alcanzara
CODIGO .CSS













Se define el color del fondo de la pgina
Se define estilo del titulo
Se define el tamao del mapa