Přidání polygonové vrstvy do mapy

V tomto článku se dozvíte, jak vykreslit oblasti na mapě pomocí vrstvy mnohoúhelníků pro geometrické útvary Polygon a MultiPolygon. Webová sada SDK služby Azure Maps také podporuje vytváření geometrií kruh definovaných v rozšířeném schématu GeoJSON. Tyto kruhy se při vykreslení na mapě transformují na mnohoúhelníky. Všechny geometrie prvků lze snadno aktualizovat, když jsou zabaleny pomocí třídy atlas.Shape.

Použití vrstvy mnohoúhelníku

Když je mnohoúhelníková vrstva připojená ke zdroji dat a načtená na mapě, vykreslí oblast s prvky Polygon a MultiPolygon. Pokud chcete vytvořit mnohoúhelník, přidejte ho do zdroje dat a vykreslujte ho pomocí polygonové vrstvy pomocí třídy PolygonLayer .

Následující ukázkový kód ukazuje vytvoření polygonové vrstvy, která pokrývá Centrální park New Yorku červeným mnohoúhelníkem.

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

Použijte společně mnohoúhelníkovou a liniovou vrstvu

Vrstva čáry slouží k vykreslení obrysu mnohoúhelníku. Následující ukázka kódu vykreslí mnohoúhelník jako v předchozím příkladu, ale teď přidá vrstvu řádku. Tato vrstva linie je druhá vrstva připojená ke zdroji dat.

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

Vyplnění mnohoúhelníku vzorem

Kromě vyplnění mnohoúhelníku barvou můžete k vyplnění mnohoúhelníku použít vzor obrázku. Načtěte vzor obrázku do obrazů sprite mapy a poté na tento obrázek odkazujte vlastností fillPattern polygonové vrstvy.

Plně funkční ukázku, která ukazuje, jak použít šablonu ikony jako vzor výplně ve vrstvě mnohoúhelníku, najdete v tématu Vyplnění mnohoúhelníku pomocí vestavěné ikony v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku najdete v Vyplnění mnohoúhelníku pomocí zdrojového kódu integrované ikony.

Tip

Sada Azure Maps Web SDK poskytuje několik přizpůsobitelných šablon obrázků, které můžete použít jako vzory výplně. Další informace najdete v tématu Jak používat dokument šablon obrázků .

Přizpůsobit vrstvu mnohoúhelníků

Polygonová vrstva má pouze několik možností stylu. Podívejte se na ukázkovou mapu Polygon Layer Options v Ukázky Azure Maps a vyzkoušejte si ji. Zdrojový kód pro tuto ukázku najdete v Polygon Layer Options source code.

Přidání kruhu do mapy

Azure Maps používá rozšířenou verzi schématu GeoJSON, která poskytuje definici kruhů. Kruh se na mapě vykreslí vytvořením Point funkce. Tento Point má vlastnost subType s hodnotou "Circle" a vlastnost radius s číslem, které představuje poloměr v metrech.

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

Sada webového SDK Azure Maps převádí tyto Point prvky na Polygon prvky. Tyto funkce se pak na mapě vykreslují pomocí mnohoúhelníkových a spojnicových vrstev, jak je znázorněno v následující ukázce kódu.

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

Snadno aktualizovat geometrii

Shape Třída zabalí geometrii nebo funkci a usnadňuje aktualizaci a údržbu těchto funkcí. Pokud chcete vytvořit instanci proměnné pro tvar, předejte geometrii nebo sadu vlastností do konstruktoru tvaru.

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

Ukázka jak snadno aktualizovat geometrii ukazuje, jak obalit kruhový objekt GeoJSON třídou tvarů. Když se hodnota poloměru v obrazci změní, kruh se automaticky vykresluje na mapě. Zdrojový kód pro tento příklad najdete v sekci Jak snadno aktualizovat zdrojový kód geometrie.

Další kroky

Další informace o třídách a metodách používaných v tomto článku:

Mnohoúhelník

PolygonLayer

PolygonLayerOptions

Další příklady kódu pro přidání do map najdete v následujících článcích:

Vytvoření zdroje dat

Přidat vyskakovací okno

Použití výrazů stylu řízených daty

Jak používat šablony obrázků

Přidat vrstvu čáry

Další zdroje informací:

Rozšíření specifikace GeoJSON pro Azure Maps