Aangepaste gegevens weergeven op een rasterkaart

  • Artikel
  • 5 minuten om te lezen

In dit artikel wordt beschreven hoe u de statische-afbeeldingsservice gebruikt met functionaliteit voor het samenstellen van afbeeldingen. Functionaliteit voor het samenstellen van afbeeldingen ondersteunt het ophalen van statische rastertegels die aangepaste gegevens bevatten.

Hier volgen enkele voorbeelden van aangepaste gegevens:

  • Aangepaste punaises
  • Labels
  • Geometrie-overlays

Tip

Als u een eenvoudige kaart op een webpagina wilt weergeven, is het vaak rendabeler om de Azure Kaarten Web SDK te gebruiken in plaats van de statische-afbeeldingsservice te gebruiken. De web-SDK maakt gebruik van kaarttegels; en tenzij de gebruiker de kaart pant en zoomt, genereren ze vaak slechts een fractie van een transactie per kaartbelasting. De Azure Kaarten web-SDK biedt opties voor het uitschakelen van pannen en zoomen. Daarnaast biedt de Azure Kaarten web-SDK een uitgebreidere set opties voor gegevensvisualisatie dan een statische kaartwebservice.

Vereisten

  1. Een Azure Maps-account maken
  2. Een primaire sleutel voor een abonnement verkrijgen, ook wel bekend als de primaire sleutel of de abonnementssleutel.

In dit artikel wordt de Postman-toepassing gebruikt, maar u kunt een andere API-ontwikkelomgeving gebruiken.

We gebruiken de Azure Kaarten Data Service-API's om overlays op te slaan en weer te geven.

Punaises met labels en een aangepaste afbeelding renderen

Notitie

Voor de procedure in deze sectie is een Azure Kaarten-account in de prijscategorie Gen 1 of Gen 2 vereist. De Standard S0 Kaarten laag van het Azure-account Gen 1 ondersteunt slechts één exemplaar van de pins parameter. Hiermee kunt u maximaal vijf punaises, opgegeven in de URL-aanvraag, renderen met een aangepaste afbeelding.

Statische afbeelding met aangepaste pinnen en labels

Een statische afbeelding met aangepaste pins en labels op te halen:

  1. Selecteer In de Postman-app de optie Nieuw.

  2. Selecteer in het venster Nieuwe maken de optie HTTP-aanvraag.

  3. Voer een aanvraagnaam in voor de aanvraag, zoals GET Static Image.

  4. Selecteer de HTTP-methode GET.

  5. Voer de volgende URL in (vervang { Your-Azure-Maps-Primary-Subscription-key} door uw primaire abonnementssleutel):

    https://atlas.microsoft.com/map/static/png?subscription-key={Your-Azure-Maps-Primary-Subscription-key}&api-version=1.0&layer=basic&style=main&zoom=12&center=-73.98,%2040.77&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27CentralPark%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fraw.githubusercontent.com%2FAzure-Samples%2FAzureMapsCodeSamples%2Fmaster%2FAzureMapsCodeSamples%2FCommon%2Fimages%2Ficons%2Fylw-pushpin.png

  6. Selecteer Verzenden.

  7. De service retourneert de volgende afbeelding:

    Een aangepaste punaise met een label.

Upload en padgegevens

Notitie

Voor de procedure in deze sectie is een Azure Kaarten Account Gen 1 (S1) of Gen 2-prijscategorie vereist.

In deze sectie uploaden we het pad en maken we gegevens vast aan Azure Map-gegevensopslag.

