將多邊形圖層新增至地圖

發行項
08/28/2024

本文說明如何使用多邊形圖層，在地圖上呈現 Polygon 和 MultiPolygon 特徵幾何的區域。 Azure 地圖服務 Web SDK 也支援建立圓形幾何，如擴充的 GeoJSON 結構描述所定義。在地圖上呈現時，這些圓形會轉換為多邊形。以 atlas.Shape 類別包裝時，所有特徵幾何都可輕易更新。

使用多邊形圖層

當多邊形圖層連線至資料來源並載入至地圖時，將會呈現具有 Polygon 和 MultiPolygon 特徵的區域。若要建立多邊形，請將其新增至資料來源，並使用 PolygonLayer 類別和多邊形圖層加以呈現。

下列範例程式碼示範如何建立多邊形圖層，以紅色多邊形覆蓋紐約市的中央公園。

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

同時使用多邊形和線條圖層

線條圖層可用來呈現多邊形的外框。下列程式碼範例會呈現如同上述範例的多邊形，但現在會新增線條圖層。此條線圖層是連線至資料來源的第二個圖層。

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

使用圖樣填滿多邊形

除了以色彩填滿多邊形以外，您還可以使用影像圖樣來填滿多邊形。請將影像圖樣載入地圖影像原件資源，然後使用多邊形圖層的 fillPattern 屬性來參考此影像。

如需示範如何在多邊形圖層中使用影像範本作為填滿模式的完整功能範例，請參閱 Azure 地圖服務範例中的使用內建圖示範本填滿多邊形。如需此範例的原始程式碼，請參閱使用內建圖示範本來源程式碼填滿多邊形。

提示

Azure 地圖服務 Web SDK 提供數個可自訂的影像範本，供您作為填滿圖樣。如需詳細資訊，請參閱如何使用影像範本文件。

自訂多邊形圖層

多邊形圖層只有少數樣式選項。請參閱 Azure 地圖服務範例中的多邊形圖層選項範例地圖來試用。如需此範例的原始程式碼，請參閱多邊形圖層選項原始程式碼。

將圓形新增至地圖

Azure 地圖服務會使用可提供圓形定義的擴充版 GeoJSON 結構描述。藉由建立 Point 特徵，即可在地圖上呈現圓形。此 Point 具有值為 "Circle" 的 subType 屬性，且具有 radius 屬性，會以數字表示半徑 (以公尺為單位)。

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

Azure 地圖服務 Web SDK 會將這些 Point 特徵轉換為 Polygon 特徵。然後，這些特徵會使用多邊形和線條圖層呈現在地圖上，如下列程式碼範例所示。

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

讓幾何易於更新

Shape 類別會包裝幾何或特徵，使這些特徵更容易更新和維護。若要具現化圖形變數，請將幾何或一組屬性傳至圖形建構函式。

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

讓您輕鬆更新幾何範例示範如何使用圖形類別包裝圓形 GeoJSON 物件。當圖形中的半徑值變更時，圓形會自動呈現在地圖上。如需此範例的原始程式碼，請參閱讓幾何易於更新原始程式碼。

地圖的螢幕擷取畫面，其中顯示紐約市中滑桿標題為「圓半徑」的紅色圓圈，當您將橫桿向右或向左滑動時，半徑的值會變更，且圓形大小會自動在地圖上調整。