Přidání vrstvy mnohoúhelníku do mapy

V tomto článku se dozvíte, jak vykreslit oblasti Polygon geometrie a MultiPolygon funkce na mapě pomocí vrstvy mnohoúhelníku. Sada Azure Maps Web SDK 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. Při zabalení s atlasem lze snadno aktualizovat všechny geometrie prvků . Třída obrazce .

Použití mnohoúhelníkové vrstvy

Když je vrstva mnohoúhelníku připojená ke zdroji dat a načtena do mapy, vykreslí oblast s funkcemi Polygon a MultiPolygon . Chcete-li vytvořit mnohoúhelník, přidejte ho do zdroje dat a vykreslete ho s vrstvou mnohoúhelníku pomocí třídy PolygonLayer .

Následující ukázkový kód ukazuje vytvoření vrstvy mnohoúhelníku, 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')
  });
}

Společné použití mnohoúhelníku a vrstvy čar

Vrstva čáry se používá 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 spojnicová vrstva 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 vzorek obrázku. Načtěte vzor obrázku do prostředků sprite obrázku mapy a pak na tento obrázek odkazujte fillPattern vlastností vrstvy mnohoúhelníku.

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

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 dokumentu Jak používat šablony obrázků .

Přizpůsobení vrstvy mnohoúhelníku

Mnohoúhelníková vrstva má jen několik možností stylů. Pokud si je chcete vyzkoušet, podívejte se na ukázkovou mapu Možnosti vrstvy mnohoúhelníku v ukázkách Azure Maps. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód možnosti mnohoúhelníku vrstvy.

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. Má Point vlastnost s hodnotou a radius vlastnost s číslem, které představuje poloměr v metrech"Circle".subType

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

Sada Azure Maps Web SDK převede tyto Point funkce na Polygon funkce. Tyto funkce se pak vykreslují na mapě pomocí vrstvy mnohoúhelníku a čar, 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)'
    }));
  });
}

Snadná aktualizace geometrie

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

//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 usnadnit aktualizaci geometrie ukazuje, jak zabalit objekt GeoJSON kruhu s třídou obrazce. Při změně hodnoty poloměru obrazce se kruh automaticky vykresluje na mapě. Zdrojový kód pro tuto ukázku najdete v tématu Usnadnění aktualizace zdrojového kódu pomocí geometrie.

Další kroky

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

Mnohoúhelník

Mnohoúhelník

PolygonLayerOptions

Další příklady kódu, které můžete přidat do map, najdete v následujících článcích:

Vytvoření zdroje dat

Přidání místního okna

Použití výrazů pro styly založené na datech

Používání šablon obrázků

Přidání řádkové vrstvy

Další zdroje informací:

rozšíření specifikace Azure Maps GeoJSON