Openlayers 3 Es

openlayers-3
#openlayers
-3
Tabla de contenido
Acerca de 1
Capítulo 1: Comenzando con los openlayers-3 2
Observaciones 2
Examples 2
Instalación o configuración 2
configurando OL-3 2
Empezando con un simple mapa 2
Ejemplo usando Bing Maps 3
Capítulo 2: Dibuja los diferentes tipos de geometría. 4
Examples 4
Dibuja una geometría multilínea 4
Crear una fuente vectorial 4
Inicie el objeto de mapa y agregue la capa vectorial al mapa y la fuente como vectorSource 4
Transforme la proyección del sistema de proyección de origen al sistema de proyecto objeti 4
pasa los puntos al constructor ol.geom.MultiLineString ([]) 4
Crea una característica y agrega geometría como una cosa 5
Finalmente agregarlo a la fuente 5
Creditos 6
Acerca de
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: openlayers-3
It is an unofficial and free openlayers-3 ebook created for educational purposes. All the content is
extracted from Stack Overflow Documentation, which is written by many hardworking individuals at
Stack Overflow. It is neither affiliated with Stack Overflow nor official openlayers-3.
The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.
Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to info@zzzprojects.com
https://riptutorial.com/es/home 1
Capítulo 1: Comenzando con los openlayers-
3
Observaciones
Esta sección proporciona una descripción general de qué es openlayers-3 y por qué un
desarrollador puede querer usarlo.
También debe mencionar cualquier tema grande dentro de openlayers-3, y vincular a los temas
relacionados. Dado que la Documentación para openlayers-3 es nueva, es posible que deba crear
versiones iniciales de esos temas relacionados.
Examples
Instalación o configuración
OpenLayers 3 o como se lo conoce, OL-3 es una biblioteca de Javascript para mapeo web, por lo
que para poder usarlo, deberá agregarlo en su html:
• primero agregue el archivo ol.css para usar el estilo de mapa de OL-3:
• A continuación, agregue el archivo ol.js:
También puede descargar OL-3 desde el sitio oficial www.openlayers.org y llamar a los archivos
en el html cambiando el src y el href
configurando OL-3
<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
Empezando con un simple mapa
<html>
<head>
<title>Getting started</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css"
type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var baseLayer= new ol.layer.Tile({ //a Tile layer is a the background layer for the map
// here we choose an OpenStreetMap base layer
source: new ol.source.OSM({
url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});
var map = new ol.Map({ // we create our map

layers: [baseLayer], // and add the layers to it ( in our case we only have one)
target: 'map', // the div element that will serve as a map
controls: ol.control.defaults({ // we leave the map controls to default
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({ // we define the initial view of the map
center: ol.proj.fromLonLat([0, 0]), //the default projection is the spherical
mercator (meter units) so we get coordinates of the center by degrees
zoom: 2 // the initial zoom level
})
});
</script>
</body>
</html>
Ejemplo usando Bing Maps
var baseLayer = new ol.layer.Tile({

visible: true,
preload: Infinity,
source: new ol.source.BingMaps({
// We need a key to get the layer from the provider.
// Sign in with Bing Maps and you will get your key (for free)
key: 'Ap9VqFbJYRNkatdxt3KyzfJxXN_9GlfABRyX3k_JsQTkMQLfK_-AzDyJHI5nojyP',
imagerySet: 'Aerial', // or 'Road', 'AerialWithLabels', etc.
// use maxZoom 19 to see stretched tiles instead of the Bing Maps
// "no photos at this zoom level" tiles
maxZoom: 19
})
});
var map = new ol.Map({

layers: [baseLayer],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 2
})
});
Lea Comenzando con los openlayers-3 en línea: https://riptutorial.com/es/openlayers-

3/topic/5203/comenzando-con-los-openlayers-3
Capítulo 2: Dibuja los diferentes tipos de
geometría.
Examples
Dibuja una geometría multilínea
Crear una fuente vectorial
var vectorSource = new ol.source.Vector({});
Inicie el objeto de mapa y agregue la capa vectorial al mapa

y la fuente como vectorSource
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: vectorSource
})
],
target: 'map',
view: new ol.View({
center: [45, 5],
zoom:5
})
});
Transforme la proyección del sistema de proyección de

origen al sistema de proyecto objetivo.
var points=[];
for (i = 0; i < 10; i++) {
var xx = Math.random() * (xmax - xmin) + xmin;
var yy = Math.random() * (ymax - ymin) + ymin;
points.push(ol.proj.transform([xx,yy],'EPSG:4326', 'EPSG:3857'));
}
pasa los puntos al constructor ol.geom.MultiLineString ([])
var thing = new ol.geom.MultiLineString([points1]);
Crea una característica y agrega geometría como una cosa
var featurething = new ol.Feature({

name: "Thing",
geometry: thing,
style : new ol.style.Style({
stroke : new ol.style.Stroke({
color : 'red'
})
})
});
Finalmente agregarlo a la fuente
vectorSource.addFeature( featurething );
Nota: es muy importante poner los sistemas de proyección de origen y destino adecuados
Lea Dibuja los diferentes tipos de geometría. en línea: https://riptutorial.com/es/openlayers-

3/topic/8004/dibuja-los-diferentes-tipos-de-geometria-
Creditos
S.
Capítulos Contributors
No
Comenzando con los

1 chrki, Community, Hicham Zouarhi, unibasil
openlayers-3
Dibuja los diferentes

2 Nagaveer Gowda
tipos de geometría.

Openlayers 3 Es

Cargado por

Copyright:

Formatos disponibles

Openlayers 3 Es

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Openlayers 3 Es

Cargado por

Copyright:

Formatos disponibles

openlayers-3

Capítulo 1: Comenzando con los openlayers-3 2

Empezando con un simple mapa 2

Ejemplo usando Bing Maps 3

Capítulo 2: Dibuja los diferentes tipos de geometría. 4

Dibuja una geometría multilínea 4

Crear una fuente vectorial 4

Transforme la proyección del sistema de proyección de origen al sistema de proyecto objeti 4

pasa los puntos al constructor ol.geom.MultiLineString ([]) 4

Crea una característica y agrega geometría como una cosa 5

Finalmente agregarlo a la fuente 5

• primero agregue el archivo ol.css para usar el estilo de mapa de OL-3:

• A continuación, agregue el archivo ol.js:

<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">

Empezando con un simple mapa

var map = new ol.Map({ // we create our map

Ejemplo usando Bing Maps

var baseLayer = new ol.layer.Tile({

var map = new ol.Map({

Lea Comenzando con los openlayers-3 en línea: https://riptutorial.com/es/openlayers-

Crear una fuente vectorial

var vectorSource = new ol.source.Vector({});

Inicie el objeto de mapa y agregue la capa vectorial al mapa

Transforme la proyección del sistema de proyección de

pasa los puntos al constructor ol.geom.MultiLineString ([])

var thing = new ol.geom.MultiLineString([points1]);

var featurething = new ol.Feature({

Finalmente agregarlo a la fuente

Lea Dibuja los diferentes tipos de geometría. en línea: https://riptutorial.com/es/openlayers-

Comenzando con los

Dibuja los diferentes

También podría gustarte