新增簡單的資料圖層

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

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

類別 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。

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

注意

數據源 "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 檔案的樣式。 除了樣式屬性之外， marker-symbol 在簡單數據層中支援大部分 GitHub 的樣式屬性。

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

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

泡泡圖層樣式屬性

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

圖層選項	支援的屬性名稱	預設值
color	color, marker-color	'#1A73AA'
radius	size 1、marker-size2、scale1	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-size1	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-widthstroke-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

相關內容

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

• SimpleDataLayer
• SimpleDataLayerOptions

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

• 讀取和寫入空間資料
• 從開放地理空間聯盟新增地圖圖層
• 連接到 WFS 服務
• 核心 IO 作業
• 支援的資料格式詳細資料