Hinzufügen einer einfachen Datenschicht

Das Azure Maps Web SDK stellt ein Spatial IO-Modul bereit, das eine SimpleDataLayer-Klasse enthält. Diese Klasse vereinfacht das Rendern Features mit Stilen auf einer Karte. Es kann sogar Datasets mit Stileigenschaften und Datasets mit gemischten Geometrietypen rendern.

Die einfache Datenebene erreicht diese Funktionalität durch Umschließen mehrerer Renderingebenen und Verwenden von Stilausdrücken. Die Stilausdrücke suchen innerhalb dieser umschlossenen Ebenen nach gemeinsamen Stileigenschaften. Die Funktionen atlas.io.read und atlas.io.write verwenden diese Eigenschaften, um Stile in einem unterstützten Dateiformat zu lesen und zu schreiben. Wenn Sie einem unterstützten Dateiformat Eigenschaften hinzufügen, können Sie die Datei für Zwecke wie das Anzeigen von formatierten Features auf einer Karte verwenden.

Die SimpleDataLayer-Klasse bietet auch ein integriertes Popupfeature mit einer Popupvorlage. Das Popup wird angezeigt, wenn ein Feature ausgewählt wird. Diese Ebene unterstützt auch Daten in Clustern. Wenn ein Cluster ausgewählt wird, wird der Cluster in der Karte vergrößert und in Einzelpunkte und Untercluster erweitert. Sie können das Popupfeature deaktivieren, wenn Sie es nicht benötigen.

Die SimpleDataLayer-Klasse ist für große Datasets vorgesehen, die Features mit vielen angewendeten Geometrietypen und Stilen umfassen. Wenn Sie diese Klasse verwenden, fügt sie zusätzliche sechs Ebenen hinzu, die Stilausdrücke enthalten. Wenn Sie nur einige Geometrietypen und Stile für ein Feature rendern müssen, ist es möglicherweise effizienter, eine Kernrenderingebene zu verwenden. Weitere Informationen finden Sie unter Hinzufügen einer Blasenebene zur Karte, Hinzufügen einer Linienebene zur Karteund Hinzufügen einer Polygonebene zur Karte.

Verwenden einer einfachen Datenebene

Sie können die SimpleDataLayer-Klasse wie die anderen Renderingebenen verwenden. Der folgende Code zeigt, wie eine einfache Datenebene in einer Karte verwendet wird:

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

Der folgende Codeausschnitt veranschaulicht die Verwendung einer einfachen Datenebene, die auf die Daten aus einer Onlinequelle verweist:

<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>

Wenn Sie der Datenquelle Features hinzufügen, rendert die einfache Datenebene diese auf die am besten geeignete Weise. Sie können Stile als Eigenschaften für jedes einzelne Feature festlegen.

Der obige Beispielcode zeigt ein GeoJSON-Punktfeature (Geographic JavaScript Object Notation) mit einer color-Eigenschaft, die auf red festgelegt ist.

Der Beispielcode rendert das Punktfeature mithilfe der einfachen Datenebene, und das Ergebnis wird wie folgt angezeigt:

Die einfache Datenebene ist in den folgenden Szenarien ein leistungsfähiges Tool:

• Eine Datenquelle umfasst mehrere Featuretypen.
• Für Features in dem Dataset sind mehrere Stileigenschaften individuell festgelegt.
• Sie sind nicht sicher, was das Dataset enthält.

Beim Analysieren von XML-Datenfeeds sind Ihnen möglicherweise die genauen Stile und Geometrietypen der Features nicht bekannt. Im Beispiel Optionen für die einfache Datenebene wird veranschaulicht, wie die einfache Datenebene die Merkmale einer KML-Datei (Keyhole Markup Language) rendert. Sie können die Optionen auch in der SimpleDataLayer-Klasse anzeigen. Den Quellcode für dieses Beispiel finden Sie auf GitHub in den Azure Maps-Codebeispielen unter Simple data layer options.html.

Standardmäßig unterstützte Stileigenschaften

Die einfache Datenebene umschließt mehrere der Kernebenen für das Rendering: Blase, Symbol, Linie, Polygon und extrudiertes Polygon. Sie sucht anhand von Ausdrücken in einzelnen Features nach gültigen Stileigenschaften.

