Que es OpenLayers y como usar el código

Hola comunidad SIG os quiero platicar sobre el tema de los OpenLayers. Esta tecnología la cual ha sido acogida con gran fuerza en por las plataformas SIG. Pero vayamos al grano que es OpenLayers y en que consiste. Actualmente nos encontramos en la versión v4.6.5 y es una biblioteca de JavaScript de código abierto bajo una derivación de la licencia BSD para mostrar mapas interactivos en los navegadores web. OpenLayers ofrece un API para acceder a diferentes fuentes de información cartográfica en la red: Web Map Services, Mapas comerciales (tipo Google Maps, Bing, Yahoo), Web Features Services, distintos formatos vectoriales, mapas de OpenStreetMap, etc.
OpenLayers desde el 2007 forma parte de los proyectos de  Open Source Geospatial Foundation.

Un ejemplo claro de cómo esta interactuando OpenLayers con las diferentes plataformas, lo puedes ver claramente en la siguiente imagen.



Características de OpenLayers


Bien ahora vamos a repasar las características de OpenLayers.

  • Capas de mosaico.- Puedes extraer mosaicos de OSM, Bing, MapBox, Stamen y cualquier otra fuente XYZ que pueda encontrar. Servicios de mapeo OGC y capas sin pegar también son compatibles.
  • Capas de Vectores.- Puedes renderizar datos vectoriales de GeoJSON, TopoJSON, KML, GML, mosaicos de vectores de Mapbox y otros formatos.
  • Innovador, rápido y móvil.- Aprovechas al máximo Canvas 2D, WebGL y todas las últimas novedades de HTML5. Soporte móvil listo para usar. Cree perfiles personalizados livianos con solo los componentes que necesita.
  • Fácil de personalizar y ampliar.- Dale estilo a tus controles de mapa con CSS directo. Enganche en diferentes niveles de la API o use bibliotecas de terceros para personalizar y extender la funcionalidad

Que es OpenLayers y como usar el código


OpenLayers hace que sea fácil poner un mapa dinámico en cualquier página web. Puede mostrar mosaicos de mapas, datos vectoriales y marcadores cargados desde cualquier fuente. OpenLayers ha sido desarrollado para promover el uso de información geográfica de todo tipo. Es completamente gratuito, JavaScript de código abierto, publicado bajo la licencia BSD de 2 cláusulas (también conocida como FreeBSD).

Ahora vamos a pasar a utilizar el código que nos proporciona OpenLayers.org


  • v4.6.5-dist.zip.- Incluye una compilación completa de la biblioteca, una compilación de depuración y una biblioteca CSS.
  • v4.6.5.zip.- Incluye todos los ejemplos más arriba, los documentos de API y las fuentes.
Puedes también utilizar el código de ejemplo que viene en el sitio https://openlayers.org/en/latest/examples/


Por ejemplo existe un codigo que se encuentra en el sitio https://openlayers.org/en/latest/examples/accessible.html para accesar a un mapa simple.

El código es el siguiente:

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <style>
      a.skiplink {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
      }
      a.skiplink:focus {
        clip: auto;
        height: auto;
        width: auto;
        background-color: #fff;
        padding: 0.3em;
      }
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
    </style>
  </head>
  <body>
    <a class="skiplink" href="#map">Go to map</a>
    <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out">Zoom out</button>
    <button id="zoom-in">Zoom in</button>
    <script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      document.getElementById('zoom-out').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom - 1);
      };

      document.getElementById('zoom-in').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
      };
    </script>
  </body>
</html>

Para hacerlo andar hace falta pegar este código en un Bloc de Notas de Windows y guardar el archivo con la extensión .html



Después podemos abrir el archivo .html en un navegador de Internet, el cual contiene el código de nuestro mapa basado en OpenLayers.



Síguenos en las redes sociales

Blog SIG en Google+ Blog SIG en Facebook @Blog SIG en Twitter

Buscar en este blog

No hay comentarios.:

Publicar un comentario

Tu comentario es muy valioso, participa...