Instalacion de Servicio de Mapas en Web Win XP 2015

INSTALACION DE SERVICIO DE MAPAS WEB.
1.- Instalar Java Development Kit desde el archivo jdk-6u13-javafx-1_1_1-windows-i586.exe:
La instalacin pregunta si se va a instalar Java

SDK, a lo que se contesta que s:
Despus de la instalacin se puede ver en archivos de programa la carpeta Java y en ella jdk1.6.0_13:
2.- Instalar Apache Tomcat 6.0.24 con el siguiente ejecutable :
Se sigue la instalacin especificando que no se instalen los Examples y aceptando la configuracin del
puerto de 8080. No se cambian los datos por default para usuario y password.
Cuando pregunta si se va a ejecutar el programa se deja marcado que si:
Instalacin de Servicio de Mapas Web - 1/46
Notar que la instalacin detecta automticamente la versin de Java JRE que ya esta instalada y avisa
en donde la encontr. Despus de la instalacin es necesario reiniciar la PC.
3.- Instalar Geoserver 1.7.6:
En la siguiente pantalla es necesario escoger a mano la carpeta en donde est instalado el JDK:
Se entra a Apache Tomcat, se inicia Apache Tomcat entrando a Inicio->Programas->Apache-Tomcat

6.0 -> Configure Tomcat:
En la pantalla que aparece se da clic en Start:
Se da clic en Aceptar.
Si el sistema avisa diciendo que ya existe una instancia de Tomcat funcionando se entra al
administrador de tareas con ctrl.-Alt-Suprimir y se localizan los procesos Tomcat6.exe y
Tomcat6w.exe y se cierran. Se vuelve a intentar abrir el proceso Configure Tomcat.
Configuracin de Tomcat.
Se consulta antes que nada la carpeta C:\Archivos de Programa\Apache Software Foundation\Tomcat

6.0\Webapps y se comprueba que no existe una carpeta llamada Geoserver.
Geoserver por default lee los datos de la carpeta C:\Archivos de programa\GeoServer 1.7.6\Data. Se
debe cambiar esto y se hace cargando un archivo WAR que define entre otras cosas donde van a
estar los archivos por leer, aparte de instalar la pgina web del administrador de Geoserver. Para
inscribir el nuevo archivo war es necesario entrar a la administracin de Tomcat escribiendo en la
direccin del browser de internet la direccin: http://localhost:8080 con lo cual aparece la siguiente
pantalla:
Y se entra dando clic en la liga Tomcat Manager.

La primera vez que se entre va a pedir usuario y password. Si se instalo con todo por default el usuario
es admin. Y no hay password.
Si no acepta el usuario admin., se debe editar el archivo C:\Archivos de Programa\Apache Software
Foundation\Tomcat 6.0\conf\tomcat-user.xml y hacerle cambios para que exista el usuario admin.. Se
le quitan las posibles etiquetas de comentarios que tenga, se crea el rol de manager y se agrega el rol
de manager, y el usuario admin con rol de manageren este caso con el password tomcat:
<tomcat-users>
<role rolename="tomcat"/>
<role rolename="role1"/>
<role rolename="manager"/>
<user username="Admin" password="tomcat" roles="manager"/>
<user username="tomcat" password="tomcat" roles="tomcat"/>
<user username="both" password="tomcat" roles="tomcat,role1"/>
<user username="role1" password="tomcat" roles="role1"/>
</tomcat-users>
Para que tome en cuenta los cambios hechos a este archivo, hay que entrar a Configure Tomcat , dar
clic en Stop y luego en Start para reiniciar el sistema.
En esta ventana se baja hasta donde se ve el titulo Archivo WAR a desplegar:
Se da clic en examinar y se localiza el archivo geoserver.war que existe en el medio de instalacin. Se

da clik en desplegar.
Si se carga correctamente el archivo se vuelve a desplegar la pagina del administrador desde el inicio.
Despus de esto verificar si existe la carpeta C:\Archivos de Programa\Apache Software
Foundation\Tomcat 6.0\webapps\geoserver:
Se debe copiar el archivo epsg.properties del medio de instalacin a la carpeta C:\Archivos de

Programa\Apache Software Foundation\Tomcat 6.0\webapps\geoserver\data\user_projections,
reemplazando al archivo existente anteriormente.
Este archivo contiene informacin de proyeccin para los mapas que se van a usar posteriormente.
Se debe reiniciar el servicio de Tomcat entrando a la configuracin de Tomcat, dando clic en Stop y
despus en Start:
Despus de esto el sistema Tomcat asume que los archivos shp por publicar van a estar en la carpeta
C:\Archivos de Programa\Apache Software
Foundation\Tomcat6.0\webapps\geoserver\data\data\shapefiles.
Despus de esto falta poner a funcionar GeoServer desde Todos los Programas -> Geoserver 1.7.6 ->
Start GeoServer:
Cargar capas en GeoServer.

Hecho esto se puede entrar a GeoServer a dar de alta una nueva capa.
Se deben copiar los archivos que forman la capa que queremos cargar a la carpeta: C:\Archivos de
programa\Apache Software Foundation\Tomcat 6.0\webapps\geoserver\data\data\shapefiles
Copiar los archivos de la capa municipiosPueblaWGS84 a esta carpeta.
Despus de esto se entra a la administracin de GeoServer (asegurarse de haber iniciado el servicio
de GeoServer con Start Geoserver). Se da click en la entrada GeoServer Web AdminPage dentro del
grupo de programas de GeoServer:
Aparecer la siguiente pantalla:
Al preguntar el usuario y password se le da Admin y geoserver.

