OpenLayers és una potent eina JavaScript que ens permet crear i mostrar tot tipus de mapes en un lloc web. Aquest article us guiarà a afegir un punt i una funció de cadena de línies, a continuació, transformeu les seves projeccions per utilitzar coordenades i, a continuació, afegiu una mica de color configurant l'estil de la capa.
Tingueu en compte que heu de tenir instal·lat un mapa OpenLayers que funcioni en una pàgina web per seguir aquest article. Si no en teniu cap, consulteu Com fer un mapa amb OpenLayers 3.
Passos
Part 1 de 3: Afegir funcions de cadenes de punt i línia
Pas 1. Creeu una característica puntual
Simplement copieu la següent línia de codi al vostre
element:
var point_feature = new ol. Feature ({});
Pas 2. Definiu la geometria del punt
Per dir a OpenLayers on col·locar el punt, heu de crear una geometria i donar-li un conjunt de coordenades, que és una matriu en forma de [longitud (E-W), latitud (N-S)]. El codi següent crea això i defineix la geometria del punt:
var point_geom = new ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Pas 3. Creeu una funció de cadena de línia
Les cordes de línia són línies rectes dividides en segments. Els creem com punts, però proporcionem un parell de coordenades per a cada punt de la cadena de línia:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Pas 4. Afegiu les funcions a una capa vectorial
Per afegir les funcions al mapa, les heu d'afegir a una font, que afegiu a una capa vectorial, que podeu afegir al mapa:
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
Part 2 de 3: Transformar les geometries de les funcions per utilitzar les coordenades
Com passa amb qualsevol potent programari de mapes, els mapes OpenLayers poden tenir capes diferents amb diferents maneres de mostrar informació. Com que la Terra és un globus terrestre i no plana, quan intentem mostrar-la als nostres mapes plans, el programari ha d’ajustar les ubicacions perquè coincideixin amb el mapa pla. Es denomina aquestes diferents maneres de mostrar la informació del mapa projeccions. Utilitzar una capa vectorial i una capa de mosaic junts al mateix mapa significa que hem de transformar les capes d’una projecció a una altra.
Pas 1. Introduïu les funcions en una matriu
Comencem posant les funcions que volem transformar juntes en una matriu que podem iterar.
funcions de var = [característica_punt, característica_lineal];
Pas 2. Escriviu la funció de transformació
A OpenLayers, podem utilitzar la funció transform () a l’objecte de geometria de cada característica. Poseu aquest codi de transformació en una funció que podem anomenar més endavant:
funció transforma_geometria (element) {var projecció_actual = nova ol.proj. Projection ({codi: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (projecció_actual, nova_projecció);); }
Pas 3. Truqueu a la funció de transformació de les funcions
Ara simplement itereu a través de la matriu.
features.forEach (transforma_geometria);
Part 3 de 3: Configuració de l'estil de la capa vectorial
Per canviar l’aspecte de cada funció al mapa, hem de crear i aplicar un estil. Els estils poden canviar colors, mides i altres atributs de punts i línies, i també poden mostrar imatges per a cada punt, cosa molt útil per a mapes personalitzats. Aquesta secció no és necessària, però és divertida i útil.
Pas 1. Creeu el farciment i el repàs
Creeu un objecte d'estil de farciment i un color vermell semitransparent i un estil de traç (línia) que sigui una línia vermella contínua:
var fill = new ol.style. Fill ({color: [180, 0, 0, 0.3]}); var stroke = new ol.style. Stroke ({color: [180, 0, 0, 1], ample: 1});
Pas 2. Creeu l'estil i apliqueu-lo a la capa
L’objecte d’estil OpenLayers és força potent, però ara només definirem el farciment i el traç:
var style = new ol.style. Style ({imatge: new ol.style. Circle ({omplir: omplir, traç: traç, radi: 8}), omplir: omplir, traç: traç}); vector_layer.setStyle (estil);
