Dodawanie prostej warstwy danych

Artykuł
07/30/2024

Moduł we/wy przestrzenne udostępnia klasę SimpleDataLayer . Ta klasa ułatwia renderowanie stylizowanych funkcji na mapie. Może nawet renderować zestawy danych, które mają właściwości stylu i zestawy danych zawierające mieszane typy geometrii. Prosta warstwa danych zapewnia tę funkcjonalność, opakowując wiele warstw renderowania i używając wyrażeń stylów. Wyrażenia stylów wyszukują typowe właściwości stylu funkcji wewnątrz tych opakowanych warstw. Funkcja atlas.io.read i atlas.io.write funkcja używają tych właściwości do odczytywania i zapisywania stylów w obsługiwanym formacie pliku. Po dodaniu właściwości do obsługiwanego formatu pliku plik może być używany do różnych celów. Na przykład plik może służyć do wyświetlania stylizowane funkcje na mapie.

Oprócz funkcji stylów funkcja SimpleDataLayer udostępnia wbudowaną funkcję wyskakujących okienek z szablonem wyskakującym. Po wybraniu funkcji zostanie wyświetlone okno podręczne. Domyślną funkcję wyskakującego okienka można wyłączyć, jeśli jest to konieczne. Ta warstwa obsługuje również dane klastrowane. Po kliknięciu klastra mapa powiększa klaster i rozwija go do poszczególnych punktów i podciągów.

Klasa SimpleDataLayer ma być używana w dużych zestawach danych z wieloma typami geometrii i wieloma stylami zastosowanymi w funkcjach. W przypadku użycia ta klasa dodaje obciążenie sześciu warstw zawierających wyrażenia stylu. W związku z tym istnieją przypadki, w których użycie podstawowych warstw renderowania jest bardziej wydajne. Na przykład użyj warstwy podstawowej, aby renderować kilka typów geometrii i kilka stylów w funkcji

Używanie prostej warstwy danych

Używana SimpleDataLayer jest klasa, podobnie jak inne warstwy renderowania. Poniższy kod pokazuje, jak używać prostej warstwy danych na mapie:

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

Poniższy fragment kodu przedstawia użycie prostej warstwy danych, odwołując się do danych ze źródła online.

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

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

Po dodaniu funkcji do źródła danych prosta warstwa danych dowiesz się, jak najlepiej je renderować. Style poszczególnych funkcji można ustawić jako właściwości funkcji.

Powyższy przykładowy kod przedstawia funkcję punktu GeoJSON z właściwością ustawioną color na redwartość .

Ten przykładowy kod renderuje funkcję punktu przy użyciu prostej warstwy danych i jest wyświetlana w następujący sposób:

Zrzut ekranu mapy z współrzędnymi 0, 0, który pokazuje czerwoną kropkę nad niebieską wodą, czerwona kropka została dodana przy użyciu warstwy symboli.

Uwaga

Zwróć uwagę, że współrzędne ustawione podczas inicjowania mapy:

center: [-73.967605, 40.780452]

Wartość jest zastępowana przez źródło danych:

"współrzędne": [0, 0]

Realne możliwości prostej warstwy danych są następujące:

Istnieje kilka różnych typów funkcji w źródle danych; lub
Funkcje w zestawie danych mają kilka właściwości stylu indywidualnie ustawionych na nich; lub
Nie masz pewności, co dokładnie zawiera zestaw danych.

Na przykład podczas analizowania źródeł danych XML możesz nie znać dokładnych stylów i typów geometrii funkcji. W przykładzie Proste opcje warstwy danych przedstawiono możliwości prostej warstwy danych przez renderowanie funkcji pliku KML. Demonstruje również różne opcje zapewniane przez prostą klasę warstwy danych. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Proste options.html warstwy danych w przykładach kodu usługi Azure Maps w usłudze GitHub.

Zrzut ekranu przedstawiający mapę z panelem po lewej stronie przedstawiający różne proste opcje warstwy danych.

Uwaga

Ta prosta warstwa danych używa klasy szablonu podręcznego do wyświetlania dymków KML lub właściwości funkcji jako tabeli. Domyślnie cała zawartość renderowana w wyskakującym okienku będzie w trybie piaskownicy wewnątrz elementu iframe jako funkcji zabezpieczeń. Istnieją jednak ograniczenia:

Wszystkie skrypty, formularze, blokada wskaźnika i najważniejsze funkcje nawigacji są wyłączone. Linki mogą być otwierane na nowej karcie po wybraniu.
Starsze przeglądarki, które nie obsługują parametru srcdoc w elementach iframe, będą ograniczone do renderowania niewielkiej ilości zawartości.

Jeśli ufasz ładowaniu danych do wyskakujących okienek i potencjalnie chcesz, aby te skrypty załadowane do okien podręcznych mogły uzyskać dostęp do aplikacji, możesz to wyłączyć, ustawiając opcję szablonów sandboxContent wyskakujących na wartość false.

Domyślne obsługiwane właściwości stylu

