Een eenvoudige gegevenslaag toevoegen

Artikel
07/30/2024

De ruimtelijke IO-module biedt een SimpleDataLayer klasse. Met deze klasse kunt u eenvoudig gestijlde functies op de kaart weergeven. Het kan zelfs gegevenssets weergeven met stijleigenschappen en gegevenssets die gemengde geometrietypen bevatten. De eenvoudige gegevenslaag bereikt deze functionaliteit door meerdere renderinglagen te verpakken en stijlexpressies te gebruiken. De stijlexpressies zoeken naar algemene stijleigenschappen van de functies in deze verpakte lagen. De atlas.io.read functie en de atlas.io.write functie gebruiken deze eigenschappen om stijlen te lezen en te schrijven in een ondersteunde bestandsindeling. Nadat u de eigenschappen hebt toegevoegd aan een ondersteunde bestandsindeling, kan het bestand voor verschillende doeleinden worden gebruikt. Het bestand kan bijvoorbeeld worden gebruikt om de gestijlde functies op de kaart weer te geven.

Naast stijlfuncties biedt de SimpleDataLayer functie een ingebouwde pop-upfunctie met een pop-upsjabloon. Het pop-upvenster wordt weergegeven wanneer een functie is geselecteerd. De standaard pop-upfunctie kan desgewenst worden uitgeschakeld. Deze laag ondersteunt ook geclusterde gegevens. Wanneer op een cluster wordt geklikt, zoomt de kaart in op het cluster en wordt het uitgebreid naar afzonderlijke punten en subclusters.

De SimpleDataLayer klasse is bedoeld om te worden gebruikt voor grote gegevenssets met veel geometrietypen en veel stijlen die op de functies worden toegepast. Bij gebruik voegt deze klasse een overhead toe van zes lagen met stijlexpressies. Er zijn dus gevallen waarin het efficiënter is om de kernweergavelagen te gebruiken. Gebruik bijvoorbeeld een kernlaag om een aantal geometrietypen en een paar stijlen op een functie weer te geven

Een eenvoudige gegevenslaag gebruiken

De SimpleDataLayer klasse wordt gebruikt zoals de andere renderinglagen. De volgende code laat zien hoe u een eenvoudige gegevenslaag in een kaart gebruikt:

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a simple data layer for rendering data.
var layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);

Het volgende codefragment laat zien hoe u een eenvoudige gegevenslaag gebruikt, die verwijst naar de gegevens uit een onlinebron.

function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.967605, 40.780452],
    zoom: 12,
    view: "Auto",

    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      authType: 'subscriptionKey',
      subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
    },
  });    

  //Wait until the map resources are ready.
  map.events.add('ready', function () {

    //Create a data source and add it to the map.
    var datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Add a simple data layer for rendering data.
    var layer = new atlas.layer.SimpleDataLayer(datasource);
    map.layers.add(layer);

    //Load an initial data set.
    const dataSet = {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [0, 0]
        },
        "properties": {
            "color": "red"
        }
    };
    
    loadDataSet(dataSet);

    function loadDataSet(url) {
      //Read the spatial data and add it to the map.
      atlas.io.read(url).then(r => {
      if (r) {
        //Update the features in the data source.
        datasource.setShapes(r);

        //If bounding box information is known for data, set the map view to it.
        if (r.bbox) {
          map.setCamera({
            bounds: r.bbox,
            padding: 50
          });
        }
      }
      });
    }
  });
}

Zodra u functies aan de gegevensbron hebt toegevoegd, weet de eenvoudige gegevenslaag hoe u deze het beste kunt weergeven. Stijlen voor afzonderlijke functies kunnen worden ingesteld als eigenschappen voor de functie.

De bovenstaande voorbeeldcode toont een GeoJSON-puntfunctie met een color eigenschap ingesteld op red.

Deze voorbeeldcode geeft de puntfunctie weer met behulp van de eenvoudige gegevenslaag en wordt als volgt weergegeven:

Een schermopname van de kaart met coördinaten van 0, 0 met een rode stip boven blauw water, de rode stip is toegevoegd met behulp van de symboollaag.

Notitie

U ziet dat de coördinaten die zijn ingesteld toen de kaart werd geïnitialiseerd:

center: [-73.967605, 40.780452]

Worden overschreven door de waarde uit de gegevensbron:

"coördinaten": [0, 0]

De echte kracht van de eenvoudige gegevenslaag komt wanneer:

Er zijn verschillende typen functies in een gegevensbron; of
Functies in de gegevensset hebben verschillende stijleigenschappen afzonderlijk ingesteld; of
U weet niet zeker wat de gegevensset precies bevat.

Als u bijvoorbeeld XML-gegevensfeeds parseert, weet u mogelijk niet de exacte stijlen en geometrietypen van de functies. Het voorbeeld van opties voor eenvoudige gegevenslagen toont de kracht van de eenvoudige gegevenslaag door de functies van een KML-bestand weer te geven. Er worden ook verschillende opties gedemonstreert die de klasse eenvoudige gegevenslaag biedt. Zie Eenvoudige gegevenslaag options.html in de Azure Maps-codevoorbeelden in GitHub voor de broncode voor dit voorbeeld.

Een schermopname van de kaart met aan de linkerkant een deelvenster met de verschillende eenvoudige opties voor gegevenslagen.

Notitie

Deze eenvoudige gegevenslaag maakt gebruik van de pop-upsjabloonklasse om KML-ballonnen of functie-eigenschappen weer te geven als een tabel. Standaard wordt alle inhoud die in de pop-up wordt weergegeven, in de sandbox geplaatst in een iframe als beveiligingsfunctie. Er zijn echter beperkingen:

Alle scripts, formulieren, aanwijzervergrendeling en de bovenste navigatiefunctionaliteit zijn uitgeschakeld. Koppelingen kunnen worden geopend op een nieuw tabblad wanneer deze optie is geselecteerd.
Oudere browsers die de srcdoc parameter op iframes niet ondersteunen, worden beperkt tot het weergeven van een kleine hoeveelheid inhoud.

Als u de gegevens vertrouwt die in de pop-ups worden geladen en mogelijk wilt dat deze scripts in pop-ups worden geladen, kunt u dit uitschakelen door de optie pop-upsjablonen sandboxContent in te stellen op onwaar.

Standaard ondersteunde stijleigenschappen

Zoals eerder vermeld, verpakt de eenvoudige gegevenslaag verschillende kernweergavelagen: bellen, symbool, lijn, veelhoek en geëxtrudeerde veelhoek. Vervolgens worden expressies gebruikt om te zoeken naar geldige stijleigenschappen voor afzonderlijke functies.

Eigenschappen van Azure Maps en GitHub zijn de twee hoofdsets met ondersteunde eigenschapsnamen. De meeste eigenschapsnamen van de verschillende azure maps-laagopties worden ondersteund als stijleigenschappen van functies in de eenvoudige gegevenslaag. Expressies zijn toegevoegd aan sommige laagopties ter ondersteuning van stijleigenschapsnamen die vaak door GitHub worden gebruikt. De ondersteuning voor GeoJSON-kaarten van GitHub definieert deze eigenschapsnamen en ze worden gebruikt om GeoJSON-bestanden te stylen die zijn opgeslagen en weergegeven binnen het platform. Alle stijleigenschappen van GitHub worden ondersteund in de eenvoudige gegevenslaag, met uitzondering van de marker-symbol stijleigenschappen.

Als de lezer een minder gangbare stijleigenschap tegenkomt, wordt deze geconverteerd naar de dichtstbijzijnde stijleigenschap van Azure Maps. Daarnaast kunnen de standaardstijlexpressies worden overschreven door de getLayers functie van de eenvoudige gegevenslaag te gebruiken en de opties op een van de lagen bij te werken.

De volgende secties bevatten details over de standaardstijleigenschappen die worden ondersteund door de eenvoudige gegevenslaag. De volgorde van de naam van de ondersteunde eigenschap is ook de prioriteit van de eigenschap. Als er twee stijleigenschappen zijn gedefinieerd voor dezelfde laagoptie, heeft de eerste in de lijst een hogere prioriteit. Kleuren kunnen elke CSS3-kleurwaarde zijn; HEX, RGB, RGBA, HSL, HSLA of benoemde kleurwaarde.

Eigenschappen van stijl voor bellenlaag

Als een functie een Point of a MultiPointis en de functie geen eigenschap heeft image die als een aangepast pictogram wordt gebruikt om het punt weer te geven als een symbool, wordt de functie weergegeven met een BubbleLayer.

Laagoptie	Ondersteunde eigenschapsnaam(en)	Default value
`color`	`color`, `marker-color`	`'#1A73AA'`
`radius`	`size`¹, `marker-size`², `scale`¹	`8`
`strokeColor`	`strokeColor`, `stroke`	`'#FFFFFF'`

[1] De size en scale waarden worden beschouwd als scalaire waarden en worden vermenigvuldigd met 8

[2] Als de GitHub-optie marker-size is opgegeven, worden de volgende waarden gebruikt voor de radius.

Markeringsgrootte	Radius
`small`	`6`
`medium`	`8`
`large`	`12`

Clusters worden ook weergegeven met behulp van de bellenlaag. De radius van een cluster is standaard ingesteld op 16. De kleur van het cluster varieert, afhankelijk van het aantal punten in het cluster, zoals gedefinieerd in de volgende tabel:

Aantal punten	Color
>= 100	`red`
>= 10	`yellow`
< 10	`green`

Eigenschappen van symboolstijl

Als een functie een Point of a MultiPointis en de functie en een image eigenschap heeft die wordt gebruikt als een aangepast pictogram om het punt weer te geven als een symbool, wordt de functie weergegeven met een SymbolLayer.

Laagoptie	Ondersteunde eigenschapsnaam(en)	Default value
`image`	`image`	`none`
`size`	`size`, `marker-size`¹	`1`
`rotation`	`rotation`	`0`
`offset`	`offset`	`[0, 0]`
`anchor`	`anchor`	`'bottom'`

[1] Als de GitHub-optie marker-size is opgegeven, worden de volgende waarden gebruikt voor de optie voor pictogramgrootte.

Markeringsgrootte	Symboolgrootte
`small`	`0.5`
`medium`	`1`
`large`	`2`

Als de puntfunctie een cluster is, wordt de point_count_abbreviated eigenschap weergegeven als een tekstlabel. Er wordt geen afbeelding weergegeven.

Eigenschappen van lijnstijl

Als de functie een LineString, MultiLineStringof PolygonMultiPolygon, of , is, wordt de functie weergegeven met een LineLayer.

Laagoptie	Ondersteunde eigenschapsnaam(en)	Default value
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`, , `stroke-widthstroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

Eigenschappen van veelhoekstijl

Als de functie een Polygon of a MultiPolygonis en de functie geen eigenschap heeft height of als de height eigenschap nul is, wordt de functie weergegeven met een PolygonLayer.

Laagoptie	Ondersteunde eigenschapsnaam(en)	Default value
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`fillOpacity`	`fillOpacity`, '`fill-opacity`	`0.5`

Eigenschappen van geëxtrudeerde veelhoekstijl

Als de functie een of a MultiPolygonis en een height eigenschap heeft met een waarde die groter is dan nul, wordt de functie weergegeven met een PolygonExtrusionLayer.Polygon