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

Ez a cikk bemutatja, hogyan jelenítheti meg a térkép geometriáit Polygon és MultiPolygon funkcióit egy sokszögréteg használatával. Az Azure Maps Web 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 megjeleníti a területet Polygon és MultiPolygon a funkciókat. 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 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')
  });
}

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 vonalréteg egy második réteg, amely az adatforráshoz csatlakozik.

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

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 mértékben működőképes minta, amely bemutatja, hogyan használható képsablon kitöltési mintaként egy sokszögrétegben, olvassa el a Sokszög kitöltése beépített ikonsablonnal az Azure Maps-mintákban című témakört. A minta forráskódját a sokszög kitöltése beépített ikonsablon forráskódjával című témakörben talál.

Sokszögréteg testreszabása

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

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

Az Azure Maps a GeoJSON-séma kiterjesztett verzióját használja, amely definiálja a köröket. Egy kör egy funkció létrehozásával Point 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ága a mérőszámok sugarát jelöli.

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

Az Azure Maps Web SDK ezeket a Point funkciókat funkciókká Polygon alakítja. Ezután ezek a funkciók sokszög- és vonalrétegek használatával jelennek 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)'
    }));
  });
}

Geometria egyszerű frissítése

Az Shape osztály körbefuttat egy geometriát vagy funkciót , és megkönnyíti a funkciók frissítését és karbantartását. Alakzatváltozó 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 körbefutni egy kör GeoJSON-objektumot egy alakzatosztálysal. 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 forráskód egyszerű frissítése című témakörben találhatja meg.

Következő lépések

További információ a cikkben használt osztályokról és módszerekről:

A térképekhez hozzáadandó további kód példákért tekintse meg az alábbi cikkeket:

További források: