Cómo agregar características vectoriales a un mapa OpenLayers 3 (con imágenes)

OpenLayers es una poderosa herramienta de jаvascript 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 función de cadena de línea, luego transformar sus proyecciones para usar coordenadas, luego agregar un poco de color configurando el estilo de la capa.

Tenga en cuenta que necesita tener un mapa de OpenLayers de trabajo instalado en una página web para seguir este artículo. Si no tiene uno, vea cómo hacer un mapa usando OpenLayers 3.

Pasos

Parte 1 de 3:

Agregar características de punta y cadena de línea

1. Crear una característica de punto. Simplemente copie la siguiente línea de código en su elemento:.

var point_feature = nuevo ol.Característica({ })-

2. Establecer la geometría del punto. Para indicar a Openlayers donde colocar el punto, debe crear una geometría y darle un conjunto de coordenadas, que es una matriz en forma de [longitud (E-W), Latitude (N-S)]. El siguiente código crea esto y se establece la geometría del punto:

var point_geom = nuevo ol.geom.PUNTO ([20, 20]) - Point_Feature.SetEgeometría (Point_geom)-

3. Crear una función de cadena de línea. Las cadenas de línea son líneas rectas rotas en segmentos. Los creamos igual de puntos, pero proporcionamos un par de coordenadas para cada punto de la cadena de línea:

var linetring_feature = nuevo ol.Característica ({Geometry: New OL.geom.LINESTRING ([[10, 20], [20, 10], [30, 20]])})-

4. Añadir las características a una capa vectorial. Para agregar las características al mapa, debe agregarlas a una fuente, que agrega a una capa vectorial, que luego puede agregar al mapa:

var vector_layer = nuevo ol.capa.Vector ({fuente: nuevo ol.fuente.Vector ({Características: [Point_Feature, LineString_Feature]})}) Mapa.Addlayer (vector_layer)-

Parte 2 de 3:

Transformando las geometrías de las características para usar las 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 y no es plano, cuando intentamos mostrarlo en nuestros mapas planos, el software tiene que ajustar las ubicaciones para que coincidan con el mapa plano. Estas formas diferentes de mostrar la información del mapa se llaman proyecciones. Para usar una capa de vector y una capa de azulejos en el mismo mapa, significa que tenemos que transformar las capas de una proyección a otra.

1. Poner las características en una matriz. Comenzamos poniendo las características que queremos transformarnos juntos en una matriz que podamos iterativa a través de.

Características de VAR = [Point_Feature, LINESTRING_FEATURE]-

2. Escribe la función de transformación. En OpenLayers, podemos usar la función TRANSFORT () en el objeto de geometría de cada característica. Ponga este código de transformación en una función que podemos llamar más adelante:

Función transform_geometry (elemento) {var actual_proyajy = nuevo ol.proyectar.Proyección ({código: "EPSG: 4326"}) - var new_proyjection = tile_layer.getsource ().GetProyección () - Elemento.Getgeometry ().transformar (corriente_proyección, new_proyección) -) -}

3. Llame a la función de transformación en las características. Ahora simplemente iterar a través de la matriz.

características.foreach (transform_geometry)-

Parte 3 de 3:

Configuración del estilo del vector de la capa

Para cambiar lo que parece cada función en el mapa, necesitamos crear y aplicar un estilo. Los estilos pueden cambiar de colores, tamaños y otros atributos de puntos y líneas, y también pueden mostrar imágenes para cada punto, que es muy útil para los mapas personalizados. Esta sección no es necesaria, pero es divertido y útil.

1. Crea el relleno y stoke. Cree un objeto de estilo de relleno y un color rojo semitransparente, y un estilo de carrera (línea) que sea una línea roja sólida:

VAR FILL = NUEVO OL.estilo.Rellenar ({color: [180, 0, 0, 0.3]}) - Var Stroke = NUEVO OL.estilo.Stroke ({Color: [180, 0, 0, 1], Ancho: 1})-

2. Crea el estilo y aplíalo a la capa. El objeto de estilo OpenLayers es bastante poderoso, pero solo vamos a establecer el relleno y el accidente cerebrovascular por ahora:

Var estilo = nuevo ol.estilo.Estilo ({image: new ol.estilo.Círculo ({Relleno: Relleno, Stroke: Stroke, Radio: 8}), Relleno: Relleno, Stroke: Stroke}) - vector_layer.Setstyle (estilo)-

3. Echa un vistazo al mapa terminado.

Consejos

No tengas miedo de usar OpenLayers 3 Documentación API: Aunque es abrumador al principio, es vital aprender a hacer cosas nuevas con Openlayers.