Vectorfuncties toevoegen aan een OpenLayers 3-kaart (met afbeeldingen)

Inhoudsopgave:

Vectorfuncties toevoegen aan een OpenLayers 3-kaart (met afbeeldingen)
Vectorfuncties toevoegen aan een OpenLayers 3-kaart (met afbeeldingen)

Video: Vectorfuncties toevoegen aan een OpenLayers 3-kaart (met afbeeldingen)

Video: Vectorfuncties toevoegen aan een OpenLayers 3-kaart (met afbeeldingen)
Video: Solved:This sign-in option is disabled because of failed sign-in attempts or repeated shutdowns.#yt 2024, Maart
Anonim

OpenLayers is een krachtige JavaScript-tool waarmee we allerlei soorten kaarten op een website kunnen maken en weergeven. Dit artikel zal u begeleiden bij het toevoegen van een punt en een lijntekenreeks, vervolgens hun projecties transformeren om coördinaten te gebruiken en vervolgens wat kleur toevoegen door de stijl van de laag in te stellen.

Houd er rekening mee dat u een werkende OpenLayers-kaart op een webpagina moet hebben geïnstalleerd om dit artikel te kunnen volgen. Als je er geen hebt, zie Hoe maak je een kaart met OpenLayers 3.

Stappen

Deel 1 van 3: Punt- en lijnstringfuncties toevoegen

Stap 1. Maak een puntfunctie aan

Kopieer eenvoudig de volgende regel code naar uw

element:

var point_feature = nieuwe ol. Feature({ });

Stap 2. Stel de geometrie van het punt in

Om OpenLayers te vertellen waar het punt moet worden geplaatst, moet u een geometrie maken en deze een reeks coördinaten geven, wat een array is in de vorm van [lengtegraad (E-W), breedtegraad (N-S)]. De volgende code maakt dit en stelt de geometrie van het punt in:

var point_geom = nieuw ol.geom. Point([20, 20]); point_feature.setGeometry (point_geom);

Stap 3. Maak een lijnstringfunctie

Lijnstrings zijn rechte lijnen die in segmenten zijn opgedeeld. We creëren ze net als punten, maar we geven een paar coördinaten voor elk punt van de lijnreeks:

var linestring_feature = nieuwe ol. Feature({ geometrie: nieuwe ol.geom. LineString(

Stap 4. Voeg de objecten toe aan een vectorlaag

Om de objecten aan de kaart toe te voegen, moet u ze toevoegen aan een bron, die u toevoegt aan een vectorlaag, die u vervolgens aan de kaart kunt toevoegen:

var vector_layer = nieuwe ol.layer. Vector({ source: new ol.source. Vector({ features: [point_feature, linestring_feature] }) }) map.addLayer(vector_layer);

Deel 2 van 3: Transformatie van de geometrieën van de functies om coördinaten te gebruiken

Zoals met elke krachtige kaartsoftware, kunnen OpenLayers-kaarten verschillende lagen hebben met verschillende manieren om informatie weer te geven. Omdat de aarde een wereldbol is en niet plat, moet de software, wanneer we deze op onze platte kaarten proberen weer te geven, de locaties aanpassen aan de platte kaart. Deze verschillende manieren om kaartinformatie weer te geven heten projecties. Om een vectorlaag en een tegellaag samen op dezelfde kaart te gebruiken, moeten we de lagen van de ene projectie naar de andere transformeren.

Stap 1. Zet de features in een array

We beginnen met het samenvoegen van de functies die we willen transformeren in een array waar we iteratief doorheen kunnen.

var features = [point_feature, linestring_feature];

Stap 2. Schrijf de transformatiefunctie

In OpenLayers kunnen we de functie transform() gebruiken op het geometrie-object van elk object. Zet deze transformatiecode in een functie die we later kunnen aanroepen:

functie transform_geometry(element) { var current_projection = new ol.proj. Projection({code: "EPSG:4326"}); var new_projection = tile_layer.getSource().getProjection(); element.getGeometry().transform(huidige_projectie, nieuwe_projectie);); }

Stap 3. Roep de transformatiefunctie aan op de features

Herhaal nu eenvoudig de array.

features.forEach(transform_geometry);

Deel 3 van 3: De stijl van de vectorlaag instellen

Om te veranderen hoe elk kenmerk op de kaart eruitziet, moeten we een stijl maken en toepassen. Stijlen kunnen kleuren, afmetingen en andere attributen van punten en lijnen veranderen, en ze kunnen ook afbeeldingen weergeven voor elk punt, wat erg handig is voor aangepaste kaarten. Dit gedeelte is niet nodig, maar het is leuk en nuttig.

Stap 1. Maak de vulling en stoke

Maak een opvulstijlobject en een semi-transparante rode kleur, en een lijnstijl (lijn) die een ononderbroken rode lijn is:

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

Stap 2. Maak de stijl en pas deze toe op de laag

Het stijlobject OpenLayers is behoorlijk krachtig, maar we gaan nu alleen de vulling en lijn instellen:

var style = new ol.style. Style({ image: new ol.style. Circle({ fill: fill, stroke: stroke, radius: 8 }), fill: fill, stroke: stroke }); vector_layer.setStyle(stijl);

Aanbevolen: