Een veelhoeklaag toevoegen aan de kaart

Artikel
07/07/2023

In dit artikel wordt beschreven hoe u de gebieden van en MultiPolygon geometrieën op de kaart kunt weergeven met behulp van Polygon een polygoonlaag. De Azure Maps Web SDK ondersteunt ook het maken van cirkelgeometrieën zoals gedefinieerd in het uitgebreide GeoJSON-schema. Deze cirkels worden omgezet in veelhoeken wanneer ze op de kaart worden weergegeven. Alle functiegeometrieën kunnen eenvoudig worden bijgewerkt wanneer ze worden verpakt met de atlas. Shapeklasse .

Een veelhoeklaag gebruiken

Wanneer een veelhoeklaag is verbonden met een gegevensbron en op de kaart wordt geladen, wordt het gebied weergegeven met Polygon en-functies MultiPolygon . Als u een veelhoek wilt maken, voegt u deze toe aan een gegevensbron en geeft u deze weer met een veelhoeklaag met behulp van de klasse PolygonLayer .

De volgende voorbeeldcode demonstreert het maken van een veelhoeklaag die het Central Park van New York City bedekt met een rode veelhoek.

 
function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.97, 40.78],
    zoom: 11,
    view: "Auto",
    
    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      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);

    /*Create a rectangle*/
    dataSource.add(new atlas.Shape(new atlas.data.Feature(
    new atlas.data.Polygon([[
      [-73.98235, 40.76799],
      [-73.95785, 40.80044],
      [-73.94928, 40.7968],
      [-73.97317, 40.76437],
      [-73.98235, 40.76799]
    ]])
    )));

    /*Create and add a polygon layer to render the polygon to the map*/
    map.layers.add(new atlas.layer.PolygonLayer(dataSource, null,{
    fillColor: "red",
    fillOpacity: 0.7
    }), 'labels')
  });
}

Een schermopname van de kaart van New York City waarin de polygoonlaag wordt gedemonstreerd die Central Park bedekt met opvulkleur ingesteld op rood en opvulling dekking ingesteld op 0,7.

Een veelhoek en een lijnlaag samen gebruiken

Een lijnlaag wordt gebruikt om de omtrek van veelhoeken weer te geven. In het volgende codevoorbeeld wordt een veelhoek weergegeven zoals in het vorige voorbeeld, maar wordt nu een lijnlaag toegevoegd. Deze lijnlaag is een tweede laag die is verbonden met de gegevensbron.

function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.97, 40.78],
    zoom: 11,
    view: "Auto",
    
    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      authType: 'subscriptionKey',
      subscriptionKey: '{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);

    /*Create a rectangle*/
    dataSource.add(new atlas.data.Polygon([[
    [-73.98235, 40.76799],
    [-73.95785, 40.80045],
    [-73.94928, 40.7968],
    [-73.97317, 40.76437],
    [-73.98235, 40.76799]
    ]])
          );

    //Create a polygon layer to render the filled in area of the polygon.
    var polygonLayer = new atlas.layer.PolygonLayer(dataSource, 'myPolygonLayer', {
    fillColor: 'rgba(0, 200, 200, 0.5)'
    });

    //Create a line layer for greater control of rendering the outline of the polygon.
    var lineLayer = new atlas.layer.LineLayer(dataSource, 'myLineLayer', {
    strokeColor: 'red',
    strokeWidth: 2
    });

    /*Create and add a polygon layer to render the polygon to the map*/
    map.layers.add([polygonLayer, lineLayer])
  });
}

Een schermopname van een kaart van New York City die een meestal transparante veelhoeklaag laat zien die heel Central Park bedekt, omzoomd met een rode lijn.

Een veelhoek vullen met een patroon

Naast het vullen van een veelhoek met een kleur, kunt u een afbeeldingspatroon gebruiken om de veelhoek op te vullen. Laad een afbeeldingspatroon in de resources van de kaartafbeeldingsspite en verwijs vervolgens naar deze afbeelding met de fillPattern eigenschap van de polygoonlaag.

Voor een volledig functioneel voorbeeld dat laat zien hoe u een afbeeldingssjabloon gebruikt als opvulpatroon in een polygoonlaag, raadpleegt u Opvulveelhoek met ingebouwde pictogramsjabloon in de Azure Maps Voorbeelden. Zie Voor de broncode voor dit voorbeeld, veelhoek vullen met ingebouwde pictogramsjabloon broncode.

Tip

De Azure Maps web-SDK biedt verschillende aanpasbare afbeeldingssjablonen die u als opvulpatronen kunt gebruiken. Zie het document Afbeeldingssjablonen gebruiken voor meer informatie.

Een veelhoeklaag aanpassen

De laag Polygon heeft slechts enkele stijlopties. Zie de kaart Met opties voor polygoonlagen in de Azure Maps Voorbeelden om ze uit te proberen. Zie Broncode van polygoonlaagopties voor de broncode voor dit voorbeeld.

Een schermopname van het hulpmiddel Opties voor polygoonlagen.

Een cirkel toevoegen aan de kaart

Azure Maps maakt gebruik van een uitgebreide versie van het GeoJSON-schema die een definitie biedt voor cirkels. Een cirkel wordt weergegeven op de kaart door een Point functie te maken. Dit Point heeft een subType eigenschap met een waarde van "Circle" en een radius eigenschap met een getal dat de straal in meters aangeeft.

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-122.126986, 47.639754]
    },
    "properties": {
        "subType": "Circle",
        "radius": 100
    }
}

De Azure Maps Web SDK converteert deze Point functies naar Polygon functies. Vervolgens worden deze functies weergegeven op de kaart met behulp van polygoon- en lijnlagen, zoals wordt weergegeven in het volgende codevoorbeeld.

function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.985708, 40.75773],
    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);

    //Create a circle
    dataSource.add(new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]), 
    {
      subType: "Circle",
      radius: 1000
    }));

    // Create a polygon layer to render the filled in area
    // of the circle polygon, and add it to the map.
    map.layers.add(new atlas.layer.PolygonLayer   (dataSource, null, {
      fillColor: 'rgba(0, 200, 200, 0.8)'
    }));
  });
}

Een schermopname van een kaart met een gedeeltelijk transparante groene cirkel in New York City. Dit demonstreert het toevoegen van een cirkel aan een kaart.

Een geometrie eenvoudig bij te werken maken

Een Shape klasse verpakt een geometrie of functie en maakt het eenvoudig om deze functies bij te werken en te onderhouden. Als u een vormvariabele wilt instantiëren, geeft u een geometrie of een set eigenschappen door aan de shapeconstructor.

//Creating a shape by passing in a geometry and a object containing properties.
var shape1 = new atlas.Shape(new atlas.data.Point[0,0], { myProperty: 1 });

//Creating a shape using a feature.
var shape2 = new atlas.Shape(new atlas.data.Feature(new atlas.data.Point[0,0], { myProperty: 1 });

Het voorbeeld Een geometrie eenvoudig bijwerken maken laat zien hoe u een GeoJSON-object met een cirkel kunt verpakken met een shapeklasse. Als de waarde van de straal in de vorm verandert, wordt de cirkel automatisch weergegeven op de kaart. Zie Een geometrie eenvoudig maken om broncode bij te werken voor de broncode voor dit voorbeeld.

Een schermafbeelding van een kaart met een rode cirkel in New York City met een schuifregelaar met de naam Cirkelstraal. Wanneer u de balk naar rechts of links schuift, verandert de waarde van de radius en wordt de cirkelgrootte automatisch aangepast op de kaart.