Jak wspomniano wcześniej, prosta warstwa danych opakowuje kilka podstawowych warstw renderowania: bąbelek, symbol, linia, wielokąt i ekstrudowany wielokąt. Następnie używa wyrażeń do wyszukiwania prawidłowych właściwości stylu na poszczególnych funkcjach.

Właściwości stylu usługi Azure Maps i GitHub to dwa główne zestawy obsługiwanych nazw właściwości. Większość nazw właściwości różnych opcji warstwy usługi Azure Maps jest obsługiwana jako właściwości stylu funkcji w prostej warstwie danych. Wyrażenia zostały dodane do niektórych opcji warstwy w celu obsługi nazw właściwości stylu, które są często używane przez usługę GitHub. Obsługa map GeoJSON w usłudze GitHub definiuje te nazwy właściwości i są używane do tworzenia stylów plików GeoJSON, które są przechowywane i renderowane na platformie. Wszystkie właściwości stylów usługi GitHub są obsługiwane w prostej warstwie danych, z wyjątkiem marker-symbol właściwości stylów.

Jeśli czytelnik napotka mniej typową właściwość stylu, konwertuje ją na najbliższą właściwość stylu usługi Azure Maps. Ponadto domyślne wyrażenia stylu można zastąpić przy użyciu getLayers funkcji prostej warstwy danych i aktualizowania opcji w dowolnej warstwie.

Poniższe sekcje zawierają szczegółowe informacje na temat domyślnych właściwości stylu obsługiwanych przez prostą warstwę danych. Kolejność obsługiwanej nazwy właściwości jest również priorytetem właściwości. Jeśli dwie właściwości stylu są zdefiniowane dla tej samej opcji warstwy, pierwszy z nich na liście ma wyższy priorytet. Kolory mogą być dowolną wartością koloru CSS3; HEX, RGB, RGBA, HSL, HSLA lub nazwana wartość koloru.

Właściwości stylu warstwy bąbelkowej

Jeśli funkcja jest elementem Point lub MultiPoint, a funkcja nie ma image właściwości, która byłaby używana jako ikona niestandardowa do renderowania punktu jako symbolu, funkcja jest renderowana za pomocą BubbleLayerelementu .

Opcja warstwy	Obsługiwane nazwy właściwości	Domyślna wartość
`color`	`color`, `marker-color`	`'#1A73AA'`
`radius`	`size`¹, `marker-size`², `scale`¹	`8`
`strokeColor`	`strokeColor`, `stroke`	`'#FFFFFF'`

[1] Wartości size i scale są traktowane jako wartości skalarne i są mnożone przez 8

[2] Jeśli określono opcję GitHub marker-size , dla promienia są używane następujące wartości.

Rozmiar znacznika	Radius
`small`	`6`
`medium`	`8`
`large`	`12`

Klastry są również renderowane przy użyciu warstwy bąbelkowej. Domyślnie promień klastra ma wartość 16. Kolor klastra różni się w zależności od liczby punktów w klastrze, zgodnie z definicją w poniższej tabeli:

Liczba punktów	Color
>= 100	`red`
>= 10	`yellow`
< 10	`green`

Właściwości stylu symboli

Jeśli funkcja jest funkcją Point lub MultiPoint, i ma image właściwość, która będzie używana jako ikona niestandardowa do renderowania punktu jako symbolu, funkcja jest renderowana za pomocą SymbolLayerelementu .

Opcja warstwy	Obsługiwane nazwy właściwości	Domyślna wartość
`image`	`image`	`none`
`size`	`size`, `marker-size`¹	`1`
`rotation`	`rotation`	`0`
`offset`	`offset`	`[0, 0]`
`anchor`	`anchor`	`'bottom'`

[1] Jeśli określono opcję GitHub marker-size , dla opcji rozmiaru ikon są używane następujące wartości.

Rozmiar znacznika	Rozmiar symboli
`small`	`0.5`
`medium`	`1`
`large`	`2`

Jeśli funkcja punktu jest klastrem, point_count_abbreviated właściwość jest renderowana jako etykieta tekstowa. Obraz nie jest renderowany.

Właściwości stylu linii

Jeśli funkcja jest funkcją LineString, , PolygonMultiLineStringlub MultiPolygon, funkcja jest renderowana za pomocą LineLayerelementu .

Opcja warstwy	Obsługiwane nazwy właściwości	Domyślna wartość
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`, , `stroke-widthstroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

Właściwości stylu wielokąta

Jeśli funkcja jest elementem Polygon MultiPolygonlub , a funkcja nie ma height właściwości lub height właściwość ma wartość zero, funkcja jest renderowana za pomocą PolygonLayerelementu .

Opcja warstwy	Obsługiwane nazwy właściwości	Domyślna wartość
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`fillOpacity`	`fillOpacity`, '`fill-opacity`	`0.5`

Właściwości stylu wytłaczanego wielokąta

Jeśli funkcja jest elementem Polygon lub MultiPolygon, i ma height właściwość o wartości większej niż zero, funkcja jest renderowana za pomocą PolygonExtrusionLayerelementu .