Luego se da click en Configuracin -> Datos -> Almacenes -> Nuevo
En la ventana que aparece se le da un nuevo nombre al almacn de datos que tenga que
ver con las capas que se van a cargar ah, se le da el nombre Puebla, y se escoge
Shapefile de la lista:
Se da click en Nuevo. Aparece despus la siguiente ventana:
En esta ventana, en la caja de edicin url, el letrero ya existente (file:data/) representa

toda la ruta para llegar a la segunda carpeta data, C:\Archivos de programa\Apache
Software Foundation\Tomcat 6.0\webapps\geoserver\data\data , entonces ya solo se le
agrega el nombre de la carpeta shapefiles y el nombre de la capa que acabamos de
copiar. Se da click en Enviar al terminar. Si se comete una equivocacin al poner el
nombre de la capa se va a ver un mensaje de archivo no encontrado en la parte izquierda
de la pantalla. El nombre de la capa no puede contener espacios.
Aparece la ventana de Editor de entidades al terminar, se debe escoger primero la palabra
polygon de la lista Estilo, y en la columna SRS se debe dar la clave 4326 que significa
que las coordenadas estn en latitud y longitud.
Se da click en el botn Generar. Con esto debemos de ver que se generan
automticamente las coordenadas de el cuadro que abarca el mapa cargado:
Se da click en el botn Enviar al final de la pantalla y en la parte superior izquierda dar

click en Aplicar y Guardar. Si todo estuvo bien se ve el mensaje Datos cargados sin
incidentes.
Para consultar la capa recin publicada se da click en Bienvenido -> Demostracin ->
Vista preliminar de Mapas. En la lista debe aparecer la capa recin creada:
Al dar click en la capa se ver el mapa:
Se pueden usar los controles para acercar/alejar y mover el mapa para ver los detalles y
consultar cualquier parte del mapa.
-> Mantenimiento de capas de GeoServer.
Instalacin de PostgreSQL.
Para realizar la instalacin de PostGreSQL se comienza por ejecutar el siguiente programa:
postgresql-9.0.1-1-windows.exe
Se aceptan los valores por default de la instalacin. En la parte en la que pregunta por el password de
administrador se puede poner un password especfico. En nuestro caso vamos a poner la palabra
crectealc:
En la siguiente pantalla escoger Spanish/Mexico de la lista:
Cuando el programa de instalacin pregunta si se lanza Stack Builder al finalizar, se quita la marca
para que no lo inicie:
NOTAS: La instalacin de PostgreSQL crea automticamente un usuario nuevo llamado postgres. Si

por alguna razn se interrumpe la instalacin de postgreSQL y se reintenta instalar, el usuario puede
ser que ya exista y se tiene que eliminar. Para eliminarlo y poder reinstalar postgreSQL en limpio se
debe salir a una sesin de dos y escribir el siguiente comando:
C:\net user postgres /delete
Despus de esto se corre la instalacin de postGis dando doble click al archivo postgis-pg90-setup1.5.2-3.exe
La instalacin detecta automticamente la versin de postgreSQL que se acaba de instalar y pregunta
despus el password del usuario postgres, a lo cual se le debe de dar el mismo password que se dio
en la instalacin anterior.
Continuar dando de alta las siguientes variables de entorno para que funcione PostgreSQL al 100 por
ciento:
Entrar al Panel de Control con Inicio-> Panel de control.
En el panel dar clic en Sistema. En la ventana que sale dar clic en la pestaa Opciones Avanzadas y
en esa ventana dar clic en Variables de Entorno:
En la ventana de Variables, dar clic en el botn Nueva, en la ventana que aparece se debe dar como
nombre a la nueva variable JAVA_HOME y el valor: C:\Archivos de programa\Java\jdk1.6.0_13
Para poner lo anterior no es necesario escribir todo el letrero, solo navegar con el Explorador hasta
encontrar la carpeta correspondiente para el JDK instalado dentro de archivos de programa y copiar la
cadena resultante de la barra de direcciones a la ventana de valor de la variable. Se da clic en aceptar.
Despus de esto se busca la variable path en la lista de variables del sistema ya existentes y se da clic
en modificar:
En la ventana que aparece, se recorre el valor hasta el final, se agrega un ; al final y despus se copia
la cadena: C:\Archivos de programa\PostgreSQL\9.0\bin copindola desde el Explorador como en el
ejemplo anterior.
Despus de esto se reinicia el sistema.

