OpenLayers er et kraftig JavaScript -verktøy som lar oss lage og vise alle slags kart på et nettsted. Denne artikkelen vil veilede deg i å legge til et punkt og en linjestreng -funksjon, deretter transformere anslagene til å bruke koordinater, og deretter legge til litt farge ved å angi lagets stil.
Vær oppmerksom på at du må ha et fungerende OpenLayers -kart installert på en webside for å følge denne artikkelen. Hvis du ikke har en, kan du se Hvordan lage et kart ved hjelp av OpenLayers 3.
Trinn
Del 1 av 3: Legge til punkt- og linjestrengfunksjoner
Trinn 1. Lag en punktfunksjon
Bare kopier følgende kodelinje til din
element:
var point_feature = ny ol. Feature ({});
Trinn 2. Angi punktets geometri
For å fortelle OpenLayers hvor du skal plassere punktet, må du lage en geometri og gi den et sett med koordinater, som er en matrise i form av [lengdegrad (E-W), breddegrad (N-S)]. Følgende kode oppretter dette og settet er punktets geometri:
var point_geom = nytt ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Trinn 3. Lag en linjestreng -funksjon
Linjestrenger er rette linjer brutt i segmenter. Vi lager dem akkurat som punkter, men vi gir et par koordinater for hvert punkt i linjestrengen:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Trinn 4. Legg til funksjonene i et vektorsjikt
For å legge til funksjonene på kartet, må du legge dem til en kilde, som du legger til i et vektorsjikt, som du deretter kan legge til på kartet:
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
Del 2 av 3: Transformere funksjonenes geometrier til å bruke koordinater
Som med all kraftig kartprogramvare kan OpenLayers -kart ha forskjellige lag med forskjellige måter å vise informasjon på. Fordi Jorden er en globus og ikke flat, når vi prøver å vise den på våre flate kart, må programvaren justere plasseringene for å matche det flate kartet. Disse forskjellige måtene å vise kartinformasjon kalles anslag. Å bruke et vektorsjikt og et fliselag på samme kart betyr at vi må transformere lagene fra en projeksjon til en annen.
Trinn 1. Sett funksjonene i en matrise
Vi starter med å sette funksjonene vi ønsker å transformere sammen til en matrise som vi kan iterere gjennom.
var features = [point_feature, linestring_feature];
Trinn 2. Skriv transformasjonsfunksjonen
I OpenLayers kan vi bruke transform () -funksjonen på geometriobjektet til hver funksjon. Sett denne transformasjonskoden til en funksjon som vi kan kalle senere:
funksjon transform_geometry (element) {var current_projection = ny ol.proj. Projection ({kode: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (current_projection, new_projection);); }
Trinn 3. Kall transformasjonsfunksjonen på funksjonene
Nå bare iterere gjennom matrisen.
features.forEach (transform_geometry);
Del 3 av 3: Angi stilen til vektorlaget
For å endre hvordan hver funksjon på kartet ser ut, må vi lage og bruke en stil. Stiler kan endre farger, størrelser og andre attributter for punkter og linjer, og de kan også vise bilder for hvert punkt, noe som er veldig nyttig for tilpassede kart. Denne delen er ikke nødvendig, men den er morsom og nyttig.
Trinn 1. Lag fyll og stoke
Lag et fyllstilobjekt og en halvgjennomsiktig rød farge, og en strek (linje) stil som er en solid rød linje:
var fill = new ol.style. Fill ({color: [180, 0, 0, 0.3]}); var slag = ny ol.stil. Slag ({farge: [180, 0, 0, 1], bredde: 1});
Trinn 2. Lag stilen og bruk den på laget
OpenLayers -stilobjektet er ganske kraftig, men vi skal bare angi fyll og slag for nå:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: fill, stroke: stroke, radius: 8}), fill: fill, stroke: stroke}); vector_layer.setStyle (stil);
