blog oficial

http://sigyury.blogspot.com.br/

martes, 17 de junio de 2014

Cómo crear un mapa con OpenLayers


Cómo crear un mapa con OpenLayers 


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 HTML5WebGL 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:
ol3
Puedes examinar los primeros ejemplos y explorar la documentación de la API, aun en una fase poco madura.
Share:

LOGO OFICIAL

LOGO OFICIAL
SIG-YURYsoluciones

ING. EFRAIN YURY TURPO CAYO

ING. EFRAIN YURY TURPO CAYO
ING. EFRAIN YURY TURPO CAYO
Con la tecnología de Blogger.

CIENTÍFICOS PERUANOS

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Google+ Followers

Seguimiento por correo electrónico