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.

UNAP

ZEE AYACUCHO

ZEE LAMBAYEQUE

CIENTÍFICOS PERUANOS

ARTÍCULOS CIENTIFICOS

CONIDA-PERU

INGENIERÍA TOPOGRÁFICA Y AGRIMENSURA

INGENIERÍA TOPOGRÁFICA Y AGRIMENSURA
INGENIERÍA TOPOGRÁFICA Y AGRIMENSURA

Google+ Followers

BUSCAR

ERDAS

PCI GEOMATIC

gvGIS

ENVI

QGIS

ArcGIS

Entradas populares SIGYURY

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

ZEE CALLAO

ZEE CALLAO
GEOSERVIDOR

ZEE MADRE DE DIOS

ZEE MADRE DE DIOS
GEOSERVIDOR

GESERVIDOR MINAM PERU

GESERVIDOR MINAM PERU
SHP. PERU DESCARGABLE

CARTAS NACIONALES PERU

CARTAS NACIONALES PERU
ESCALA: 1/100000 IGN

Seguimiento por correo electrónico

Advertising

Advertising
ING° EFRAIN YURY TURPO CAYO

PYTHON

GEOSERVIDOR SERNAP

GEOCATMIN

SIGGRID CENEPRED

DATOS SENAMHI-PERÚ

DATOS SENAMHI-PERÚ
Descargar dat. HIDROMETEOROLÓGICOS

GEOHIDRO PERÚ

CIP-PUNO

SUELOS DEL MUNDO

SIG SINPAD (PELIGROS Y VULNERABILIDAD)

Labels