Utwórz źródło danych

Artykuł
10/18/2023

Zestaw Azure Mapy Web SDK przechowuje dane w źródłach danych. Korzystanie ze źródeł danych optymalizuje operacje na danych na potrzeby wykonywania zapytań i renderowania. Obecnie istnieją dwa typy źródeł danych:

Źródło GeoJSON: zarządza nieprzetworzonymi danymi lokalizacji w formacie GeoJSON lokalnie. Dobre dla małych i średnich zestawów danych (w górę setki tysięcy kształtów).
Źródło kafelka wektorowego: ładuje dane sformatowane jako kafelki wektorowe dla bieżącego widoku mapy na podstawie systemu układania map. Idealne rozwiązanie dla dużych i ogromnych zestawów danych (miliony lub miliardy kształtów).

Źródło danych GeoJSON

Źródło danych oparte na formacie GeoJSON ładuje i przechowuje dane lokalnie przy użyciu DataSource klasy . Dane GeoJSON można tworzyć ręcznie lub tworzyć przy użyciu klas pomocnika w przestrzeni nazw atlas.data . Klasa udostępnia funkcje do importowania DataSource lokalnych lub zdalnych plików GeoJSON. Zdalne pliki GeoJSON muszą być hostowane w punkcie końcowym z włączoną funkcją CORs. Klasa DataSource udostępnia funkcje dla danych punktów klastrowania. Dane można łatwo dodawać, usuwać i aktualizować za pomocą DataSource klasy . Poniższy kod pokazuje, jak można tworzyć dane GeoJSON w usłudze Azure Mapy.

//Create raw GeoJSON object.
var rawGeoJson = {
     "type": "Feature",
     "geometry": {
         "type": "Point",
         "coordinates": [-100, 45]
     },
     "properties": {
         "custom-property": "value"
     }
};

//Create GeoJSON using helper classes (less error prone and less typing).
var geoJsonClass = new atlas.data.Feature(new atlas.data.Point([-100, 45]), {
    "custom-property": "value"
});

Po utworzeniu źródła danych można dodać do mapy za pomocą map.sources właściwości , która jest elementem SourceManager. Poniższy kod pokazuje, jak utworzyć element DataSource i dodać go do mapy.

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

Poniższy kod przedstawia różne sposoby dodawania danych GeoJSON do elementu DataSource.

//GeoJsonData in the following code can be a single or array of GeoJSON features or geometries, a GeoJSON feature colleciton, or a single or array of atlas.Shape objects.

//Add geoJSON object to data source. 
source.add(geoJsonData);

//Load geoJSON data from URL. URL should be on a CORs enabled endpoint.
source.importDataFromUrl(geoJsonUrl);

//Overwrite all data in data source.
source.setShapes(geoJsonData);

Napiwek

Załóżmy, że chcesz zastąpić wszystkie dane w obiekcie DataSource. Jeśli wykonasz wywołania funkcji clear , add mapa może zostać ponownie wyrenderowana dwukrotnie, co może spowodować nieco opóźnienia. Zamiast tego użyj setShapes funkcji , która spowoduje usunięcie i zastąpienie wszystkich danych w źródle danych i wyzwolenie tylko pojedynczego ponownego renderowania mapy.

Źródło kafelka wektorowego

Źródło kafelka wektorowego opisuje sposób uzyskiwania dostępu do warstwy kafelka wektorowego. Użyj klasy VectorTileSource, aby utworzyć wystąpienie źródła kafelka wektorowego. Warstwy kafelków wektorowych są podobne do warstw kafelków, ale nie są takie same. Warstwa kafelka to obraz rastrowy. Warstwy kafelków wektorowych są skompresowanym plikiem w formacie PBF . Ten skompresowany plik zawiera dane mapy wektorów i co najmniej jedną warstwę. Plik można renderować i stylizowany na kliencie na podstawie stylu każdej warstwy. Dane na kafelku wektorowym zawierają cechy geograficzne w postaci punktów, linii i wielokątów. Istnieje kilka zalet używania warstw kafelków wektorowych zamiast warstw kafelków rastrowych:

