En anteriores entradas os hemos enseñado cómo empezar con OpenLayers. En esta entrada veremos cómo añadir más capas a nuestro mapa, e intercambiarlas con un selector.
En esta entrada utilizaremos los lenguajes de programación de HTML y de Javascript.
Lo primero de todo es crear un documento HTML con nuestro visor y el diseño de la página.
En las etiquetas style añadimos el estilo en formato css para la caja donde seleccionaremos las capa que queremos ver.
Para continuar crearemos un archivo JavaScript que llamaremos script.js, en este archivo programaremos todo lo relacionado con las capas y con el mapa.
Primero crearemos la vista del mapa donde pondremos la coordenadas del mapa base y el nivel de zoom que queremos visualizar el mapa.
Ahora vamos añadir la primera capa que es la usaremos en el visor como capa base, usaremos Open Street Map como capa base.
Una vez ya tengamos esta capa podemos ir añadiendo 2 capas mas a nuestro visor, la segunda capa que utilizaremos se llama stamen.
Y ahora añadiremos la tercera capa, que será la imagen satelital de ortofoto.
Una vez ya tengamos añadidas todas las capas solo nos queda mediante javascript llamar los inputs que hemos programado antes en el documento html llamados:
• <input type=»radio» name=»input-capas» id=»addosm» checked />
• <input type=»radio» name=»input-capas» id=»addortofoto» />
• <input type=»radio» name=»input-capas» id=»addstamen» />
Estos elementos los llamaremos con addEventListener para poder trabajar con ellos y poder eliminar capas o poner las nuevas capas que vimos antes.
Y para finalizar lo que tenemos que hacer es iniciar el mapa.
(1 votos, promedio: 5,00 de 5)
Cargando...
Formación de calidad impartida por profesionales
Deja tu comentario