Pins en padgegevens uploaden:

  1. Selecteer In de Postman-app de optie Nieuw.

  2. Selecteer in het venster Nieuwe maken de optie HTTP-aanvraag.

  3. Voer een aanvraagnaam in voor de aanvraag, zoals POST-pad en Gegevens vastmaken.

  4. Selecteer de HTTP-methode POST.

  5. Voer de volgende URL in (vervang { Your-Azure-Maps-Primary-Subscription-key} door uw primaire abonnementssleutel):

    https://us.atlas.microsoft.com/mapData?subscription-key={Your-Azure-Maps-Primary-Subscription-key}&api-version=2.0&dataFormat=geojson

  6. Selecteer het tabblad Hoofdtekst.

  7. Selecteer raw en JSON in de vervolgkeuzelijsten.

  8. Kopieer de volgende JSON-gegevens als gegevens die moeten worden geüpload en plak deze in het venster Body:

    {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -73.98235,
              40.76799
            ],
            [
              -73.95785,
              40.80044
            ],
            [
              -73.94928,
              40.7968
            ],
            [
              -73.97317,
              40.76437
            ],
            [
              -73.98235,
              40.76799
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -73.97624731063843,
            40.76560773817073
          ],
          [
            -73.97914409637451,
            40.766826609362575
          ],
          [
            -73.98513078689575,
            40.7585866048861
          ]
        ]
      }
    }
  ]
}

  9. Selecteer Verzenden.

  10. Selecteer in het antwoordvenster het tabblad Headers.

  11. Kopieer de waarde van de sleutel Operation-Location. Dit is de status URL . We gebruiken de om status URL de status van de uploadaanvraag in de volgende sectie te controleren. De status URL heeft de volgende indeling:

https://us.atlas.microsoft.com/mapData/operations/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx?api-version=2.0

Tip

Gebruik de Data Upload-APIom uw eigen pad te verkrijgen en locatiegegevens vast te maken.

Pins en uploadstatus van padgegevens controleren

De status van het uploaden van gegevens controleren en de unieke id ophalen ( udid ):

  1. Selecteer In de Postman-app de optie Nieuw.

  2. Selecteer in het venster Nieuwe maken de optie HTTP-aanvraag.

  3. Voer een aanvraagnaam in voor de aanvraag, zoals GET Data Upload Status.

  4. Selecteer de HTTP-methode GET.

  5. Voer de status URL in die u hebt gekopieerd in Upload pincodes en padgegevens. De aanvraag moet er uitzien als de volgende URL (vervang { Your-Azure-Maps-Primary-Subscription-key} door uw primaire abonnementssleutel):

      https://us.atlas.microsoft.com/mapData/operations/{statusUrl}?api-version=2.0&subscription-key={Your-Azure-Maps-Primary-Subscription-key}

  6. Selecteer Verzenden.

  7. Selecteer in het antwoordvenster het tabblad Headers.

  8. Kopieer de waarde van de sleutel Resource-Location. Dit is de resource location URL . De resource location URL bevat de unieke id ( ) van de udid tekenpakketresource.

    Kopieer de URL van de resourcelocatie.

Geüploade functies weergeven op de kaart

De geüploade spelden en padgegevens weergeven op de kaart:

  1. Selecteer In de Postman-app de optie Nieuw.

  2. Selecteer in het venster Nieuwe maken de optie HTTP-aanvraag.

  3. Voer een aanvraagnaam in voor de aanvraag, zoals GET Data Upload Status.

  4. Selecteer de HTTP-methode GET.

  5. Voer de volgende URL naar de Render-service in (vervang { door uw primaire Your-Azure-Maps-Primary-Subscription-key} abonnementssleutel en udid door de van de udid geüploade gegevens):

    https://atlas.microsoft.com/map/static/png?subscription-key={Your-Azure-Maps-Primary-Subscription-key}&api-version=1.0&layer=basic&style=main&zoom=12&center=-73.96682739257812%2C40.78119135317995&pins=default|la-35+50|ls12|lc003C62|co9B2F15||'Times Square'-73.98516297340393 40.758781646381024|'Central Park'-73.96682739257812 40.78119135317995&path=lc0000FF|fc0000FF|lw3|la0.80|fa0.30||udid-{udId}

  6. De service retourneert de volgende afbeelding:

    Geüploade gegevens weergeven in een statische kaartafbeelding.

Een veelhoek met kleur en ondoorzichtigheid renderen

Notitie

Voor de procedure in deze sectie is een Azure Kaarten Account Gen 1 (S1) of Gen 2-prijscategorie vereist.

U kunt het uiterlijk van een veelhoek wijzigen met behulp van stijlparameters met de padparameter.

