Ejemplo geoJSON con Openlayers 3

Veamos un ejemplo sencillo de cómo pintar una capa con datos en formato geoJSON con [http://openlayers.org/ openlayers 3]. Tienes el código de este ejemplo en github, aunque para poder verlo funcionando, tendrás que desplegarlo en un servidor web.

Añadir Openlayers a nuestra página[editar]

Tendremos que crear un fichero html donde irá nuestro mapa. Lo primero en esta página html es añadir el código javascript de Openlayers y su hoja de estilos CSS correspondiente. Para el ejemplo y para no complicarnos la vida, cogeremos este código y hoja de estilo directamente del sitio de Openlayers.

<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.13.1/build/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.13.1/build/ol.js" type="text/javascript"></script>
<title>Openlayers geoJSON Example</title>
</head>

Coger los datos[editar]

Ahora hay que crear un Vector de Openlayers con nuestros datos. En el ejemplo vamos a cogerlo de un fichero que esté desplegado en el mismo servidor, junto a nuestro página html con el mapa. La forma de instanciar este vector es la siguiente

var source = new ol.source.Vector({
   url : "geoJSONdata.json",
   format : new ol.format.GeoJSON()
})

Símplemente es un new de ol.source.Vector, con dos atributos de configuración. Uno la url donde está nuestro fichero de datos geoJSON (o donde haya un servicio que nos devuelva estos datos en ese formato), y un atributo indicando que el formato es GeoJSON.

Si los datos en vez de estar en un fichero/servicio separado, los tuvieramos directamente en nuestro código javascript en una variable, la fuenta de datos se podría crear así

// Los datos en la variable
var geojsonObject = {
   'type': 'FeatureCollection',
   'crs': {
      'type': 'name',
      'properties': {
         'name': 'EPSG:3857'
       }
    },
    'features': [{
       'type': 'Feature',
       'geometry': {
          'type': 'Point',
          'coordinates': [0, 0]
        }
    },
    ... // Más features
    ]
};

var source = new ol.source.Vector({
   features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});

es decir, en vez de usar el atributo url, usamos features y en él ponemos las features (datos) leídos por medio del método readFeatures de la clase ol.format.GeoJSON

Creación de la capa[editar]

Ahora hay que crear la capa con estos datos que añadiremos al mapa. La capa es una instancia de ol.layer.Vector

var vectorLayer = new ol.layer.Vector({
   source : source
})

Es una instancia de ol.layer.Vector con un único atributo, source, que contendrá nuestra instancia source de ol.source.Vector.

El mapa[editar]

Ya sólo nos queda crear el mapa y añadirle esta capa y las otras capas que queramos. Para crear el mapa necesitamos en el fichero html un elemento <div> vacío que se convertirá en el mapa. A este <div> hay que ponerle un identificador para que podamos referenciarlo desde nuestro código javascript

<div id="map" />

Y el código javascript de Openlayers, con un mapa de fondo y nuestros datos geoJSON quedaría

// Un array con dos capas
	var layers = [ new ol.layer.Tile({
		source : new ol.source.MapQuest({
			layer : 'sat'
		})
	}), vectorLayer ];

// Creación del mapa con las dos capas
	var map = new ol.Map({
		layers : layers,
		target : 'map',
		view : new ol.View({
			center : [ -1097148, 4569099 ],
			zoom : 4
		})
	});

Símplemente creamos un array de javascript con dos capas, una es la de fondo (ol.layer.Tile) y la otra es la vectorLayer con nuestros datos geoJSON. La capa de fondo coge su mapa directamente de internet, de MapQuest, gracias a la clase ol.source.MapQuest. De entre las capas que nos ofrece MapQuest, elegimos la de satélite poniendo sat en el atributo layer.

Luego convertimos el <div> en mapa haciendo una instancia de ol.Map, indicando las capas (layers), el target que es el identificador del <div> y un view para darle un centrado y zoom inicial al mapa.

El resultado[editar]

El resultado de este código es el siguiente