Die beiden wichtigsten Gruppen unterstützter Eigenschaftsnamen sind Azure Maps und GitHub. Die meisten Eigenschaftsnamen der Azure Maps-Ebenenoptionen werden auf der einfachen Datenebene als Stileigenschaften von Features unterstützt. Einige Ebenenoptionen umfassen Ausdrücke, die Stileigenschaftennamen unterstützen, die von GitHub häufig verwendet werden.

Diese Eigenschaftsnamen werden von der GitHub-Unterstützung von GeoJSON-Karten definiert, die zur Formatierung von GeoJSON-Dateien verwendet werden, die auf der Plattform gespeichert und gerendert werden. Die meisten Stileigenschaften von GitHub werden auf der einfachen Datenebene mit Ausnahme der Stileigenschaften von marker-symbol unterstützt.

Wenn der Reader auf eine weniger verbreitete Stileigenschaft stößt, konvertiert er sie in die ähnlichste Azure Maps-Stileigenschaft. Zusätzlich können Sie die Standardstilausdrücke überschreiben, indem die getLayers-Funktion der einfachen Datenebene verwendet und die Optionen für beliebige der Ebenen aktualisiert werden.

Die folgenden Abschnitte enthalten Einzelheiten zu den Standardstileigenschaften, die die einfache Datenebene unterstützt. Die Reihenfolge der unterstützten Eigenschaftsnamen ist gleichzeitig die Priorität. Wenn zwei Stileigenschaften für die gleiche Ebenenoption definiert sind, hat die erste in der Liste Priorität. Farben können ein beliebiger CSS3-Farbwert (HEX, RGB, RGBA, HSL, HSLA) oder ein benannter Farbwert sein.

Stileigenschaften auf der Blasenebene

Wenn ein Feature ein Point oder ein MultiPoint ist und keine Bildeigenschaft zum Rendern des Punkts als Symbol verwendet werden soll, wird es mit einer BubbleLayer gerendert.

¹ Die Größen- und Skalierungswerte gelten als Skalarwerte und werden mit 8 multipliziert.

² Wenn die GitHub-Option marker-size angegeben wird, verwendet der Radius die folgenden Werte:

Cluster werden auch in der Blasenebene gerendert. Standardmäßig ist der Radius eines Clusters auf 16 festgelegt. Die Farbe des Clusters hängt von der Anzahl der Punkte im Cluster ab, wie in der folgenden Tabelle definiert:

Stileigenschaften von Symbolen

Wenn ein Feature ein Point oder ein MultiPoint mit einer Bildeigenschaft ist, die als benutzerdefiniertes Symbol zum Rendern des Punkts als Symbol verwendet wird, wird es mit einer SymbolLayer gerendert.

¹ Wenn die GitHub-Option marker-size angegeben wird, werden die folgenden Werte für die Symbolgrößenoption verwendet:

Wenn es sich beim Punktfeature um einen Cluster handelt, wird die point_count_abbreviated-Eigenschaft als Textbeschriftung gerendert. Es wird kein Bild gerendert.

Linienstileigenschaften

Wenn es sich bei dem Feature um einen LineString, einen MultiLineString, ein Polygon oder ein MultiPolygon handelt, wird es mit einer LineLayer gerendert.

Polygonstileigenschaften

Wenn es sich bei dem Feature um ein Polygon oder ein MultiPolygon handelt und keine Höheneigenschaft aufweist oder wenn die Höheneigenschaft null ist, wird es mit einer PolygonLayer gerendert.

Stileigenschaften extrudierter Polygone

Wenn das Feature ein Polygon oder MultiPolygon ist und eine Höheneigenschaft mit einem Wert größer als 0 hat, wird das Feature mit einer PolygonExtrusionLayer gerendert.

Zugehöriger Inhalt

In diesem Artikel erfahren Sie mehr zu den Klassen und Methoden:

• SimpleDataLayer
• SimpleDataLayerOptions

In den folgenden Artikeln finden Sie weitere Codebeispiele, die Sie Ihren Karten hinzufügen können:

• Lesen und Schreiben räumlicher Daten
• Hinzufügen einer Kartenebene aus Open Geospatial Consortium
• Herstellen einer Verbindung mit einem WFS-Dienst
• Zentrale E/A-Vorgänge
• Details zu unterstützten Datenformaten