Cómo crear un mapa con OpenLayers

ol3 es la siguiente generación de web mapping. OpenLayers muestra los datos geoespaciales en cualquier navegador web de escritorio moderno o móvil. Al igual que OpenLayers 2, es compatible con una gran variedad de tipos de datos y capas. Pero a diferencia de la anterior versión, se construye desde cero basándose en las últimas tecnologías de navegación como HTML5, WebGL y CSS3.

Primeros pasos con OpenLayers 3

ol3 aun se encuentra bajo un fuerte desarrollo, y faltan muchas características que existían en la versión 2. Pero el equipo de desarrollo ha decidido liberar una versión alpha. Vamos a crear nuestro propio mapa, para ello incluiremos en la cabecera <head> de una página web la hoja de estilool.css y la librería JavaScript ol.js:

<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css">

<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>

Dentro de la etiqueta <body> encontramos el marcado para el mapa, que genera un único elemento de documento:

<div style="width:100%; height:100%" id="map"></div>

También damos al contenedor un atributo id para que podamos hacer referencia a él en nuestro código. Ahora añadimos el siguiente código:

<script>
 var map = new ol.Map({
       layers: [
         new ol.layer.TileLayer({
            source: new ol.source.OSM()
         })
       ],
 //renderer: ol.RendererHints.createFromQueryData(),

    renderer: 'canvas'
    target: 'map',
    view: new ol.View2D({
        center: [0, 0],
        zoom: 2
    })
 });
  //Añadimos el control de zoom
   map.addControl(new ol.control.ZoomSlider());
 </script>

La primera línea de nuestro script crea un objeto nuevo ol.Map, que es conocido como constructor.
La información cartográfica se introduce a través de la clase ol.Layer. En este caso añadimos la capa base de OpenStreetMap.
Con la línea renderer: ol.RendererHints.createFromQueryData() se puede seleccionar un “renderer” con un parámetro en la url:
- http://mappinggis.com/webmapping/ol3.html?renderer=canvas
- http://mappinggis.com/webmapping/ol3.html?renderer=canvas,webgl,dom

El renderer 2D canvas es parte de HTML5 y aporta una representación más rápida y suave; el renderer WebGL mejora la apariencia tridimensional de los edificios en Google Maps y añade algo de dinamismo. El mecanismo DOM es el que tiene peor rendimiento.

Lo representamos en una vista en 2D, fijamos un centro y un nivel de zoom.
Por último añadimos un control de zoom deslizante: ol.control.ZoomSlider.

El resultado y el código fuente utilizado puedes verlo haciendo clic en la imagen:

Puedes examinar los primeros ejemplos y explorar la documentación de la API, aun en una fase poco madura.

SIG-YURY soluciones GEOMATICS

Pages - Menu

Menu - Pages

martes, 17 de junio de 2014