Sokszögréteg hozzáadása a térképhez

Cikk
07/07/2023

Ez a cikk bemutatja, hogyan jelenítheti meg a térképen a geometriák területeit Polygon és MultiPolygon funkcióit egy sokszögréteg használatával. A Azure Maps Webes SDK támogatja a kiterjesztett GeoJSON-sémában meghatározott körgeometriák létrehozását is. Ezek a körök sokszögekké alakulnak, amikor a térképen jelennek meg. Az összes funkciógeometria könnyen frissíthető, ha az atlasz be van csomagolva . Alakzatosztály .

Sokszögréteg használata

Amikor egy sokszögréteg csatlakozik egy adatforráshoz, és betöltődik a térképre, az a terület és MultiPolygon a funkciók megjelenítésére Polygon kerül. Sokszög létrehozásához adja hozzá egy adatforráshoz, és a PolygonLayer osztály használatával jelenítse meg egy sokszögréteggel.

Az alábbi mintakód egy sokszögréteg létrehozását mutatja be, amely a New York-i Central Parkot egy piros sokszöggel fedi le.

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

Képernyőkép New York Város térképéről, amely a Central Parkot lefedő sokszögréteget mutatja be piros színnel, a kitöltési opacitás pedig 0,7-es értékre van állítva.

Sokszög és vonalréteg együttes használata

A vonalréteg a sokszögek körvonalának megjelenítésére szolgál. Az alábbi kódminta az előző példához hasonló sokszöget jelenít meg, de most hozzáad egy sorréteget. Ez a sorréteg egy második réteg, amely az adatforráshoz kapcsolódik.

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

Képernyőkép New York városának térképéről, amely egy többnyire átlátszó sokszögréteget mutat be, amely az egész Central Parkot lefedi, piros vonallal határos.

Sokszög kitöltése mintával

A sokszög színnel való kitöltése mellett képmintával is kitöltheti a sokszöget. Töltsön be egy képmintát a térképek képforrásaiba, majd hivatkozzon erre a képre a fillPattern sokszögréteg tulajdonságával.

Egy teljes körűen működőképes minta, amely bemutatja, hogyan használható a képsablon kitöltési mintaként egy sokszögrétegben, olvassa el a Sokszög kitöltése beépített ikonsablonnal a Azure Maps-mintákban című témakört. A minta forráskódját lásd: Sokszög kitöltése beépített ikonsablon forráskódjával.

Tipp

A Azure Maps webes SDK számos testre szabható képsablont biztosít, amelyet kitöltési mintaként használhat. További információt a Képsablonok használata című dokumentumban talál.

Sokszögréteg testreszabása

A Sokszög rétegnek csak néhány stílusbeállítása van. A kipróbálásukhoz tekintse meg a többszögréteg beállításai mintatérképet a Azure Maps mintákban. A minta forráskódját lásd: Polygon Layer Options forráskód.

Képernyőkép a Sokszögréteg beállításai eszközről.

Kör hozzáadása a térképhez

Azure Maps a GeoJSON-séma kiterjesztett verzióját használja, amely definíciót biztosít a körökhöz. Egy funkció létrehozásával Point egy kör jelenik meg a térképen. Ez Point egy subType olyan tulajdonsággal rendelkezik, amelynek értéke "Circle" és radius egy számmal rendelkező tulajdonság, amely a sugarat méterben jelöli.

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

A Azure Maps Webes SDK ezeket Point a funkciókat funkciókká Polygon alakítja. Ezután ezeket a funkciókat a rendszer sokszög- és vonalrétegek használatával jeleníti meg a térképen az alábbi kódmintában látható módon.

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

Képernyőkép egy térképről, amelyen egy részlegesen átlátszó zöld kör látható New Yorkban. Ez egy kör térképhez való hozzáadását mutatja be.

Geometria egyszerű frissítése

Az Shape osztályok körbefuttatnak egy geometriát vagy funkciót , és megkönnyítik a funkciók frissítését és karbantartását. Alakzatváltozók példányosításához adjon át egy geometriát vagy egy tulajdonságkészletet az alakzatkonstruktornak.

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

A Make a geometry easy to update sample (A geometria egyszerű frissítése ) című minta bemutatja, hogyan lehet egy kör alakú GeoJSON-objektumot alakzatosztályokkal körbefuttatni. Ahogy a sugár értéke megváltozik az alakzatban, a kör automatikusan megjelenik a térképen. A minta forráskódját a Geometria egyszerűvé tétele a forráskód frissítéséhez című témakörben találja.

Képernyőkép egy new york-i piros körről, amelyen a Kör sugara nevű csúszka látható, és ahogy jobbra vagy balra csúsztatja a sávot, a sugár értéke megváltozik, és a kör mérete automatikusan módosul a térképen.