OpenLayers er et kraftfuldt JavaScript -værktøj, der gør det muligt for os at oprette og vise alle slags kort på et websted. Denne artikel vil guide dig til at tilføje et punkt og en linjestrengsfunktion, derefter transformere deres fremskrivninger til at bruge koordinater og derefter tilføje lidt farve ved at indstille lagets stil.
Bemærk, at du skal have et fungerende OpenLayers -kort installeret på en webside for at følge denne artikel. Se Sådan laver du et kort ved hjælp af OpenLayers 3, hvis du ikke har et.
Trin
Del 1 af 3: Tilføjelse af punkt- og linjestrengsfunktioner
Trin 1. Opret en punktfunktion
Du skal blot kopiere følgende kodelinje til din
element:
var point_feature = ny ol. Feature ({});
Trin 2. Indstil punktets geometri
For at fortælle OpenLayers, hvor punktet skal placeres, skal du oprette en geometri og give den et sæt koordinater, som er en matrix i form af [længdegrad (E-W), breddegrad (N-S)]. Følgende kode opretter dette og sætter punktets geometri:
var point_geom = ny ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Trin 3. Opret en linjestrengsfunktion
Linjestrenge er lige linjer opdelt i segmenter. Vi opretter dem ligesom punkter, men vi leverer et par koordinater til hvert punkt i linjestrengen:
var linestring_feature = new ol. Feature ({geometry: new ol.geom. LineString (
Trin 4. Føj funktionerne til et vektorlag
For at tilføje funktionerne til kortet skal du føje dem til en kilde, som du tilføjer til et vektorlag, som du derefter kan tilføje til kortet:
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
Del 2 af 3: Omdannelse af funktionernes geometrier til brug af koordinater
Som med enhver kraftfuld kortlægningssoftware kan OpenLayers -kort have forskellige lag med forskellige måder at vise information på. Fordi Jorden er en globus og ikke flad, når softwaren forsøger at vise den på vores flade kort, skal softwaren justere placeringen, så den matcher det flade kort. Disse forskellige måder at vise kortoplysninger på kaldes fremskrivninger. At bruge et vektorlag og et fliselag på samme kort betyder, at vi er nødt til at transformere lagene fra en projektion til en anden.
Trin 1. Sæt funktionerne i et array
Vi starter med at sammensætte de funktioner, vi ønsker at omdanne, til et array, som vi kan iterere igennem.
var features = [point_feature, linestring_feature];
Trin 2. Skriv transformationsfunktionen
I OpenLayers kan vi bruge funktionen transform () på geometriobjektet for hver funktion. Sæt denne transformationskode i en funktion, som vi senere kan kalde:
funktion 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);); }
Trin 3. Kald transformeringsfunktionen til funktionerne
Nu gentages det simpelthen gennem arrayet.
features.forEach (transform_geometry);
Del 3 af 3: Indstilling af vektorlagets stil
For at ændre hvordan hver funktion på kortet ser ud, skal vi oprette og anvende en stil. Stilarter kan ændre farver, størrelser og andre attributter for punkter og linjer, og de kan også vise billeder for hvert punkt, hvilket er meget praktisk til tilpassede kort. Dette afsnit er ikke nødvendigt, men det er sjovt og nyttigt.
Trin 1. Opret fyld og stok
Opret et fyldstilobjekt og en halvgennemsigtig rød farve og en streg (linje) stil, der er en solid rød linje:
var fill = new ol.style. Fill ({color: [180, 0, 0, 0.3]}); var slag = ny ol.style. Stroke ({farve: [180, 0, 0, 1], bredde: 1});
Trin 2. Opret stilen og anvend den på laget
OpenLayers -stilobjektet er ret kraftfuldt, men vi vil kun indstille fyld og slag for nu:
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);