OpenLayers è un potente strumento JavaScript che ci consente di creare e visualizzare tutti i tipi di mappe su un sito web. Questo articolo ti guiderà nell'aggiunta di un punto e di una funzione di stringa di linea, quindi trasformerà le loro proiezioni per utilizzare le coordinate, quindi aggiungerà un po' di colore impostando lo stile del livello.
Si prega di notare che è necessario disporre di una mappa OpenLayers funzionante installata in una pagina Web per seguire questo articolo. Se non ne hai uno, vedi Come creare una mappa utilizzando OpenLayers 3.
Passi
Parte 1 di 3: aggiunta di funzioni punto e stringa di linea
Passaggio 1. Creare una feature punto
Copia semplicemente la seguente riga di codice nel tuo
elemento:
var point_feature = new ol. Feature({ });
Passaggio 2. Impostare la geometria del punto
Per dire a OpenLayers dove posizionare il punto, devi creare una geometria e assegnargli un insieme di coordinate, che è un array sotto forma di [longitudine (E-O), latitudine (N-S)]. Il seguente codice crea questo e imposta la geometria del punto:
var point_geom = new ol.geom. Point([20, 20]); point_feature.setGeometry(point_geom);
Passaggio 3. Creare una feature di stringa di linea
Le stringhe di linea sono linee rette spezzate in segmenti. Li creiamo proprio come i punti, ma forniamo una coppia di coordinate per ogni punto della stringa di linea:
var linestring_feature = new ol. Feature({ geometry: new ol.geom. LineString(
Passaggio 4. Aggiungi le funzionalità a un livello vettoriale
Per aggiungere le caratteristiche alla mappa, devi aggiungerle a una fonte, che aggiungi a un livello vettoriale, che puoi quindi aggiungere alla mappa:
var vector_layer = new ol.layer. Vector({ source: new ol.source. Vector({ features: [point_feature, linestring_feature] }) }) map.addLayer(vector_layer);
Parte 2 di 3: Trasformare le geometrie delle caratteristiche per usare le coordinate
Come con qualsiasi potente software di mappatura, le mappe OpenLayers possono avere diversi livelli con diversi modi di visualizzare le informazioni. Poiché la Terra è un globo e non piatta, quando proviamo a visualizzarla sulle nostre mappe piatte, il software deve regolare le posizioni in modo che corrispondano alla mappa piatta. Questi diversi modi per visualizzare le informazioni sulla mappa sono chiamati proiezioni. Usare un layer vettoriale e un layer tile insieme sulla stessa mappa significa che dobbiamo trasformare i layer da una proiezione all'altra.
Passaggio 1. Metti le caratteristiche in un array
Iniziamo mettendo insieme le caratteristiche che vogliamo trasformare in un array attraverso il quale possiamo iterare.
var features = [point_feature, linestring_feature];
Passaggio 2. Scrivere la funzione di trasformazione
In OpenLayers, possiamo usare la funzione transform() sull'oggetto geometria di ogni feature. Metti questo codice di trasformazione in una funzione che possiamo chiamare in seguito:
function transform_geometry(element) { var current_projection = new ol.proj. Projection({code: "EPSG:4326"}); var nuova_proiezione = tile_layer.getSource().getProjection(); element.getGeometry().transform(current_projection, new_projection);); }
Passaggio 3. Chiama la funzione di trasformazione sulle funzionalità
Ora è sufficiente scorrere l'array.
features.forEach(transform_geometry);
Parte 3 di 3: impostazione dello stile del livello vettoriale
Per modificare l'aspetto di ogni elemento sulla mappa, dobbiamo creare e applicare uno stile. Gli stili possono cambiare colori, dimensioni e altri attributi di punti e linee e possono anche visualizzare immagini per ogni punto, il che è molto utile per le mappe personalizzate. Questa sezione non è necessaria, ma è divertente e utile.
Passaggio 1. Creare il riempimento e il riempimento
Crea un oggetto stile di riempimento e un colore rosso semitrasparente e uno stile tratto (linea) che è una linea rossa continua:
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 });
Passaggio 2. Crea lo stile e applicalo al livello
L'oggetto stile OpenLayers è abbastanza potente, ma per ora imposteremo solo il riempimento e il tratto:
var style = new ol.style. Style({ image: new ol.style. Circle({ fill: fill, stroke: stroke, radius: 8 }), fill: fill, stroke: stroke }); vector_layer.setStyle(stile);
