OpenLayers é uma ferramenta JavaScript poderosa que nos permite criar e exibir todos os tipos de mapas em um site. Este artigo irá guiá-lo na adição de um ponto e um recurso de string de linha, em seguida, transformar suas projeções para usar coordenadas e adicionar um pouco de cor definindo o estilo da camada.
Observe que você precisa ter um mapa funcional do OpenLayers instalado em uma página da web para seguir este artigo. Se você não tiver um, consulte Como fazer um mapa usando OpenLayers 3.
Passos
Parte 1 de 3: Adicionando recursos de string de ponto e linha
Etapa 1. Crie um recurso de ponto
Simplesmente copie a seguinte linha de código em seu
elemento:
var point_feature = new ol. Feature ({});
Etapa 2. Defina a geometria do ponto
Para dizer ao OpenLayers onde colocar o ponto, você precisa criar uma geometria e dar a ela um conjunto de coordenadas, que é um array na forma de [longitude (E-W), latitude (N-S)]. O código a seguir cria isso e define a geometria do ponto:
var point_geom = new ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Etapa 3. Crie um recurso de string de linha
Strings de linha são linhas retas quebradas em segmentos. Nós os criamos como pontos, mas fornecemos um par de coordenadas para cada ponto da string de linha:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Etapa 4. Adicione os recursos a uma camada vetorial
Para adicionar os recursos ao mapa, você precisa adicioná-los a uma fonte, que você adiciona a uma camada vetorial, que pode então adicionar ao mapa:
var vector_layer = new ol.layer. Vector ({fonte: new ol.source. Vector ({features: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
Parte 2 de 3: Transformando as geometrias dos recursos para usar coordenadas
Como acontece com qualquer software de mapeamento poderoso, os mapas OpenLayers podem ter diferentes camadas com diferentes maneiras de exibir informações. Como a Terra é um globo e não plano, quando tentamos exibi-lo em nossos mapas planos, o software precisa ajustar os locais para coincidir com o mapa plano. Essas diferentes maneiras de exibir informações do mapa são chamadas projeções. Usar uma camada vetorial e uma camada de blocos juntas no mesmo mapa significa que temos que transformar as camadas de uma projeção para outra.
Etapa 1. Coloque os recursos em um array
Começamos colocando os recursos que queremos transformar juntos em um array através do qual podemos iterar.
var features = [point_feature, linestring_feature];
Etapa 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 chamar mais tarde:
função transform_geometry (elemento) {var current_projection = new ol.proj. Projection ({código: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (current_projection, new_projection);); }
Etapa 3. Chame a função de transformação nos recursos
Agora, basta iterar pela matriz.
features.forEach (transform_geometry);
Parte 3 de 3: Definindo o estilo da camada vetorial
Para alterar a aparência de cada recurso no mapa, precisamos criar e aplicar um estilo. Os estilos podem alterar cores, tamanhos e outros atributos de pontos e linhas, e também podem exibir imagens para cada ponto, o que é muito útil para mapas personalizados. Esta seção não é necessária, mas é divertida e útil.
Etapa 1. Crie o preenchimento e cozimento
Crie um objeto de estilo de preenchimento e uma cor vermelha semitransparente e um estilo de traço (linha) que é uma linha vermelha sólida:
var fill = new ol.style. Fill ({color: [180, 0, 0, 0.3]}); var stroke = new ol.style. Stroke ({color: [180, 0, 0, 1], width: 1});
Etapa 2. Crie o estilo e aplique-o à camada
O objeto de estilo OpenLayers é bastante poderoso, mas vamos apenas definir o preenchimento e o traço por enquanto:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (estilo);