Para comenzar a usar PostgreSQL, primero entrar al programa PgAdmin III desde el men inicio:
Aparecer la pantalla principal de el administrador de Bases de Datos de PostGreSQL:
Se deber dar doble clic en PostgreSQL, cuando pida un password se le dar el que se asign
durante la instalacin anterior, cectealc. Se da clic en el signo + que est a la izquierda de la entrada
DataBases:
Se pueden observar las bases de datos creadas por la instalacin. A continuacin se va a crear una
nueva base de datos, dando clic derecho sobre la el rengln DataBases y dando clic en New
database, con lo que aparecer la siguiente ventana, en la que se le dar el nombre MAPASCLASE a
la nueva base de datos:
Se dejan los valores por default que tienen los renglones, pero se escoge la entrada template_postgis
en la lista de el rengln Template. En la lista Owner se escoge el usuario postgres. Se da clic en el
botn OK.
Despus de esto al expandir la entrada de la nueva base de datos se podr ver que estn creadas dos
tablas para la nueva base que son geometry_columns y spatial_ref_sys:
Para cargar un archivo shape a la base de datos recin creada, se usa un agregado del sistema que
se encuentra en el men Plugins -> PostGIS shape and DBF loader:
Con lo anterior aparece la siguiente ventana, en la que se especifica la capa que se va a cargar, se da
clic en el icono de la carpeta para navegar y encontrar la capa MunicipiosPuebla en la carpeta
temporal de la clase, se le da un nombre ms corto en el campo Destination Table, y asegurarse de
que el nombre est en minsculas y no contenga espacios (muy importante, ya que sin estos
requisitos no se podr trabajar ms adelante con el mapa dentro de GeoTools):
Tambin es importante dar clic en el botn Options y en la ventana que aparece, cambiar el juego de
caracteres que aparece (UTF-8) por LATIN1, esto es para que si la tabla de atributos del archivo shape
que se est cargando contiene letras con acentos y el caracter , estos sean cargados correctamente
dentro de la base de datos geogrfica.
Despus de esto, se da clic en OK y en la ventana anterior se da clic en Import. Al terminar el proceso

se deber ver un mensaje en la ventana inferior que dice Shapefile import completed, si hubo algn
error revisar qu parmetros se escribieron mal.
Despus de este paso, se puede consultar dentro de pgAdmin III que la nueva tabla se haya creado,
despus de dar clic en el cono de Actualizar (
municipios:
), se puede ver cmo ya quedo creada la tabla
Tambin hay un comando para cargar las tablas shape desde una sesin de dos, para lo cual se dara
clic en Inicio -> Todos los programas -> Accesorios -> Smbolo de sistema
Cuando se est en la ventana de Smbolo de sistema.

En la pantalla que aparece se va a usar los comandos de postgres llamados shp2pgsql y psql que
tiene los siguientes formatos:
Shp2pgsql [nombr_arch_shape].shp [nombr_de_la_tabla_a_crear] [base_datos] > [nombre_temp].sql
Psql d [base_datos] f [nombre_temp] U postgres
Para cargar los archivos shape de Municipios y colonias se debern escribir los siguientes comandos:
>shp2pgsql MunicipiosPuebla.shp Municipios MAPASCLASE > muns.sql
>psql d MAPASCLASE f muns.sql U postgres
Para cargar la capa de Colonias se dan los siguientes comandos:
>shp2pgsql colonias_puebla.shp Colonias MAPASCLASE > cols.sql
>psql d MAPASCLASE f cols.sql U postgres
Ahora se deber entrar al administrador de GeoServer para dar de alta los nuevos mapas en el
servidor geogrfico. Al entrar a GeoServer Web Admin Page, lo primero que se debe hacer es crear un
nuevo almacn de datos, dando clic en Configuracin, dando el usuario y password si los pide, y
entrando a Datos, despus en Almacenes y luego dar clic en el botn Nuevo, en la lista de Descripcin
del Almacn de Datos, a diferencia del ejemplo anterior, ahora se escoge PostGis de la lista:
Se le da como nombre MAPASPG. Se da clic en el botn Nuevo para continuar. La pantalla que
aparece deber de tener los siguientes parmetros:
Los nicos cambios que se deben de hacer son que se escribe el nombre de la base de datos
MAPASCLASE en el cuadro database, se pone el usuario postgres y se da el password de ese usuario
si lo tiene (recordar que se le dio al password postgres a ese usuario). Se da clic en Enviar, y despus
en Aplicar y Guardar.
Despus de esto se entra a Configuracin -> Entidades -> Nuevo y de la lista ya se pueden escoger
las dos tablas creadas anteriormente:
Se escoge MAPASPG:::municipios y se da clic en el botn Nuevo. Se siguen los pasos ya conocidos

para configurar una nueva entidad.
Despus de esto ya se puede consultar el mapa por la Vista Previa de Mapas del men Demostracin:
Consulta de Mapas por OpenLayers.

