Aggiungere un livello di estrusione poligono alla mappa

Questo articolo illustra come usare il livello di estrusione poligono per eseguire il rendering delle aree e Polygon MultiPolygon delle geometrie delle caratteristiche come forme estruse. L'SDK Web di Mappe di Azure supporta il rendering delle geometrie Circle come definito nello schema GeoJSON esteso. Questi cerchi possono essere trasformati in poligoni durante il rendering sulla mappa. Tutte le geometrie delle caratteristiche possono essere aggiornate facilmente quando vengono avvolte con l'atlas . Classe Shape .

Usare un livello di estrusione poligono

Connessione il livello di estrusione poligono a un'origine dati. Quindi, l'ha caricata sulla mappa. Il livello di estrusione poligono esegue il rendering delle aree di un Polygon oggetto e MultiPolygon come forme estruse. Le height proprietà e base del livello di estrusione poligono definiscono la distanza di base dal terreno e dall'altezza della forma estrusa in metri. Il codice seguente illustra come creare un poligono, aggiungerlo a un'origine dati ed eseguirne il rendering usando la classe del livello di estrusione Polygon.

Nota

Il base valore definito nel livello di estrusione poligono deve essere minore o uguale a quello di height.

var map, datasource, polygonLayer;

function InitMap()
{
  map = new atlas.Map('myMap', {
    center: [-73.985708, 40.75773],
    zoom: 12,
    //Pitch the map so that the extrusion of the polygons is visible.
    pitch: 45,
    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}'
    },
    styleDefinitionsVersion: "2023-01-01"
  });

  //Wait until the map resources are ready.
  map.events.add('ready', function () {
    /*Create a data source and add it to the map*/
    datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    datasource.add(new atlas.data.Polygon([
      [
        [
        -73.95838379859924,
        40.80027995478159
        ],
        [
        -73.98154735565186,
        40.76845986171129
        ],
        [
        -73.98124694824219,
        40.767761062136955
        ],
        [
        -73.97361874580382,
        40.76461637311633
        ],
        [
        -73.97306084632874,
        40.76512830937617
        ],
        [
        -73.97259950637817,
        40.76490890860481
        ],
        [
        -73.9494466781616,
        40.79658450499243
        ],
        [
        -73.94966125488281,
        40.79708807289436
        ],
        [
        -73.95781517028809,
        40.80052360358227
        ],
        [
        -73.95838379859924,
        40.80027995478159
        ]
      ]
    ]));

    //Create and add a polygon extrusion layer to the map below the labels so that they are still readable.
    map.layers.add(new atlas.layer.PolygonExtrusionLayer(datasource, null, {
      fillColor: "#fc0303",
      fillOpacity: 0.7,
      height: 500
      }), "labels");
  });
}

Aggiungere poligoni basati sui dati

È possibile eseguire il rendering di una mappa choropleth usando il livello di estrusione poligono. Impostare le height proprietà e fillColor del livello di estrusione sulla misura della variabile statistica nelle geometrie delle Polygon caratteristiche e MultiPolygon .

L'esempio Create a Choropleth Map mostra una mappa choropleth estrusa del Stati Uniti in base alla misurazione della densità della popolazione in base allo stato. Per il codice sorgente per questo esempio, vedere Creare un codice sorgente della mappa Choropleth.

Aggiungere un cerchio alla mappa

Mappe di Azure usa una versione estesa dello schema GeoJSON che fornisce una definizione per i cerchi. È possibile eseguire il rendering di un cerchio estruso sulla mappa creando una point caratteristica con una subType proprietà di Circle e una proprietà numerata Radius che rappresenta il raggio in metri. Ad esempio:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-105.203135, 39.664087]
    },
    "properties": {
        "subType": "Circle",
        "radius": 1000
    }
} 

L'SDK Web Mappe di Azure converte queste Point funzionalità in Polygon funzionalità sotto le quinte. È possibile eseguire il rendering di queste Point funzionalità sulla mappa usando il livello di estrusione poligono, come illustrato nell'esempio di codice seguente.

var map, datasource;

function InitMap()
{
  map = new atlas.Map('myMap', {
    center: [-105.2, 39.7],
    zoom: 10.5,
    pitch: 60,
    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*/
    datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    datasource.add(new atlas.data.Feature(new atlas.data.Point([-105.2, 39.7]), {
      subType: "Circle",
      radius: 1000
    }));


    /*Create and add a polygon Extrusion layer to render the extruded polygon to the map*/
    map.layers.add(new atlas.layer.PolygonExtrusionLayer(datasource, null, {
      base: 5000,
      fillColor: "#02fae1",
      fillOpacity: 0.7,
      height: 5500
    }));
  });
}

Personalizzare un livello di estrusione poligono

Il livello Estrusione poligono include diverse opzioni di stile. L'esempio Opzioni livello estrusione poligono è uno strumento per provarli. Per il codice sorgente per questo esempio, vedere Codice sorgente Opzioni livello estrusione poligono.

Passaggi successivi

Per altre informazioni sulle classi e sui metodi usati in questo articolo, vedere:

Polygon

Livello di estrusione poligono

Altre risorse:

Estensione della specifica GeoJSON di Mappe di Azure