Professional Documents
Culture Documents
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.
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
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}),
];
…
<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