Een eenvoudige gegevenslaag toevoegen

Artikel
06/19/2023

De ruimtelijke IO-module biedt een SimpleDataLayer klasse. Met deze klasse kunt u eenvoudig vormgegeven functies weergeven op de kaart. 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 de eigenschappen zijn toegevoegd aan een ondersteunde bestandsindeling, kan het bestand voor verschillende doeleinden worden gebruikt. Het bestand kan bijvoorbeeld worden gebruikt om de gestileerde functies op de kaart weer te geven.

Naast stijlfuncties biedt de SimpleDataLayer een ingebouwde pop-upfunctie met een pop-upsjabloon. De pop-up wordt weergegeven wanneer op een functie wordt geklikt. 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 in 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 voor een functie weer te geven

Een eenvoudige gegevenslaag gebruiken

De SimpleDataLayer klasse wordt gebruikt zoals de andere renderinglagen worden gebruikt. 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);

In het volgende codefragment ziet u het gebruik van een eenvoudige gegevenslaag, 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.
    loadDataSet('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/use-simple-data-layer.json');

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

De URL die aan de loadDataSet functie is doorgegeven, verwijst naar de volgende json:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
    },
    "properties": {
        "color": "red"
    }
}

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

In de bovenstaande voorbeeldcode ziet u een GeoJSON-puntfunctie met een color eigenschap die is ingesteld op red.

Deze voorbeeldcode geeft de puntfunctie weer met behulp van de eenvoudige gegevenslaag en ziet er als volgt uit:

Een schermopname van een 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:

midden: [-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
Voor functies in de gegevensset zijn verschillende stijleigenschappen afzonderlijk ingesteld; Of
U weet niet zeker wat de gegevensset precies bevat.

Bij het parseren van XML-gegevensfeeds weet u bijvoorbeeld mogelijk niet de exacte stijlen en geometrietypen van de functies. Het voorbeeld met opties voor eenvoudige gegevenslagen toont de kracht van de eenvoudige gegevenslaag door de functies van een KML-bestand weer te geven. Het toont ook verschillende opties die de eenvoudige gegevenslaagklasse 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 een deelvenster aan de linkerkant met de verschillende eenvoudige gegevenslaagopties.

Notitie

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

Alle scripts, formulieren, aanwijzervergrendeling en bovenste navigatiefunctionaliteit zijn uitgeschakeld. Koppelingen mogen op een nieuw tabblad worden geopend wanneer erop wordt geklikt.
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 toegang hebben tot uw toepassing, 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: bel, symbool, lijn, veelhoek en geëxtrudeerde veelhoek. Vervolgens worden expressies gebruikt om te zoeken naar geldige stijleigenschappen voor afzonderlijke functies.

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

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

In de volgende secties vindt u meer informatie 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 bellaagstijl

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

Laagoptie	Ondersteunde eigenschapsnamen	Standaardwaarde
`color`	`color`, `marker-color`	`'#1A73AA'`
`radius`	`size`¹, `marker-size`², `scale`¹	`8`
`strokeColor`	`strokeColor`, `stroke`	`'#FFFFFF'`

[1] De size waarden en scale 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.

Grootte van markering	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	Kleur
>= 100	`red`
>= 10	`yellow`
< 10	`green`

Eigenschappen van symboolstijl

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

Laagoptie	Ondersteunde eigenschapsnamen	Standaardwaarde
`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 pictogramgrootte.

Grootte van markering	Grootte van symbool
`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, MultiLineString, Polygonof MultiPolygonis, wordt de functie weergegeven met een LineLayer.

Laagoptie	Ondersteunde eigenschapsnamen	Standaardwaarde
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`, `stroke-width`, `stroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

Eigenschappen van polygoonstijl

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

Laagoptie	Ondersteunde eigenschapsnamen	Standaardwaarde
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`fillOpacity`	`fillOpacity`, '`fill-opacity`	`0.5`

Eigenschappen van geëxtrudeerde veelhoekstijl

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