Cuando ya existen mapas publicados en GeoServer, es posible invocarlos por medio de una direccin
URL (http://[direccin IP de nuestra PC]. Para saber cual es nuestra direccin IP, que es como el
nombre nico de nuestra PC en la red, se puede consultar dando doble clic en el icono Conexin de
rea Local:
y en la ventana que aparece dar clic en la pestaa Soporte, dando el
comando ipconfig en una sesin de Smbolo del Sistema:
Para hacer una consulta usando OpenLayers, que es un sistema de consulta que se instala al mismo
tiempo que GeoServer, se debe crear una pgina html de otro lenguaje para generar pginas Web, y
se deber poner en la carpeta de publicacin de GeoSever. Entrar a el explorador de Windows y
consultar el contenido de la carpeta: D:\Archivos de programa\Apache Software Foundation\Tomcat
6.0\webapps\geoserver\data\www
Instalacin de Dreamweaver de Macromedia.

Ejecutar el programa Instalador de Dreamweaver MX 2004.exe que est en la carpeta Dreamweaver:
Se aceptan todas las opciones que le instalacin sugiere. Despus de esto se corre el programa
dando como clave para registrarlo la clave que se encuentra en el archivo Numero de Serie.txt que se
encuentra en la misma carpeta.
Para comenzar a saber cmo usar OpenLayers, primero se va a hacer una consulta sencilla.
Para hacer una primera pgina ejemplo, abrir el programa Dreamweaver:
Se debe de dar click en Crear nuevo -> html con lo cual aparece la ventana de diseo de pginas web.
Se pueden escoger las distintas herramientas que se ven en el rengln de iconos en la parte superior.
Si se quiere agregar un letrero, simplemente se escribe sobre la parte blanca de la pantalla, se da click
en la parte blanca y se escribe el siguiente letero: Bienvenido, esta es la pgina de y escriba su
nombre, notar que en la parte de abajo la ventana cambia para mostrar las herramientas para cambiar
la apariencia del letrero que se acaba de escribir, se puede usar para cambiar el tipo de letra, el
tamao y el color. Personalice el letrero y la apariencia de la pgina como desee:
Hecho esto se guarda el archivo en la carpeta C:\Archivos de programa\Apache Software

Foundation\Tomcat 6.0\webapps\geoserver\data\www y dndole el nombre bienvenido:
Despus de esto se puede consultar el archivo recin creado abriendo un explorador de internet y
colocando la direccin http://localhost:8080/geoserver/www/bienvenido.htm:
Se pueden hacer pruebas consultando la pgina de otros alumnos poniendo su direccin IP especfica,
de forma que la direccion este en lugar de localhost en la ventana de direcciones del explorador de
Internet.
Ahora se puede dar click en la ventana Cdigo de Dreamweaver para ver el cdigo html de la pgina
que acabamos de crear, y que se va a ver de la siguiente forma:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!-.Estilo1 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #CC3300;
}
body {
background-color: #99FFFF;
}
-->
</style>
</head>
<body>
<p class="Estilo1">Bienvenido, esta es la página de Susana. </p>
<p> </p>
</body>
</html>
Ahora le vamos a insertar el siguiente cdigo a nuestra pgina:
<html>
<head>
<title>Mapa Basico</title>
#map_container {
width: 512px;
height: 256px;
border: 1px solid gray;
}
</style>
<script src="openlayers/OpenLayers.js">
</script>
</head>
<body>
<h2>Mapa Basico</h2>
<div id="map_container"></div>
<script>
// codigo para el mapa
</script>
</body>
</html>
El cdigo anterior es para generar una pgina Web sencilla y est escrito en HTML. Se guarda con el
nombre ol-basico.html en la carpeta www. Para consultar el archivo anterior se deber abrir una
ventana de un explorador de Internet y poner la siguiente direccin en la barra de direcciones:
http://localhost:8080/geoserver/www/ol-basico.html o tambin:
http://[direccion_ip_del_servidor]:8080/geoserver/www/ol-basico.html
Como por ejemplo:

http://192.168.51.244:8080/geoserver/www/ol-basico.html
Con lo cual se ve la siguiente pantalla:
Ahora se deber hacer el siguiente cambio al mismo archivo, copiando cdigo reemplazando la lnea //
codigo para el mapa con lo siguiente:
var map = new OpenLayers.Map("map_container");
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: "basic"}
);
map.addLayer(wms);
map.zoomToMaxExtent();
El archivo debe verse de la forma siguiente:
<html>
<head>
<title>Mapa Basico</title>
#map_container {
width: 512px;
height: 256px;
}
</style>
</script>
</head>
<body>
<h2>Mapa Basico</h2>
<script>
var map = new OpenLayers.Map("map_container");
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: "basic"}
);
map.addLayer(wms);
</script>
</body>
</html>
se guarda con el mismo nombre el archivo y se consulta en la ventana de explorador anterior solo
dando clic en F5, y se ver lo siguiente:
Despus de lo anterior, se crea en Geoserver la capa Colonias desde el archivo

colonias_pueblaUTM.shp y despus se crea una nueva pgina en Dreamweaver y copiar el siguiente
texto a la pgina, cuando se est desplegando en modo Codificador:
<html>
<head>
<title>Titulo - Mapa Basico</title>
#map_container {
width: 512px;
height: 256px;
}
</style>
<script src='http://maps.google.com/maps?
file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q
1BQUd_beF8dtzKET_EteAjPdGDwqpQ'>
</script>
</script>
</head>
<body>
<h2>Mapa Municipios transparente</h2>
<script>
// create a map
//var map = new OpenLayers.Map("map_container");
var map = new OpenLayers.Map("map_container", {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-15830414, 2328577,
-5811660, 7337954)
});
mun1 = new OpenLayers.Layer.WMS(
"municipios",
"http://192.168.51.244:8080/geoserver/wms",
{layers: "topp:municipios",
transparent: "TRUE",
format: "image/png"
},
{
opacity:"0.8",
isBaseLayer: false
});
var gSL = new OpenLayers.Layer.Google(

"Google Streets",
{type: G_PHYSICAL_MAP, sphericalMercator: true}

);
map.addLayers([gSL, mun1]);
// add a layer switcher
map.addControl(new OpenLayers.Control.LayerSwitcher());
</script>
</body>
</html>
Se guarda con el nombre ol-basicoMunicipios.htm en la carpeta www.
El mapa desplegado debe verse de la siguiente manera:
Al mapa anterior se le puede agregar ahora la capa de colonias, primero se crea la capa con las
siguientes lneas:
cols = new OpenLayers.Layer.WMS(
Colonias",
"http://192.168.51.244:8080/geoserver/wms",
{layers: "topp:colonias",
format: "image/png"
},
opacity:"0.8",
isBaseLayer: false
});
Y con la siguiente lnea se agrega a los mapas que se despliegan:

map.addLayers([gSL, mun1, cols]);
El resultado debe verse de la siguiente manera:
Notar que la capa de colonias ya se halla en el lugar correcto dentro del mapa de el Estado de Puebla.
Para que no sea necesario acercar el mapa del mundo hasta el lugar donde est Puebla, se puede
manejar la funcin que designa el centro del mapa que se debe desplegar y el parmetro zoom, que
tiene un valor desde 0: no zoom hasta 16 (mximo acercamiento):
Para poner a funcionar lo anterior, se declaran las siguientes variables al principio del Script:
var lon = -97.802347;
var lat = 19.062973;
var zoom = 5;
y despus se usan para aplicar el centro y el zoom:

map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
(La linea anterior debe de reemplazar a la lnea de ZoomToMaxEntext que habia antes).
Notar que en el mapa, ahora se puede escoger entre ms capas por desplegar, cuando se da clic en el
botn +, se ve lo siguiente:
Modificacin de la apariencia de las Capas de GeoServer.

Primero entrar a la carpeta C:\Archivos de programa\Apache Software Foundation\Tomcat
6.0\webapps\geoserver\data\styles y copiar el archivo default_polygon.sld a una carpeta temporal que
se puede llamar tempEstilos, se crea con el explorador de archivos en C. La carpeta de donde se
copi el archivo contiene un archivo por cada estilo creado dentro de el administrador de GeoServer.
La extensin SLD significa Styled Layer Descriptor, y est en formato XML. Como el mantenimiento de
los estilos dentro de GeoServer es muy ineficiente, es mejor modificar por fuera una copia de un
archivo de estilo y cargar el archivo desde GeoServer,lo cual se hace de la siguiente manera. Se abre
el archivo recin copiado con WordPad, dndole clic derecho al archivo y ponindole Abrir con como
se ve en la siguiente pantalla:
Cuando se ve el contenido de el archivo en WordPad se ve lo siguiente:

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0" xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance"
xsi:schemaLocation="http://www.opengis.net/sld
http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
<NamedLayer>
<Name>Default Polygon</Name>
<UserStyle>
<Title>Default polygon style</Title>
<Abstract>A sample style that just draws out a solid gray interior with a black 1px
outline</Abstract>
<FeatureTypeStyle>
<Rule>
<Title>Polygon</Title>
<PolygonSymbolizer>
<Fill>
<CssParameter name="fill">#AAAAAA</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#000000</CssParameter>
<CssParameter name="stroke-width">1</CssParameter>
</Stroke>
</PolygonSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
Al archivo anterior se le pueden hacer cambios como los siguientes:

1.- Al elemento <Name> se le da un nombre ms explicativo, como vamos a crear un estilo para la
capa de Municipios, se le puede dar un nombre como Estilo Municipios, entonces se cambia el letrero
existente (Default Polygon) a Estilo Municipios.
<Name>Estilo Municipios</Name>
2.- Al elemento ttulo se le da el siguiente letrero:

<Title>Estilo para la capa Municipios</Title>
3.- El elemento Fill se cambia al siguiente valor:

<CssParameter name="fill">#DCBEDC</CssParameter>
4.- El elemento Stroke se cambia a lo siguiente:

<Stroke>
5.- Despues de la etiqueta </PolygonSymbolizer> se pone el siguiente texto:

<TextSymbolizer>
<Label>
<ogc:PropertyName>municipio</ogc:PropertyName>
</Label>
<Font>
<CssParameter name="font-family">Arial</CssParameter>
<CssParameter name="font-style">Normal</CssParameter>
<CssParameter name="font-size">10</CssParameter>
</Font>
<Fill>
<CssParameter name="fill">#000000</CssParameter>
<CssParameter name="fill-opacity">1</CssParameter>
</Fill>
</TextSymbolizer>
</Rule> (Ya exista)
Se guarda el archivo con el nombre Municipios_Style.sld (Archivo -> Guardar como..). Despus de
esto se pone a funcionar Apache y Geoserver si es que an no se tienen funcionando.
Se entra a la pgina de mantenimiento de Geoserver. En la primera pantalla se da clic en
Configuracin. Si es la primera vez que se entra, el sistema pide el nombre de usuario y password, a
lo que hay que contestar con Admin y geoserver:
Ya dentro del sistema se da clic en Datos. Despus en Estilo, y en la pantalla que aparece se da clic
en nuevo, se le da nombre al nuevo estilo, por ejemplo Estilo_Municipios (el nombre no debe tener
espacios en blanco) y se da clic en Nuevo:
En la pantalla que aparece se da clic en el botn Seleccionar Archivo y se localiza el archivo .sld que
acabamos de crear en la carpeta tempEstilos y se da clic en Abrir:
Luego se da clic en el botn Upload, el contenido del archivo de texto aparece en la ventana central:
Se da clic en el botn Enviar, y despus en los botones Aplicar y Guardar en ese orden.
Despus de eso se entra a darle mantenimiento a la Entidad Municipios que ya se haba creado,
entrando a la pantalla Configuracin y dando clic en el botn Datos, despus en Entidades, y se
escoge de la lista Puebla:MunicipiosPueblaWGS84.Se da clic en Editar, con lo que aparece la pantalla
de Editor de Entidades:
En la lista ya se halla la entrada del estilo recin creado, Estilo_Municipios, se escoge y se da clic en
el botn Enviar de hasta debajo de esa pantalla.
Luego se da clic en Aplicar y Guardar.

