OpenLayers är ett kraftfullt JavaScript -verktyg som gör att vi kan skapa och visa alla möjliga kartor på en webbplats. Den här artikeln hjälper dig att lägga till en punkt och en radsträngsfunktion, sedan omvandla deras prognoser till att använda koordinater, lägg sedan till lite färg genom att ställa in lagrets stil.
Observera att du måste ha en fungerande OpenLayers -karta installerad på en webbsida för att följa den här artikeln. Om du inte har en, se Hur man gör en karta med OpenLayers 3.
Steg
Del 1 av 3: Lägga till punkt och linje sträng funktioner
Steg 1. Skapa en punktfunktion
Kopiera bara följande kodrad till din
element:
var point_feature = ny ol. Feature ({});
Steg 2. Ställ in punktens geometri
För att berätta för OpenLayers var punkten ska placeras måste du skapa en geometri och ge den en uppsättning koordinater, som är en matris i form av [longitud (E-W), latitud (N-S)]. Följande kod skapar detta och ställer in punktens geometri:
var point_geom = ny ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Steg 3. Skapa en radsträngsfunktion
Linjesträngar är raka linjer uppdelade i segment. Vi skapar dem precis som punkter, men vi tillhandahåller ett par koordinater för varje punkt i radsträngen:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Steg 4. Lägg till funktionerna i ett vektorlager
För att lägga till funktionerna på kartan måste du lägga till dem i en källa, som du lägger till i ett vektorgikt, som du sedan kan lägga till på kartan:
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: Transformera funktionernas geometrier för att använda koordinater
Som med alla kraftfulla kartprogram kan OpenLayers -kartor ha olika lager med olika sätt att visa information. Eftersom Jorden är en jordglob och inte platt, måste programvaran justera platserna för att matcha den platta kartan när vi försöker visa den på våra platta kartor. Dessa olika sätt att visa kartinformation kallas projektioner. Att använda ett vektorlager och ett bricklager tillsammans på samma karta betyder att vi måste omvandla lagren från en projektion till en annan.
Steg 1. Sätt in funktionerna i en array
Vi börjar med att sätta ihop de funktioner vi vill omvandla till en matris som vi kan iterera genom.
var features = [point_feature, linestring_feature];
Steg 2. Skriv transformeringsfunktionen
I OpenLayers kan vi använda funktionen transform () på geometriobjektet för varje funktion. Sätt in denna omvandlingskod i en funktion som vi kan ringa senare:
funktion transform_geometry (element) {var current_projection = new ol.proj. Projection ({kod: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (current_projection, new_projection);); }
Steg 3. Anropa transform -funktionen till funktionerna
Nu iterera helt enkelt genom matrisen.
features.forEach (transform_geometry);
Del 3 av 3: Ställa in vektorlagerets stil
För att ändra hur varje funktion på kartan ser ut måste vi skapa och tillämpa en stil. Stilar kan ändra färger, storlekar och andra attribut för punkter och linjer, och de kan också visa bilder för varje punkt, vilket är mycket praktiskt för anpassade kartor. Det här avsnittet är inte nödvändigt, men det är roligt och användbart.
Steg 1. Skapa fyllningen och stoken
Skapa ett fyllstil-objekt och en halvtransparent röd färg och en streck (linje) stil som är en solid röd linje:
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});
Steg 2. Skapa stilen och applicera den på lagret
OpenLayers -stilobjektet är ganska kraftfullt, men vi kommer bara att ställa in fyllningen och stroke för tillfället:
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);
