新增簡單的資料圖層

Azure 地圖 Web SDK 提供一個包含SimpleDataLayer類別的空間 IO 模組。這個類別可讓您輕鬆地在地圖上呈現樣式特徵。甚至可以轉譯具有樣式屬性的資料集，以及包含混合幾何類型的資料集。

簡單數據層可藉由包裝多個轉譯層和使用樣式表達式來達成這項功能。樣式表達式會在包裹層中搜尋通用樣式屬性。 atlas.io.read 函式與 atlas.io.write 函式使用這些屬性將樣式讀取和寫入到支援的檔案格式中。當您將屬性新增至支援的檔案格式時，您可以使用檔案，以用於在地圖上顯示樣式特徵等用途。

類別 SimpleDataLayer 也提供內建的快顯功能與快顯範本。選取功能選項時，會出現快顯視窗。這一層也支援叢集資料。選取叢集時，地圖會放大至叢集，並將其展開至個別點和子叢集。如果您不需要快顯功能，您可以停用此功能。

類別 SimpleDataLayer 是用於包含許多套用幾何類型和樣式特徵的大型數據集上。當您使用此類別時，它會增加包含樣式表達式的六個圖層的額外負荷。如果您只需要在特徵上轉譯幾個幾何類型和樣式，則使用核心轉譯圖層可能會更有效率。如需詳細資訊，請參閱將泡泡圖層新增至地圖、將線條圖層新增至地圖，以及將多邊形圖層新增至地圖。

使用簡單的資料圖層

您可以使用類別 SimpleDataLayer ，就像其他轉譯層一樣。下列程式碼示範如何在地圖中使用簡單的資料圖層：

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a simple data layer for rendering data.
var layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);

下列代碼段示範如何使用參考線上來源資料的簡單資料層：

<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>

<script>
    function InitMap() {
        var map = new atlas.Map("myMap", {
            center: [-73.967605, 40.780452],
            zoom: 12,
            view: "Auto",

            //Add authentication details to connect 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);

            //Add a simple data layer for rendering data.
            var layer = new atlas.layer.SimpleDataLayer(datasource);
            map.layers.add(layer);

            //Load an initial data set.
            const dataSet = {
                type: "FeatureCollection",
                bbox: [0, 0, 0, 0],
                features: [
                    {
                        type: "Feature",
                        geometry: {
                            type: "Point",
                            coordinates: [0, 0]
                        },
                        properties: {
                            color: "red"
                        }
                    }
                ]
            };

            loadDataSet(dataSet);

            function loadDataSet(r) {
                //Update the features in the data source.
                datasource.setShapes(r);

                //If bounding box information is known for data, set the map view to it.
                if (r.bbox) {
                    map.setCamera({
                        bounds: r.bbox,
                        padding: 50
                    });
                }
            }
        });
    }
</script>

當您將功能新增至數據源時，簡單的數據層會以最適當的方式呈現它們。您可以將樣式設定為每個個別功能的屬性。

此範例程式代碼顯示地理 JavaScript 物件表示法（GeoJSON）點功能，並將 color 屬性設定為 red。

範例程式代碼會使用簡單的數據層來轉譯點功能，結果如下所示。

地圖的螢幕快照，其座標為 0,0，顯示藍水的紅點;已使用符號圖層新增紅點。

附註

數據源 "coordinates": [0, 0] 中的值會覆寫您在初始化地圖時所設定的座標 center: [-73.967605, 40.780452] 。

簡單資料層是下列案例中功能強大的工具：

數據源包含數種功能類型。
數據集中的功能有數個個別設定的樣式屬性。
您不確定資料集包含的內容。

例如，當您剖析 XML 資料摘要時，您可能不知道特徵的樣式和幾何類型。簡單數據層選項範例示範簡單數據層如何轉譯 Keyhole 標記語言（KML）檔案的功能。您也可以在類別中看到 SimpleDataLayer 選項。如需此範例的原始程式碼，請參閱 GitHub 中 Azure 地圖服務程式碼範例中的簡單資料圖層 options.html。

地圖的螢幕快照，左側顯示簡單數據圖層選項的面板。

附註

這個簡單的資料圖層會使用快顯範本類別，將 KML 批註方塊或特徵屬性顯示為資料表。根據預設，快顯中轉譯的所有內容都會在 iFrame 內沙箱化為安全性功能。不過，有一些限制：

