Dodawanie warstwy wielokąta do mapy

Artykuł
07/07/2023

W tym artykule pokazano, jak renderować obszary geometrii Polygon obiektów i MultiPolygon cech na mapie przy użyciu warstwy wielokąta. Zestaw SDK sieci Web Azure Maps obsługuje również tworzenie geometrii Circle zgodnie z definicją w rozszerzonym schemacie GeoJSON. Te okręgi są przekształcane w wielokąty po renderowaniu na mapie. Wszystkie geometrie cech można łatwo aktualizować w przypadku owiniętego atlasem. Shape , klasa.

Używanie warstwy wielokąta

Gdy warstwa wielokąta jest połączona ze źródłem danych i ładowana na mapie, renderuje obszar za pomocą Polygon funkcji i MultiPolygon . Aby utworzyć wielokąt, dodaj go do źródła danych i renderuj go za pomocą warstwy wielokąta przy użyciu klasy PolygonLayer .

Poniższy przykładowy kod demonstruje tworzenie warstwy wielokątnej, która obejmuje Park Centralny Nowego Jorku z czerwonym wielokątem.

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

Zrzut ekranu przedstawiający mapę Nowego Jorku przedstawiającą warstwę wielokątną obejmującą Park Centralny z kolorem wypełnienia ustawionym na czerwony i wypełniony nieprzezroczystość ustawioną na 0,7.

Używanie wielokąta i warstwy liniowej

Warstwa liniowa służy do renderowania konturu wielokątów. Poniższy przykładowy kod renderuje wielokąt podobny do poprzedniego przykładu, ale teraz dodaje warstwę liniową. Ta warstwa liniowa jest drugą warstwą połączoną ze źródłem danych.

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

Zrzut ekranu przedstawiający mapę Nowego Jorku przedstawiającą w większości przezroczystą warstwę wielokątną obejmującą cały Park Centralny, obramowaną czerwoną linią.

Wypełnianie wielokąta wzorcem

Oprócz wypełnienia wielokąta kolorem można użyć wzorca obrazu do wypełnienia wielokąta. Załaduj wzorzec obrazu do zasobów sprite obrazu mapy, a następnie odwołaj się do tego obrazu za fillPattern pomocą właściwości warstwy wielokątnej.

Aby zapoznać się z w pełni funkcjonalnym przykładem, który pokazuje, jak używać szablonu obrazu jako wzorca wypełnienia w warstwie wielokąta, zobacz Fill polygon with built-in icon template in the Azure Maps Samples (Wypełnianie wielokąta za pomocą wbudowanego szablonu ikony w przykładach Azure Maps). Aby uzyskać kod źródłowy dla tego przykładu, zobacz Fill polygon with built-in icon template source code (Wypełnianie wielokąta za pomocą wbudowanego kodu źródłowego szablonu ikony).

Porada

Zestaw SDK sieci Web Azure Maps udostępnia kilka dostosowywalnych szablonów obrazów, których można używać jako wzorców wypełnienia. Aby uzyskać więcej informacji, zobacz dokument How to use image templates (Jak używać szablonów obrazów ).

Dostosowywanie warstwy wielokąta

Warstwa wielokątna ma tylko kilka opcji stylów. Zobacz przykładową mapę Opcji warstwy wielokątowej w przykładach Azure Maps, aby je wypróbować. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Kod źródłowy opcji warstwy wielokątowej.

Zrzut ekranu narzędzia Opcje warstwy wielokątnej.

Dodawanie okręgu do mapy

Azure Maps używa rozszerzonej wersji schematu GeoJSON, który zawiera definicję okręgów. Okrąg jest renderowany na mapie przez utworzenie Point funkcji. Ma PointsubType właściwość o wartości "Circle" i radius właściwość z liczbą reprezentującą promień w metrach.

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

Zestaw SDK sieci Web Azure Maps konwertuje te Point funkcje na Polygon funkcje. Następnie te funkcje są renderowane na mapie przy użyciu warstw wielokątnych i liniowych, jak pokazano w poniższym przykładzie kodu.

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

Zrzut ekranu przedstawiający mapę z częściowo przezroczystym zielonym okręgiem w Nowym Jorku. Spowoduje to dodanie okręgu do mapy.

Łatwe aktualizowanie geometrii

Shape Klasa opakowuje geometrię lub funkcję i ułatwia aktualizowanie i konserwację tych funkcji. Aby utworzyć wystąpienie zmiennej kształtu, przekaż geometrię lub zestaw właściwości do konstruktora kształtu.

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

W przykładzie Make a geometry easy to update (Ułatwianie aktualizowania geometrii ) pokazano, jak opakowować obiekt GeoJSON okręgiem za pomocą klasy kształtu. Gdy wartość promienia zmienia się w kształcie, okrąg jest renderowany automatycznie na mapie. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Make a geometry easy to update source code (Tworzenie geometrii w łatwym aktualizowaniu kodu źródłowego).

Zrzut ekranu przedstawiający mapę przedstawiającą czerwony okrąg w Nowym Jorku z paskiem suwaka zatytułowanym Circle Radius i przesuwaniem paska w prawo lub po lewej stronie wartość promienia zmienia się i rozmiar okręgu jest automatycznie dostosowywany na mapie.