Een veelhoek met kleur en ondoorzichtigheid renderen:

  1. Selecteer In de Postman-app de optie Nieuw.

  2. Selecteer in het venster Nieuwe maken de optie HTTP-aanvraag.

  3. Voer een aanvraagnaam in voor de aanvraag, zoals GET Polygon.

  4. Selecteer de HTTP-methode GET.

  5. Voer de volgende URL naar de Render-service in (vervang { Your-Azure-Maps-Primary-Subscription-key} door uw primaire abonnementssleutel):

    https://atlas.microsoft.com/map/static/png?api-version=1.0&style=main&layer=basic&sku=S1&zoom=14&height=500&Width=500&center=-74.040701, 40.698666&path=lc0000FF|fc0000FF|lw3|la0.80|fa0.50||-74.03995513916016 40.70090237454063|-74.04082417488098 40.70028420372218|-74.04113531112671 40.70049568385827|-74.04298067092896 40.69899904076542|-74.04271245002747 40.69879568992435|-74.04367804527283 40.6980961582905|-74.04364585876465 40.698055487620714|-74.04368877410889 40.698022951066996|-74.04168248176573 40.696444909137|-74.03901100158691 40.69837271818651|-74.03824925422668 40.69837271818651|-74.03809905052185 40.69903971085914|-74.03771281242369 40.699340668780984|-74.03940796852112 40.70058515602143|-74.03948307037354 40.70052821920425|-74.03995513916016 40.70090237454063
&subscription-key={Your-Azure-Maps-Primary-Subscription-key}

  6. De service retourneert de volgende afbeelding:

    Geef een ondoorzichtige veelhoek weer.

Een cirkel en punaises met aangepaste labels renderen

Notitie

Voor de procedure in deze sectie is een Azure Kaarten Account Gen 1 (S1) of Gen 2-prijscategorie vereist.

U kunt het uiterlijk van de spelden wijzigen door stijlmodifiers toe te voegen. Als u bijvoorbeeld punaises en hun labels groter of kleiner wilt maken, gebruikt u de sc modifier 'schaalstijl'. Deze modifier neemt een waarde die groter is dan nul. De waarde 1 is de standaardschaal. Waarden die groter zijn dan 1 maken de spelden groter en waarden kleiner dan 1 maken ze kleiner. Zie parameters voor servicepaden voor statische afbeeldingen voor meer informatie over stijlparameters.

Een cirkel en punaises met aangepaste labels renderen:

  1. Selecteer In de Postman-app de optie Nieuw.

  2. Selecteer in het venster Nieuwe maken de optie HTTP-aanvraag.

  3. Voer een aanvraagnaam in voor de aanvraag, zoals GET Polygon.

  4. Selecteer de HTTP-methode GET.

  5. Voer de volgende URL naar de Render-service in (vervang { Your-Azure-Maps-Primary-Subscription-key} door uw primaire abonnementssleutel):

    https://atlas.microsoft.com/map/static/png?api-version=1.0&style=main&layer=basic&zoom=14&height=700&Width=700&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|al0.66|lc003C62|co002D62||'Microsoft Corporate Headquarters'-122.14131832122801  47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935  47.64452336193245&subscription-key={Your-Azure-Maps-Primary-Subscription-key}

  6. Selecteer Verzenden.

  7. De service retourneert de volgende afbeelding:

    Een cirkel met aangepaste punaises renderen.

  8. Nu gaan we de kleur van de punaises wijzigen door de co stijlwijzigingswijze te wijzigen. Als u de waarde van de parameter ( ) pins pins=default|la15+50|al0.66|lc003C62|co002D62| bekijkt, ziet u dat de huidige kleur #002D62 is. Als u de kleur wilt wijzigen #41d42a in , vervangt u door #002D62 #41d42a . De pins parameter is nu pins=default|la15+50|al0.66|lc003C62|co41D42A| . De aanvraag ziet eruit als de volgende URL:

    https://atlas.microsoft.com/map/static/png?api-version=1.0&style=main&layer=basic&zoom=14&height=700&Width=700&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|al0.66|lc003C62|co41D42A||'Microsoft Corporate Headquarters'-122.14131832122801  47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935  47.64452336193245&subscription-key={Your-Azure-Maps-Primary-Subscription-key}

  9. Selecteer Verzenden.

  10. De service retourneert de volgende afbeelding:

    Een cirkel met bijgewerkte punaises renderen.

Op dezelfde manier kunt u andere stijlmodifiers wijzigen, toevoegen en verwijderen.

Volgende stappen