所有指針鎖定功能、上層導覽功能、腳本和表單都會停用。選取連結時，可以在新的索引標籤中開啟。
不支援 srcdoc iFrame 上參數的舊版瀏覽器只能轉譯少量的內容。

如果您信任載入快顯的數據，並想要快顯腳本能夠存取您的應用程式，您可以停用此功能。只要將 sandboxContent 快顯樣本中的選項設定為 false。

預設支援的樣式屬性

簡單數據層會包裝數個核心轉譯層：泡泡、符號、線條、多邊形和立體多邊形。它會使用表達式來搜尋個別功能的有效樣式屬性。

支援的兩個主要屬性名稱集是 Azure 地圖服務和 GitHub。簡單資料圖層支援將 Azure 地圖服務圖層選項的大部分屬性名稱作為功能的樣式屬性。某些圖層選項包括支援 GitHub 常用之樣式屬性名稱的表達式。

GitHub 的 GeoJSON 對應支援會定義這些屬性名稱，用來設定儲存和轉譯在平臺內之 GeoJSON 檔案的樣式。 GitHub 的大部分樣式屬性在簡單數據層中都受到支援，但不包括 marker-symbol 樣式屬性。

如果讀取器遇到較不常見的樣式屬性，它會將它轉換成最類似的 Azure 地圖服務樣式屬性。此外，您可以使用簡單數據層的getLayers函式來覆寫預設的樣式表達式，並在任何圖層上更新選項。

下列各節提供簡單數據層所支援的預設樣式屬性詳細數據。支援的屬性名稱順序也是優先順序。如果為相同的圖層選項定義兩個樣式屬性，則清單中的第一個樣式屬性優先。色彩可以是任何 CSS3 色彩值（HEX、RGBA、HSL、HSLA）或具名色彩值。

泡泡圖層樣式屬性

如果功能是 Point 或 MultiPoint，而且沒有影像屬性可做為自定義圖示來轉譯點做為符號，則會使用 BubbleLayer來轉譯。

圖層選項	支援的屬性名稱	預設值
`color`	`color`, `marker-color`	`'#1A73AA'`
`radius`	`size`¹、`marker-size`²、`scale`¹	`8`
`strokeColor`	`strokeColor`, `stroke`	`'#FFFFFF'`

¹ 大小和小數位數值會視為純量值，並乘以8。

² 如果指定 GitHub marker-size 選項，半徑會使用下列值：

標記大小	半徑
`small`	`6`
`medium`	`8`
`large`	`12`

叢集也會在泡泡層中呈現。根據預設，叢集的半徑會設定為16。叢集的色彩會根據叢集中的點數目而有所不同，如下表所定義：

點數	Color
>= 100	`red`
>= 10	`yellow`
< 10	`green`

符號樣式屬性

如果功能是 Point 或 MultiPoint，且影像屬性是用來將點轉譯為符號的自定義圖示，則會使用 SymbolLayer來轉譯。

圖層選項	支援的屬性名稱	預設值
`image`	`image`	`none`
`size`	`size`、 `marker-size`¹	`1`
`rotation`	`rotation`	`0`
`offset`	`offset`	`[0, 0]`
`anchor`	`anchor`	`'bottom'`

¹ 如果指定 GitHub marker-size 選項，圖示大小選項會使用下列值：

標記大小	符號大小
`small`	`0.5`
`medium`	`1`
`large`	`2`

如果點特徵是叢集，則會將 point_count_abbreviated 屬性轉譯為文字標籤。不會轉譯任何影像。

線條樣式屬性

如果功能是 LineString、 MultiLineString、 Polygon或 MultiPolygon，則會使用 LineLayer來轉譯。

圖層選項	支援的屬性名稱	預設值
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`、`stroke-width`、`stroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

多邊形樣式屬性

如果功能是 Polygon 或 MultiPolygon，而且沒有height屬性，或高度屬性為零，則會使用 PolygonLayer呈現。

圖層選項	支援的屬性名稱	預設值
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`fillOpacity`	`fillOpacity`、`fill-opacity`	`0.5`

立體多邊形樣式屬性

如果功能是 Polygon 或 MultiPolygon，且具有值大於零的高度屬性，則會使用 PolygonExtrusionLayer呈現。

圖層選項	支援的屬性名稱	預設值
`base`	`base`	`0`
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`height`	`height`	`0`

深入瞭解本文中的類別和方法：

請參閱下列文章，以取得更多程式碼範例以新增至您的地圖：

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-04-22