Dodawanie prostej warstwy danych

Artykuł
07/26/2023

Moduł operacji we/wy przestrzennej udostępnia klasę SimpleDataLayer . Ta klasa ułatwia renderowanie stylisowanych 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 osiąga 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 można go użyć 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 kliknięciu funkcji zostanie wyświetlone okno podręczne. W razie potrzeby można wyłączyć domyślną funkcję wyskakujących okienek. 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 podklas.

Klasa SimpleDataLayer ma być używana w dużych zestawach danych z wieloma typami geometrii i wieloma stylami stosowanymi 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

Klasa SimpleDataLayer jest używana tak 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.

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.
    loadDataSet('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/use-simple-data-layer.json');

    function loadDataSet(url) {
      //Read the spatial data and add it to the map.
      atlas.io.read(url).then(r => {
      if (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
          });
        }
      }
      });
    }
  });
}

Adres URL przekazany do loadDataSet funkcji wskazuje następujący kod json:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
    },
    "properties": {
        "color": "red"
    }
}

Po dodaniu funkcji do źródła danych prosta warstwa danych określa, 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]

Rzeczywiste 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 ustawionych indywidualnie; 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. Przykład opcji prostej warstwy danych przedstawia możliwości prostej warstwy danych przez renderowanie funkcji pliku KML. Demonstruje również różne opcje zapewniane przez prostą klasę warstwy danych. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Proste options.htmlwarstwy danych w przykładach kodu 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 okienku podręcznym będzie w trybie piaskownicy wewnątrz elementu iframe jako funkcji zabezpieczeń. Istnieją jednak ograniczenia:

Wszystkie skrypty, formularze, blokada wskaźnika i górna funkcjonalność nawigacji są wyłączone. Linki mogą być otwierane na nowej karcie po kliknięciu.
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, że dane ładowane do okien podręcznych i potencjalnie chcesz, aby te skrypty załadowane do wyskakujących okienek 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ąbelka, symbol, linia, wielokąt i wytłaczany wielokąt. Następnie używa wyrażeń do wyszukiwania prawidłowych właściwości stylu na poszczególnych funkcjach.

Azure Maps i właściwości stylu usługi 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 przechowywanych i renderowanych 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 Azure Maps. Ponadto domyślne wyrażenia stylu można przesłonić 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	Wartość domyślna
`color`	`color`, `marker-color`	`'#1A73AA'`
`radius`	`size`¹, `marker-size`², `scale`¹	`8`
`strokeColor`	`strokeColor`, `stroke`	`'#FFFFFF'`

[1] Wartości size i scale są uznawane za 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 jest ustawiony na 16wartość . 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	Kolor
>= 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 byłaby 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	Wartość domyślna
`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. Żaden 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	Wartość domyślna
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`, `stroke-width`, `stroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

Właściwości stylu wielokąta

Jeśli funkcja jest elementem Polygon lub MultiPolygon, 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	Wartość domyślna
`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ą elementu PolygonExtrusionLayer.