OpenLayers es una poderosa herramienta de JavaScript que nos permite crear y mostrar todo tipo de mapas en un sitio web. Este artículo lo guiará en la configuración de OpenLayers 3 y luego en la creación de un mapa simple que tenga una capa de mosaicos de OpenStreetMaps.

Parte uno de dos:
Instalación y configuración de OpenLayers

  1. 1 Abra o cree su página web. Si aún no tiene una página web en la que desea insertar el mapa, puede usar la siguiente plantilla HTML5; guárdelo como 'map_page.html': 
      <html lang="en"> <cabeza> <meta juego de caracteres="utf-8"> <título>Mi mapa OpenLayers 3</título> </cabeza> <cuerpo>  </cuerpo> </html>
  2. 2 Incluye OpenLayers. Su página web deberá incluir el archivo JavaScript de la biblioteca OpenLayers. Para hacer esto, pegue la siguiente línea de código en su archivo HTML, dentro del área, en una nueva línea debajo del : 
     <guión src="http://openlayers.org/en/v3.0.0/build/ol.js"  tipo="texto / javascript"></guión>
  3. 3 Agregue un contenedor de mapa HTML. OpenLayers mostrará el mapa dentro de un elemento HTML, por lo que debe proporcionar uno para él. Pegue la siguiente línea de marcado dentro del : 
     <div carné de identidad="mapa" clase="mapa"></div>
  4. 4 Estilo el contenedor del mapa. Debes establecer qué tan grande será el mapa cuando se muestre, y debes usar CSS para hacer esto. Puede agregar lo siguiente al documento :  
     <>> .mapa  altura: 500px; anchura: 700px;  >


Parte dos de dos:
Creando el mapa

  1. 1 Crea el objeto del mapa. Para comenzar a escribir el código JavaScript que configura el mapa, deberá agregar un área al después el contenedor del mapa div. También dentro de esto, puedes crear el objeto del mapa llamando nuevo ol.Map () Me gusta esto: 
     <tipo de script='texto / javascript'> var mapa = nuevo ol.Mapa( ); guión>
  2. 2 Establecer el elemento HTML objetivo del mapa. OpenLayers renderizará (visualizará) el mapa dentro de un elemento HTML como div o una pag. El valor que debe pasar a la función setTarget () es simplemente carné de identidad del elemento, que establecemos en 'mapa': 
     mapa.Poner un objectivo('mapa');
  3. 3 Establecer la vista del mapa. La vista del mapa de OpenLayers es lo que administra qué parte del mapa se ve. Cree un nuevo objeto de vista que se centre en las coordenadas [0, 0] (fuera de la costa de África central):
    Nota: A diferencia de la biblioteca de mapeo Leaflet, OpenLayers 3 se ocupa de las coordenadas en el formato [longitud, latitud]. 
     var ver = nuevo ol.Ver( centrar: [0, 0], enfocar: 1 ) mapa.setView(ver);
  4. 4 Agrega una capa de mosaico. Los mapas de OpenLayers tienen capas apiladas una encima de la otra y son lo que realmente ves en un mapa. Hay tres tipos de capas: Imagen, Azulejo y Vector. Las capas de mosaico son las capas estándar 'base' y pueden provenir de proveedores de mapas como Google Maps, MapQuest o OpenStreetMaps. Cada capa tiene una fuente que le dice a OpenLayers de dónde viene la información de la capa. 
     var tile_layer = nuevo ol.capa.Azulejo( fuente: nuevo ol.fuente.MapQuest(capa: 'osm') ) mapa.addLayer(tile_layer);
  5. 5 Establecer el nivel de zoom. En OpenLayers, los mapas se pueden 'acercar' a uno de varios niveles, desde 0 (el más alejado) hasta alrededor de 20 (el más acercado). El nivel de zoom se establece en el objeto de vista, por lo que debemos obtenerlo y configurar su zoom: 
     mapa.getView().setZoom(2);
  6. 6 Verifica tu código. A continuación se muestra el aspecto del código de su página web: 
     doctype html> <html lang="en"> <cabeza> <meta charset="utf-8"> <título>Mis OpenLayers 3 Mapatítulo> <script src="http://openlayers.org/en/v3.0.0/build/ol-debug.js" tipo="texto / javascript">guión> <estilo> .mapa  altura: 500px; anchura: 700px;  estilo> cabeza> <cuerpo> <div id="mapa" clase="mapa">div> <tipo de script='texto / javascript'> var mapa = nuevo ol.Mapa( ); mapa.Poner un objectivo('mapa'); var ver = nuevo ol.Ver( centrar: [0, 0], enfocar: 1 ) mapa.setView(ver); var tile_layer = nuevo ol.capa.Azulejo( fuente: nuevo ol.fuente.MapQuest(capa: 'osm') ) mapa.addLayer(tile_layer); mapa.getView().setZoom(2); guión> cuerpo> html>
  7. 7 El mapa terminado