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á para agregar un punto y una característica de cadena de línea, luego transformará sus proyecciones para usar coordenadas y luego agregará algo de color configurando el estilo de la capa.
Tenga en cuenta que debe tener instalado un mapa de OpenLayers que funcione en una página web para seguir este artículo. Si no tiene uno, consulte Cómo hacer un mapa usando OpenLayers 3.
Pasos
Parte 1 de 3: Agregar características de cadena de puntos y líneas
Paso 1. Cree una entidad de puntos
Simplemente copie la siguiente línea de código en su
elemento:
var point_feature = new ol. Feature ({});
Paso 2. Establezca la geometría del punto
Para decirle a OpenLayers dónde colocar el punto, debe crear una geometría y darle un conjunto de coordenadas, que es una matriz en forma de [longitud (E-O), latitud (N-S)]. El siguiente código crea esto y establece la geometría del punto:
var point_geom = new ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Paso 3. Cree una función de cadena de línea
Las cadenas de líneas son líneas rectas divididas en segmentos. Los creamos como puntos, pero proporcionamos un par de coordenadas para cada punto de la cadena de líneas:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Paso 4. Agregue las características a una capa vectorial
Para agregar las entidades al mapa, debe agregarlas a una fuente, que agrega a una capa vectorial, que luego puede agregar al mapa:
var vector_layer = new ol.layer. Vector ({fuente: new ol.source. Vector ({características: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
Parte 2 de 3: Transformar las geometrías de las entidades para usar coordenadas
Al igual que con cualquier software de mapeo potente, los mapas de OpenLayers pueden tener diferentes capas con diferentes formas de mostrar información. Debido a que la Tierra es un globo terráqueo y no un plano, cuando intentamos mostrarlo en nuestros mapas planos, el software tiene que ajustar las ubicaciones para que coincidan con el mapa plano. Estas diferentes formas de mostrar la información del mapa se denominan proyecciones. Usar una capa vectorial y una capa de mosaico juntas en el mismo mapa significa que tenemos que transformar las capas de una proyección a otra.
Paso 1. Coloque las características en una matriz
Comenzamos poniendo las características que queremos transformar juntas en una matriz por la que podemos iterar.
var features = [point_feature, linestring_feature];
Paso 2. Escribe la función de transformación
En OpenLayers, podemos usar la función transform () en el objeto de geometría de cada característica. Pon este código de transformación en una función que podamos llamar más tarde:
función transform_geometry (elemento) {var current_projection = new ol.proj. Projection ({código: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (proyección_actual, nueva_proyección);); }
Paso 3. Llame a la función de transformación en las características
Ahora simplemente repita la matriz.
features.forEach (transform_geometry);
Parte 3 de 3: Establecer el estilo de la capa vectorial
Para cambiar el aspecto de cada característica en el mapa, necesitamos crear y aplicar un estilo. Los estilos pueden cambiar colores, tamaños y otros atributos de puntos y líneas, y también pueden mostrar imágenes para cada punto, lo cual es muy útil para mapas personalizados. Esta sección no es necesaria, pero es divertida y útil.
Paso 1. Crea el relleno y aviva
Cree un objeto de estilo de relleno y un color rojo semitransparente, y un estilo de trazo (línea) que sea una línea roja sólida:
var fill = new ol.style. Fill ({color: [180, 0, 0, 0.3]}); var trazo = nuevo ol.style. Stroke ({color: [180, 0, 0, 1], ancho: 1});
Paso 2. Crea el estilo y aplícalo a la capa
El objeto de estilo OpenLayers es bastante poderoso, pero solo vamos a establecer el relleno y el trazo por ahora:
var style = new ol.style. Style ({imagen: nuevo ol.style. Circle ({relleno: relleno, trazo: trazo, radio: 8}), relleno: relleno, trazo: trazo}); vector_layer.setStyle (estilo);
