Scribd Logo
Upload

Welcome to Scribd!

  • 13 OpenLayers

    Uploaded by

    Pedro Rodrigo de Leon
    21 views16 pages
    Manual para OPEN LAYERS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Manual para OPEN LAYERS

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    21 views16 pages

    13 OpenLayers

    Uploaded by

    Pedro Rodrigo de Leon
    Manual para OPEN LAYERS

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 16

    Configurar un

    mapa
    interactivo con
    OpenLayers
    “
    “OpenLayers 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.

    Inicialmente fue desarrollado por MetaCarta en junio de 2006. Desde


    noviembre del 2007 este proyecto forma parte de los proyectos de Open Source
    Geospatial Foundation. Actualmente el desarrollo y el soporte corre a cargo de
    la comunidad de colaboradores.”

    Fuente: https://es.wikipedia.org/wiki/OpenLayers

    2
    Ejemplo

    3
    Estructura archivo HTML

    <!DOCTYPE html>
    <html>
    <head>
    <title>Mapa interactivo</title>
    </head>

    <body>

    </body>
    </html>

    4
    OpenLayers

    Para utilizar la librería OpenLayers, debe hacer referencia a los archivos de la librería.

    Versión hospedada:
    JavaScript (.js):
    https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js
    Cascading Style Sheet (.css):
    https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css

    Descargar la librería desde https://openlayers.org/download/, copiarla a los archivos de


    la página web y hacer referencia a la copia local ejemplo: “OpenLayers/ol.js y
    OpenLayers/ol.css”

    5
    Añadir referencia a OpenLayers

    …
    <head>
    …
    <script
    src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js">
    </script>
    <link rel="stylesheet"
    href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">

    </head>
    …

    6
    Añadir un contenedor para el mapa

    …
    <head>
    …
    <style type="text/css">
    #mapa { width: 700px;
    height: 700px;
    border: 4px solid black;
    }
    </style>

    </head>
    <body>
    <div id="mapa"></div>
    </body>
    …

    7
    Agregar función para configurar el mapa

    …
    <head>
    …
    <script type="text/javascript">
    var map;
    function init(){
    }
    </script>
    …
    </head>
    <body onload="init()">
    <div id="mapa"></div>
    </body>
    …

    8
    Configurar mapa
    …
    var mapa, capas, vista;
    function init(){
    capas = [
    new ol.layer.Tile({
    source: new ol.source.OSM(),
    })
    ];
    vista = new ol.View({
    projection: 'EPSG:4326',
    center: [-90.2308, 15.7835],
    zoom: 7,
    });
    mapa = new ol.Map({
    layers: capas,
    target: 'mapa',
    view: vista,
    });
    }
    9
    …
    Configurar controles
    …
    var mapa, capas, vista, controles;
    function init(){
    …
    controles = [
    new ol.control.Zoom(),
    new ol.control.ZoomSlider(),
    new ol.control.ScaleLine(),
    new ol.control.FullScreen(),
    new ol.control.Attribution({collapsible: true}),
    ];

    mapa = new ol.Map({


    …
    controls: controles,
    });
    }
    … 10
    Agregar selector de capas – parte 1

    Agregar referencia a la libreria que implementa el selector de capas:

    …
    <script
    src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <link rel="stylesheet"
    href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">

    <script src="https://unpkg.com/ol-layerswitcher@3.2.0"></script>
    <link rel="stylesheet" href="https://unpkg.com/ol-layerswitcher@3.2.0/src/ol-layerswitcher.css" />
    …

    11
    Agregar selector de capas – parte 2
    …
    capas = [
    new ol.layer.Group({
    title: "Base maps",
    layers: [
    new ol.layer.Tile({
    title: "OpenStreetMap",
    type: "base",
    source: new ol.source.OSM(),
    })
    ]
    })
    ];
    …
    controles = [
    …
    new ol.control.LayerSwitcher(),
    ];
    12
    …
    Agregar otra capa base
    …
    capas = [
    new ol.layer.Group({
    …
    new ol.layer.Tile({
    Title: "Topographic map",
    type: "base",
    visible: false,
    source: new ol.source.XYZ({
    attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
    'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
    'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
    }),
    }),
    })
    …

    13
    Agregar otra capa base

    14
    Agregar capa sobrepuesta desde un WMS
    …
    capas = [
    …
    new ol.layer.Group({
    title: "Capas temáticas",
    layers: [
    new ol.layer.Tile({
    title: "Limite nacional",
    type: "overlay",
    transparent: true,
    source: new ol.source.TileWMS({
    url: 'http://ideg.segeplan.gob.gt/geoserver/wms?service=wms',
    params: {
    'LAYERS': 'mapa_base:mapa_base_guatemala',
    'VERSION': '1.1.1',
    'FORMAT': 'image/png',
    'TILED': true
    }
    })
    }),
    ]
    })
    ]
    15
    …
    Agregar capa sobrepuesta desde un WMS

    16

    You might also like