Rozmiar pliku kafelka wektorowego jest zwykle znacznie mniejszy niż równoważny kafelek rastrowy. W związku z tym używana jest mniejsza przepustowość. Oznacza to mniejsze opóźnienie, szybszą mapę i lepsze środowisko użytkownika.
Ponieważ kafelki wektorowe są renderowane na kliencie, dostosowują się do rozdzielczości wyświetlanego urządzenia. W związku z tym renderowane mapy są bardziej dobrze zdefiniowane z krystalicznie przejrzystymi etykietami.
Zmiana stylu danych w mapach wektorowych nie wymaga ponownego pobrania danych, ponieważ nowy styl można zastosować na kliencie. Z kolei zmiana stylu warstwy kafelka rastrowego zwykle wymaga ładowania kafelków z serwera, a następnie zastosowania nowego stylu.
Ponieważ dane są dostarczane w postaci wektorowej, przetwarzanie po stronie serwera jest mniej wymagane do przygotowania danych. W związku z tym nowsze dane mogą być udostępniane szybciej.

Usługa Azure Mapy jest zgodna ze specyfikacją kafelka Mapbox Vector— otwartym standardem. Usługa Azure Mapy udostępnia następujące usługi kafelków wektorowych w ramach platformy:

Kafelki dróg
Zdarzenia ruchu
Przepływ ruchu
Usługa Azure Mapy Creator umożliwia również tworzenie niestandardowych kafelków wektorowych i uzyskiwanie do ich dostępu za pośrednictwem interfejsu API renderowania — uzyskiwanie kafelka mapy

Napiwek

W przypadku korzystania z kafelków obrazów wektorowych lub rastrowych z usługi renderowania usługi Azure Mapy za pomocą zestawu WEB SDK możesz zastąpić atlas.microsoft.com symbol zastępczy {azMapsDomain}. Ten symbol zastępczy zostanie zastąpiony tą samą domeną używaną przez mapę i automatycznie dołączy te same szczegóły uwierzytelniania. Znacznie upraszcza to uwierzytelnianie za pomocą usługi renderowania podczas korzystania z uwierzytelniania firmy Microsoft Entra.

Aby wyświetlić dane ze źródła kafelka wektorowego na mapie, połącz źródło z jedną z warstw renderowania danych. Wszystkie warstwy używające źródła wektorów muszą określać sourceLayer wartość w opcjach. Poniższy kod ładuje usługę kafelek wektora przepływu ruchu platformy Azure Mapy jako źródło kafelka wektora, a następnie wyświetla go na mapie przy użyciu warstwy liniowej. To wektorowe źródło kafelków ma jeden zestaw danych w warstwie źródłowej o nazwie "Przepływ ruchu". Dane wiersza w tym zestawie danych mają właściwość o nazwie traffic_level , która jest używana w tym kodzie do wybierania koloru i skalowania rozmiaru linii.

//Create a vector tile source and add it to the map.
var source = new atlas.source.VectorTileSource(null, {
    tiles: ['https://{azMapsDomain}/traffic/flow/tile/pbf?api-version=1.0&style=relative&zoom={z}&x={x}&y={y}'],
    maxZoom: 22
});
map.sources.add(source);

//Create a layer for traffic flow lines.
var flowLayer = new atlas.layer.LineLayer(source, null, {
    //The name of the data layer within the data source to pass into this rendering layer.
    sourceLayer: 'Traffic flow',

    //Color the roads based on the traffic_level property. 
    strokeColor: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 'red',
        0.33, 'orange',
        0.66, 'green'
    ],

    //Scale the width of roads based on the traffic_level property. 
        strokeWidth: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 6,
        1, 1
    ]
});

//Add the traffic flow layer below the labels to make the map clearer.
map.layers.add(flowLayer, 'labels');

Aby zapoznać się z kompletnym roboczym przykładem wyświetlania danych ze źródła kafelka wektorowego na mapie, zobacz wektorowa warstwa linii kafelka w przykładach usługi Azure Mapy. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Przykładowy kod warstwy wiersza kafelka wektora.