Despus de eso se puede consultar la capa modificada dando clic en Bienvenido, Demostracin y en
Vista preliminar de Mapas, y se consulta la capa Municipios_Puebla, que ya va a tener un color
diferente de relleno, y va a tener etiquetas para cada Municipio con el color, tipo y tamao
especificado:
Si se quiere cambiar cualquiera de las caractersticas de tipo de despliegue del mapa, se debe hacer
lo siguiente:
Dar clic en Configuracin, Datos, Entidades , escoger de la lista la entidad a modificar, en este caso
Municipios_Puebla, y dar clic en Editar, se cambia en la lista el estilo a otro diferente, por ejemplo
Polygon, y se da clic en Enviar, Aplicar y Guardar. Luego se entra a Datos, Estilo, se escoge el estilo
que tena la capa, en este caso Estilo_Municipios y se da clic en Eliminar:
Una vez eliminado ese estilo, se puede entrar a la carpeta TempEstilos y se hacen los cambios que se
deseen en el archivo Municipios_Style:
Para polygon Symbolizer se da el nuevo valor:
<PolygonSymbolizer>
<Fill>
<CssParameter name="fill">#DCBEDC</CssParameter>
Ese valor corresponde a un color Ocre claro.

Se pueden hacer otros cambios, y al terminar se guarda el archivo y se repiten los pasos para crear el
estilo y asignarselo a la Entidad MunicipiosPuebla.
Los estilos deberan de crearse directamente con el botn Crear Nuevo SLD:
Pero no siempre aparece la pantalla de creacin de nuevos estilos, esto es aparentemente un

problema del programa de GeoServer que no se ha arreglado an.
Mantenimiento de SLD para capa de Lneas.
El ejercicio anterior fue para desplegar una capa formada por polgonos. Para cambiar la presentacin
de una capa de lneas, se entra a la carpeta en donde se encuentran los archivos SLD D:\Archivos de
programa\Apache Software Foundation\Tomcat 6.0\webapps\geoserver\data\styles y copiar el archivo
default_line2.sld a la carpeta Tempestivos, una vez copiado el archivo se abre con WordPad, se ve el
siguiente contenido:
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<NamedLayer>
<Name>Linea para Colonias</Name>
<UserStyle>

<Title>A boring default style</Title>
<Abstract>A sample style that just prints out a green line</Abstract>


<FeatureTypeStyle>

<Rule>
<Name>Rule 1</Name>
<Title>Green Line</Title>
<Abstract>A green line with a 2 pixel width</Abstract>

<LineSymbolizer>
<Stroke>
<CssParameter name="stroke-width">2</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
Al archivo anterior se le hacen los siguientes cambios:

<Name>Estilo para Colonias</Name>
<Title>Estilo para capa de lineas</Title>
Despus de </LineSymbolizer>y antes de </Rule> se agrega lo siguiente:
<TextSymbolizer>
<Label>
<ogc:PropertyName>NOMBRE_DE_</ogc:PropertyName>
</Label>
<Font>
</Font>
<Fill>
</Fill>
</TextSymbolizer>
</Rule>
Se guarda el archivo con el nombre Colonias_Style.sld.

Despus de esto se entra al Administrador Web de GeoServer (GeoServer Web admin Page), se da
de alta el nuevo estilo y se le asigna a la entidad de colonias por medio de Edicin de entidades.
Cuando se consulta la capa de colonias debe verse algo como lo siguiente:
Configuracin de Estilo para capas de Puntos.

