Sådan tilføjes vektorfunktioner til et OpenLayers 3 -kort (med billeder)

Indholdsfortegnelse:

Sådan tilføjes vektorfunktioner til et OpenLayers 3 -kort (med billeder)
Sådan tilføjes vektorfunktioner til et OpenLayers 3 -kort (med billeder)

Video: Sådan tilføjes vektorfunktioner til et OpenLayers 3 -kort (med billeder)

Video: Sådan tilføjes vektorfunktioner til et OpenLayers 3 -kort (med billeder)
Video: Введение в создание правил брандмауэра SMB с использованием устройств безопасности с открытым исходным кодом. 2024, Marts
Anonim

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);

Anbefalede: