Como adicionar recursos vetoriais a um mapa do OpenLayers 3 (com fotos)

OpenLayers é uma poderosa ferramenta jаvascript que nos permite criar e exibir todos os tipos de mapas em um site. Este artigo irá guiá-lo para adicionar um recurso de ponto e um recurso de uma linha, depois transformar suas projeções para usar coordenadas e adicionar alguma cor definindo o estilo da camada.

Por favor, note que você precisa ter um mapa OpenLayers de trabalho instalado em uma página da Web para seguir este artigo. Se você não tem um, veja como fazer um mapa usando o OpenLayers 3.

Passos

Parte 1 de 3:

Recursos de ponto de adição e linha de linha

1. Crie um recurso de ponto. Basta copiar a seguinte linha de código para o seu elemento:.

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

2. Defina a geometria do ponto. Para dizer ao OpenLayers onde colocar o ponto, você precisa criar uma geometria e dar-lhe um conjunto de coordenadas, que é uma matriz na forma de [longitude (E-W), latitude (n-s)]. O código a seguir cria isso e o conjunto é a geometria do ponto:

var point_geom = novo ol.geom.Point ([20, 20]) - Point_Feature.Setençãoometria (Point_Geom)-

3. Crie um recurso de string de linha. Cordas de linha são linhas retas quebradas em segmentos. Nós os criamos apenas como pontos, mas fornecemos um par de coordenadas para cada ponto da linha de linha:

var linestring_feature = novo ol.Recurso ({geometria: novo ol.geom.Linestring ([10, 20], [20, 10], [30, 20])}))-

4. Adicione os recursos a uma camada de vetor. Para adicionar os recursos ao mapa, você precisa adicioná-los a uma fonte, que você adiciona a uma camada de vetor, que você pode adicionar ao mapa:

var vector_layer = novo ol.camada.Vetor ({source: novo ol.fonte.Vector ({Recursos: [Point_Feature, Linestring_Feature]})}) Mapa.Addlayer (vector_layer)-

Parte 2 de 3:

Transformando as geometrias de recursos para usar coordenadas

Como em qualquer poderoso software de mapeamento, os mapas do OpenLayers podem ter diferentes camadas com maneiras diferentes de exibir informações. Porque a Terra é um globo e não apartamento, quando tentamos exibi-lo em nossos mapas planos, o software tem que ajustar os locais para corresponder ao mapa plano. Essas maneiras diferentes de exibir informações do mapa são chamadas projeções. Usar uma camada de vetor e uma camada de azulejos juntos no mesmo mapa significa que temos que transformar as camadas de uma projeção para outra.

1. Coloque os recursos em uma matriz. Começamos colocando os recursos que queremos se transformar em uma matriz que podemos iterativa através de.

Var Características = [Point_Feature, Linestring_Feature]-

2. Escreva a função de transformação. Em OpenLayers, podemos usar a função Transform () no objeto de geometria de cada recurso. Coloque este código de transformação em uma função que podemos ligar mais tarde:

Função Transform_geometry (elemento) {Var Current_Projection = NOVO OL.proj.Projeção ({código: "EPSG: 4326"}) - var new_projejection = Tile_Layer.getsource ().getprojejection () - elemento.getgeometry ().Transformar (Current_Projejection, New_Projejection) -) -}

3. Chame a função Transform sobre os recursos. Agora simplesmente iterar através da matriz.

recursos.foreach (transform_geometry)-

Parte 3 de 3:

Definindo o estilo de camada de vetor

Para alterar o que cada recurso no mapa parece, precisamos criar e aplicar um estilo. Os estilos podem alterar cores, tamanhos e outros atributos de pontos e linhas, e eles também podem exibir imagens para cada ponto, que é muito útil para mapas personalizados. Esta seção não é necessária, mas é divertida e útil.

1. Crie o preenchimento e stoke. Crie um objeto de estilo de preenchimento e uma cor vermelha semi-transparente e um estilo de acidente vascular cerebral (linha) que é uma linha vermelha sólida:

var preenchimento = novo ol.estilo.Preencher ({cor: [180, 0, 0, 0.3]}) - Var Stroke = novo OL.estilo.Acidente vascular cerebral ({cor: [180, 0, 0, 1], largura: 1})-

2. Crie o estilo e aplique-o à camada. O objeto de estilo OpenLayers é bastante poderoso, mas só vamos definir o preenchimento e derrame por agora:

var estilo = novo ol.estilo.Estilo ({Image: Novo Ol.estilo.Circle ({preenchimento: preenchimento, curso: acidente vascular cerebral, raio: 8}), preencha: Preenchimento, curso: Stroke}) - Vector_Layer.setstyle (estilo)-