Ahora vamos a configurar el despliegue de la capa PuntosInteresPuebla que ya cargamos en
Geoserver con anterioridad. Se puede consultar cmo se ve actualmente escogiendo ver
topp:PuntosInteresPuebla en la parte de Vista Preliminar de Mapas, y se comprueba que est
desplegandose con cuadros rojos en cada punto porque est usando el estilo Points, que ya exista en
el sistema de Geoserver:
Ahora le vamos a hacer cambios para modificar la forma en que se presenta la capa a los usuarios.
Para esto entramos a la pgina sld cookbok en la direccin Web:
http://docs.geoserver.org/latest/en/user/styling/sld-cookbook/
Se localiza la parte que da instrucciones sobre cmo desplegar capas de puntos (en la liga Point as
graphic):
En esta parte del tutorial podemos ver diferentes formas de cambiar cmo se despliegan los puntos de
nuestra capa, se pueden escoger diferentes figuras para desplegar que ya forman parte de la
biblioteca de Geoserver, como triangulos o cuadrados que pueden tener cualquier color, tamao y
rotacin que les especifiquemos dentro del archivo de estilo que despus le asignemos a la capa que
se despliega. Para hacer un ejemplo ms interesante, vamos hasta la parte que nos muestra cmo
desplegar un grfico cualquiera que nosotros podemos disear en un paquete grfico como Paint
Fireworks, el cual se us para crear el archivo IconoC.gif que se incluye en los archivos de instalacin
de clase. Este archivo se copia a la carpeta Styles dentro de los archivos de datos de Geoserver. Se
puede entrar en Geoserver a crear un nuevo Estilo, el cual pude ser una copia de el estilo point,
despus se localiza en la pgina cookbook la parte donde se despliega el cdigo para convertir los
puntos en un grfico, el cual se puede copiar y pastear dentro del cdigo de la descripcin del estilo
dentro de Geoserver:
El cdigo se pega remplazando la parte FeatureTypeStyle dentro del cdigo que describe al estilo:
Tambin se le copia la parte TextSymbolizer siguiente para que despliegue como etiquetas el campo
descripc de la tabla PuntosInteresPuebla:
<TextSymbolizer>
<Label>
<ogc:PropertyName>descripc</ogc:PropertyName>
</Label>
<Font>
</Font>
<Fill>
</Fill>
</TextSymbolizer>
Se guarda el estilo y se le hace el cambio a la capa PuntosInteresPuebla dentro de la venta Capas
dentro de Geoserver, en la pestaa Publicacin:
Cuando se despliega la capa, se puede ver de esta forma:
Ahora se puede hacer el cambio para que se despliegue en el lugar de cada punto cualquier caracter
especial. Para escoger que caracter se va a desplegar se debe correr el programa charmap desde la
ventana Inicio. Para esto se da click e inicio, en la ventana en blanco que aparece sobre el botn Inicio
se escribe charmap, y en la lista superior aparece el resultado charmap.exe, al cual se le da dobel
click para ejecutarlo:
De la lista de caracteres se escoge la entrada Wingdings 2, auque se puede escoger cualquier otro de
los conjuntos de caracteres que contienen dibujos en lugar de letras:
Decidimos escoger el caracter

de ese conjunto, el cual tiene la clave 0xF5
Se crea un nuevo Estilo llamado PuntosInteresPuebla2 a partir del estilo PuntosInteresPuebla,
introduciendo en el cdigo la siguiente parte copiada de la pgina
http://docs.geoserver.org/stable/en/user/styling/sld-extensions/pointsymbols.html
la cual se ve as:
Se copia el cdigo que se encuentra ah y se pega reemplazado la etiqueta PointSymbolizer dentro del
nuevo estilo, haciendo el cambio de que la lnea que dice ttf://Webdings#0x0064 se reemplaze por la
lnea ttf://Wingdings 2#0x00F5 y se le da la clave de color 66FF00 en la etiqueta fill:
Se guarda el estilo y despus se le asigna a la capa PuntosInteresPuebla entrando a la ventana

Capas, dando click en la capa y despus an la pestaa Publicacin. Cuando se despliega la capa
despus de esto, se ver como sigue:
Ahora se copia el siguiente cdigo dandole como nombre ol_basicoCdPuebla2.htm, y se guarda en la