Screenshot showing a map displaying data from a vector tile source.

Połączenie źródła danych do warstwy

Dane są renderowane na mapie przy użyciu warstw renderowania. Co najmniej jedna warstwa renderowania może odwoływać się do jednego źródła danych. Następujące warstwy renderowania wymagają źródła danych:

Warstwa bąbelkowa — renderuje dane punktów jako skalowane okręgi na mapie.
Warstwa symboli — renderuje dane punktów jako ikony lub tekst.
Warstwa mapy cieplnej — renderuje dane punktów jako mapę cieplną o gęstości.
Warstwa liniowa — renderuje linię i renderuje kontur wielokątów.
Warstwa wielokątna — wypełnia obszar wielokąta kolorem stałym lub wzorcem obrazu.

Poniższy kod pokazuje, jak utworzyć źródło danych, dodać je do mapy i połączyć go z warstwą bąbelka. Następnie zaimportuj dane punktu GeoJSON ze zdalnej lokalizacji do źródła danych.

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

//Create a layer that defines how to render points in the data source and add it to the map.
map.layers.add(new atlas.layer.BubbleLayer(source));

//Load the earthquake data.
source.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson');

Istnieją inne warstwy renderowania, które nie łączą się z tymi źródłami danych, ale bezpośrednio ładują dane do renderowania.

Warstwa obrazu — nakłada pojedynczy obraz na wierzchu mapy i wiąże narożniki z zestawem określonych współrzędnych.
Warstwa kafelka — nakłada warstwę kafelka rastrowego na wierzchu mapy.

Jedno źródło danych z wieloma warstwami

Wiele warstw można połączyć z jednym źródłem danych. Istnieje wiele różnych scenariuszy, w których ta opcja jest przydatna. Rozważmy na przykład scenariusz, w którym użytkownik rysuje wielokąt. Powinniśmy renderować i wypełniać obszar wielokąta, gdy użytkownik dodaje punkty do mapy. Dodanie linii stylowanej w celu nakreślenia wielokąta ułatwia wyświetlanie krawędzi wielokąta, gdy użytkownik rysuje. Aby wygodnie edytować poszczególne pozycje w wielokącie, możemy dodać uchwyt, taki jak pinezka lub znacznik, nad każdą pozycją.

Map showing multiple layers rendering data from a single data source

W większości platform mapowania potrzebny jest obiekt wielokątny, obiekt liniowy i pinezka dla każdej pozycji w wielokącie. W miarę modyfikacji wielokąta należy ręcznie zaktualizować wiersz i pinezki, co może szybko stać się złożone.

W przypadku usługi Azure Mapy wystarczy jeden wielokąt w źródle danych, jak pokazano w poniższym kodzie.

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

//Create a polygon and add it to the data source.
source.add(new atlas.data.Feature(
        new atlas.data.Polygon([[[/* Coordinates for polygon */]]]));

//Create a polygon layer to render the filled in area of the polygon.
var polygonLayer = new atlas.layer.PolygonLayer(source, 'myPolygonLayer', {
     fillColor: 'rgba(255,165,0,0.2)'
});

//Create a line layer for greater control of rendering the outline of the polygon.
var lineLayer = new atlas.layer.LineLayer(source, 'myLineLayer', {
     strokeColor: 'orange',
     strokeWidth: 2
});

//Create a bubble layer to render the vertices of the polygon as scaled circles.
var bubbleLayer = new atlas.layer.BubbleLayer(source, 'myBubbleLayer', {
     color: 'orange',
     radius: 5,
     strokeColor: 'white',
     strokeWidth: 2
});

//Add all layers to the map.
map.layers.add([polygonLayer, lineLayer, bubbleLayer]);

Napiwek

Podczas dodawania warstw do mapy przy użyciu map.layers.add funkcji identyfikator lub wystąpienie istniejącej warstwy można przekazać jako drugi parametr. Spowoduje to, że mapa wstawia nową warstwę dodaną poniżej istniejącej warstwy. Oprócz przekazania identyfikatora warstwy ta metoda obsługuje również następujące wartości.