carpeta www de geoserver:
<html>
<head>
<title>Ciudad de Puebla</title>
<link rel="stylesheet" type="text/css"
href="http://localhost:8080/geoserver/openlayers/theme/default/style.css"/>
#map {
width: 750px;
height: 400px;
border: 1px solid black;
}
</style>
<script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js" type="text/javascript">
</script>
<script type="text/javascript">
var map,gSL;
var lon = 583776.51043;
var lat = 2106198.40880;
var zoom = 3;
function init(){
format = 'image/png';
var bounds = new OpenLayers.Bounds(
576122.46357012, 2088542.60583826,
593978.86982012, 2116630.85119604
);
var map_controls = [
new OpenLayers.Control.PanZoomBar({position: new OpenLayers.Pixel(2, 15)}),
new OpenLayers.Control.MousePosition({element: $('location')})
];
var options = {
controls: map_controls,
maxExtent: bounds, //Sin esto no se ven los mapas
maxResolution: "auto",
projection: "EPSG:3395",
//projection: new OpenLayers.Projection("EPSG:900913"), //Se puede poner y funciona
units: 'm'
};
map = new OpenLayers.Map('map', options);
var cols = new OpenLayers.Layer.WMS(
"Colonias Puebla", "http://localhost:8080/geoserver/EstadoPuebla/wms",
{
LAYERS: 'EstadoPuebla:coloniasPuebla',
//STYLES: '',
format: 'image/png',
tiled: false
},
{
opacity:"0.6",
isBaseLayer: false
}
);
var manz = new OpenLayers.Layer.WMS(
"Manzanas Puebla", "http://localhost:8080/geoserver/EstadoPuebla/wms",
{
LAYERS: 'EstadoPuebla:ManzanasPuebla',
//STYLES: '',
tiled: false
},
{
opacity:"1",
isBaseLayer: true //Sin una capa BaseLayer no se ve nada
}
);
var puntosInt = new OpenLayers.Layer.WMS(
"EstadoPuebla:PuntosInteresPuebla - Untiled",
"http://localhost:8080/geoserver/EstadoPuebla/wms",
{
LAYERS: 'EstadoPuebla:PuntosInteresPuebla',
STYLES: '',
tiled: false
},
{
opacity:"0.6",
isBaseLayer: false
}
);
map.addLayers([manz, cols,puntosInt]);
// Manipular el zoom para ver el mapa:
map.zoomToExtent(bounds);
//map.zoomToMaxExtent();
//map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
</script>
</head>
<body onload="init()">
<h1>Ciudad de Puebla</h1>
<div id="map">
</div>
<div id="wrapper">
<div id="location">location</div>
<div id="scale">
</div>
</div>
</body>
</html>
Este cdigo despliega al mismo tiempo las tres capas que hemos creado y se ven juntas al desplegar
esta pgina:
Opciones de despliegue para diferentes tipos de capas.

Los valores que se pueden poner para modificar la presentacin de las capas en GeoServer son muy
extensos y permiten mucha flexibilidad, la lista completa se puede ver en la pgina SLD Cook Book:
http://docs.geoserver.org/latest/en/user/styling/sld-cookbook/
Se puede consultar la pgina para ver que propiedades se le pueden dar a los tres tipos bsicos de
elementos geogrficos: Puntos, Lneas y Polgonos.

Instalacion de Servicio de Mapas en Web Win XP 2015

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Instalacion de Servicio de Mapas en Web Win XP 2015

Загружено:

Авторское право:

Доступные форматы

INSTALACION DE SERVICIO DE MAPAS WEB.

1.- Instalar Java Development Kit desde el archivo jdk-6u13-javafx-1_1_1-windows-i586.exe:

La instalacin pregunta si se va a instalar Java

2.- Instalar Apache Tomcat 6.0.24 con el siguiente ejecutable :

Instalacin de Servicio de Mapas Web - 2/46

Se entra a Apache Tomcat, se inicia Apache Tomcat entrando a Inicio->Programas->Apache-Tomcat

En la pantalla que aparece se da clic en Start:

Se consulta antes que nada la carpeta C:\Archivos de Programa\Apache Software Foundation\Tomcat

Y se entra dando clic en la liga Tomcat Manager.

Se da clic en examinar y se localiza el archivo geoserver.war que existe en el medio de instalacin. Se

Instalacin de Servicio de Mapas Web - 4/46

Se debe copiar el archivo epsg.properties del medio de instalacin a la carpeta C:\Archivos de

Instalacin de Servicio de Mapas Web - 5/46

Cargar capas en GeoServer.

Instalacin de Servicio de Mapas Web - 6/46

Aparecer la siguiente pantalla:

Al preguntar el usuario y password se le da Admin y geoserver.

Instalacin de Servicio de Mapas Web - 7/46

Se da click en Nuevo. Aparece despus la siguiente ventana:

En esta ventana, en la caja de edicin url, el letrero ya existente (file:data/) representa

Instalacin de Servicio de Mapas Web - 8/46

Se da click en el botn Enviar al final de la pantalla y en la parte superior izquierda dar

Al dar click en la capa se ver el mapa:

Instalacin de Servicio de Mapas Web - 9/46

En la siguiente pantalla escoger Spanish/Mexico de la lista:

NOTAS: La instalacin de PostgreSQL crea automticamente un usuario nuevo llamado postgres. Si

Instalacin de Servicio de Mapas Web - 12/46

Despus de esto se reinicia el sistema.

Aparecer la pantalla principal de el administrador de Bases de Datos de PostGreSQL:

Instalacin de Servicio de Mapas Web - 13/46

Instalacin de Servicio de Mapas Web - 14/46

Instalacin de Servicio de Mapas Web - 15/46

Instalacin de Servicio de Mapas Web - 16/46

Despus de esto, se da clic en OK y en la ventana anterior se da clic en Import. Al terminar el proceso

), se puede ver cmo ya quedo creada la tabla

Cuando se est en la ventana de Smbolo de sistema.

Instalacin de Servicio de Mapas Web - 17/46

Instalacin de Servicio de Mapas Web - 18/46

Se escoge MAPASPG:::municipios y se da clic en el botn Nuevo. Se siguen los pasos ya conocidos

Instalacin de Servicio de Mapas Web - 19/46

Consulta de Mapas por OpenLayers.

Instalacin de Dreamweaver de Macromedia.

Instalacin de Servicio de Mapas Web - 20/46

Instalacin de Servicio de Mapas Web - 21/46

Hecho esto se guarda el archivo en la carpeta C:\Archivos de programa\Apache Software

Como por ejemplo:

Despus de lo anterior, se crea en Geoserver la capa Colonias desde el archivo

var gSL = new OpenLayers.Layer.Google(

{type: G_PHYSICAL_MAP, sphericalMercator: true}

Instalacin de Servicio de Mapas Web - 27/46

Y con la siguiente lnea se agrega a los mapas que se despliegan:

El resultado debe verse de la siguiente manera:

y despus se usan para aplicar el centro y el zoom:

Instalacin de Servicio de Mapas Web - 28/46

Modificacin de la apariencia de las Capas de GeoServer.

Cuando se ve el contenido de el archivo en WordPad se ve lo siguiente:

Instalacin de Servicio de Mapas Web - 29/46

Al archivo anterior se le pueden hacer cambios como los siguientes:

2.- Al elemento ttulo se le da el siguiente letrero:

3.- El elemento Fill se cambia al siguiente valor:

4.- El elemento Stroke se cambia a lo siguiente:

5.- Despues de la etiqueta </PolygonSymbolizer> se pone el siguiente texto:

Instalacin de Servicio de Mapas Web - 30/46