Tworzenie mapy

Artykuł
07/04/2023

W tym artykule przedstawiono sposoby tworzenia mapy i animowania mapy.

Ładowanie mapy

Aby załadować mapę, utwórz nowe wystąpienie klasy Map. Podczas inicjowania mapy przekaż identyfikator elementu DIV, aby renderować mapę i przekazać zestaw opcji do użycia podczas ładowania mapy. Jeśli domyślne informacje dotyczące uwierzytelniania nie są określone w atlas przestrzeni nazw, te informacje należy określić w opcjach mapy podczas ładowania mapy. Mapa ładuje kilka zasobów asynchronicznie na potrzeby wydajności. W związku z tym po utworzeniu wystąpienia mapy dołącz ready zdarzenie lub load do mapy, a następnie dodaj więcej kodu, który wchodzi w interakcję z mapą do programu obsługi zdarzeń. Zdarzenie ready jest uruchamiane tak szybko, jak mapa ma wystarczającą ilość zasobów załadowanych do interakcji programowo. Zdarzenie load jest uruchamiane po zakończeniu ładowania początkowego widoku mapy.

Możesz również załadować wiele map na tej samej stronie, aby uzyskać przykładowy kod, który pokazuje ładowanie wielu map na tej samej stronie, zobacz Wiele map w Azure Maps Przykłady. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Wiele map kodu źródłowego.

Zrzut ekranu przedstawiający siatkę przyciągania na mapie.

Porada

W przypadku korzystania z wielu map na tej samej stronie można użyć tych samych lub różnych ustawień uwierzytelniania i języka.

Pokaż jedną kopię świata

Gdy mapa jest pomniejszana na szerokim ekranie, wiele kopii świata jest wyświetlanych w poziomie. Ta opcja jest świetna w przypadku niektórych scenariuszy, ale w przypadku innych aplikacji pożądane jest, aby zobaczyć jedną kopię świata. To zachowanie jest implementowane przez ustawienie opcji mapy renderWorldCopies na falsewartość .

//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false

Opcje mapy

Podczas tworzenia mapy istnieje kilka różnych typów opcji, które można przekazać, aby dostosować sposób działania mapy:

Aparaty CameraOptions i CameraBoundOptions służą do określania obszaru, w ramach którego powinna być wyświetlana mapa.
Usługa ServiceOptions służy do określania sposobu interakcji mapy z usługami, które zasilają mapę.
StyleOptions służą do określania mapy powinny być stylizowane i renderowane.
Funkcja UserInteractionOptions służy do określania sposobu osiągnięcia mapy, gdy użytkownik wchodzi w interakcję z mapą.

Te opcje można również zaktualizować po załadowaniu mapy przy użyciu setCamerafunkcji , setServiceOptions, setStylei setUserInteraction .

Sterowanie kamerą mapy

Istnieją dwa sposoby ustawiania wyświetlanego obszaru mapy przy użyciu aparatu mapy. Opcje aparatu można ustawić podczas ładowania mapy. Możesz też wywołać setCamera tę opcję w dowolnym momencie po załadowaniu mapy, aby programowo zaktualizować widok mapy.

Ustawianie aparatu

Aparat mapy kontroluje, co jest wyświetlane w widoku kanwy mapy. Opcje aparatu można przekazać do opcji mapy podczas inicjowania lub przekazywania do funkcji mapy setCamera .

// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12

    //Additional map options.
};

//Update the map camera at anytime using setCamera function.
map.setCamera({
    center: [-110, 45],
    zoom: 5 
});

Właściwości mapy, takie jak środek i poziom powiększenia, są częścią właściwości CameraOptions .

Ustawianie granic aparatu

Pole ograniczenia może służyć do aktualizowania aparatu mapy. Jeśli pole ograniczenia zostało obliczone na podstawie danych punktów, często przydaje się określenie wartości dopełniania pikseli w opcjach aparatu do uwzględnienia rozmiaru ikony. To wypełnienie pikseli pomaga zagwarantować, że punkty nie spadną z krawędzi ekranu mapy.

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

W poniższym kodzie obiekt Map jest konstruowany za pomocą metody new atlas.Map(). Właściwości mapy, takie jak CameraBoundsOptions można zdefiniować za pomocą funkcji setCamera klasy Map. Właściwości granic i wypełniania są ustawiane przy użyciu polecenia setCamera.

Animowanie widoku mapy

Podczas ustawiania opcji aparatu mapy można również ustawić opcje animacji . Te opcje określają typ animacji i czas trwania, który powinien potrwać, aby przenieść kamerę.

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

W poniższym kodzie pierwszy blok kodu tworzy mapę i ustawia style map enter i zoom. W drugim bloku kodu zostanie utworzona procedura obsługi zdarzeń kliknięcia dla przycisku animowania. Po wybraniu tego przycisku funkcja jest wywoływana setCamera z kilkoma wartościami losowymi dla opcji CameraOptions i AnimationOptions.

<!DOCTYPE html>
 <html>
 <head>

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
  <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
  
  
    <script type="text/javascript">
    var map;
    
    function InitMap()
    {
        map = new atlas.Map('myMap', {
        center: [-122.33, 47.6],
        zoom: 12,
        view: 'Auto',
        style: 'road',

      
        // 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}'
        }      
      });
    }
    
    /* Animate map view to set camera location
       to random points on the map*/
    function animateMap() {
      map.setCamera({
      zoom: Math.random() *2 + 12,
      duration: 1000,
      type: 'fly'  
      });
    }
  </script>

  <style>
    button {
      position: absolute;
      top: 10px;
      left: 10px;
    }  
  </style>

</head>

<html style='width:100%;height:100%;'> 
  <body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'> 
    <div id='myMap' style='position:relative;width:100%;height:100%;'></div>
  <button onclick="animateMap()">Animate Maps</button>
  <div id="my-text-box"></div>
  </body>
</html>

Zrzut ekranu przedstawiający mapę z przyciskiem z etykietą Animuj mapy, które po naciśnięciu przycisku powoduje powiększenie lub powiększenie mapy.

Przekształcenia żądań

Czasami przydaje się możliwość modyfikowania żądań HTTP wysyłanych przez kontrolkę mapy. Na przykład:

Dodaj więcej nagłówków do żądań kafelków dla usług chronionych hasłem.
Zmodyfikuj adresy URL, aby uruchamiać żądania za pośrednictwem usługi serwera proxy.

Opcje usługi mapy mają transformRequest wartość , która może służyć do modyfikowania wszystkich żądań wysyłanych przez mapę przed ich wykonaniem. Opcja transformRequest jest funkcją, która przyjmuje dwa parametry; adres URL ciągu i ciąg typu zasobu, który wskazuje, do czego służy żądanie. Ta funkcja musi zwrócić wynik RequestParameters .

transformRequest: (url: string, resourceType: string) => RequestParameters

W przypadku korzystania z przekształcenia żądania należy zwrócić RequestParameters obiekt, który zawiera url właściwość co najmniej. Poniżej przedstawiono właściwości, które można uwzględnić w RequestParameters obiekcie.

Opcja	Typ	Opis
body	ciąg	Treść żądania POST.
poświadczenia	`'same-origin'` \| `'include'`	Służy do określania ustawienia poświadczeń żądania między źródłami (CORs). Użyj polecenia "include", aby wysyłać pliki cookie z żądaniami między źródłami.
Nagłówki	object	Nagłówki, które mają być wysyłane za pomocą żądania. Obiekt jest parą klucz wartości ciągu.
method	`'GET'` \| `'POST'` \| `'PUT'`	Typ żądania do złożenia. Wartość domyślna to `'GET'`.
typ	`'string'` \| `'json'` \| `'arrayBuffer'`	Format treści odpowiedzi POST.
url	ciąg	Adres URL, który ma zostać żądany.

Typy zasobów najbardziej istotne dla zawartości dodawanej do mapy są wymienione w poniższej tabeli:

Typ zasobu	Opis
Obraz	Żądanie obrazu do użycia z elementem SymbolLayer lub ImageLayer.
Element źródłowy	Żądanie informacji źródłowych, takich jak żądanie TileJSON. Niektóre żądania ze stylów mapy podstawowej używają również tego typu zasobu podczas ładowania informacji źródłowych.
Kafelek	Żądanie z warstwy kafelka (raster lub wektor).
WFS	Żądanie z `WfsClient` modułu Spatial IO do usługi funkcji internetowej OGC. Aby uzyskać więcej informacji, zobacz Nawiązywanie połączenia z usługą WFS.
WebMapService	Żądanie z modułu `OgcMapLayer` Spatial IO do usługi WMS lub WMTS. Aby uzyskać więcej informacji, zobacz Dodawanie warstwy mapy z open Geospatial Consortium (OGC).

Poniżej przedstawiono niektóre typy zasobów, które są zwykle ignorowane, przekazywane przez przekształcenie żądania i są powiązane z stylami mapy podstawowej: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Uznanie autorstwa.

W poniższym przykładzie pokazano, jak zmodyfikować wszystkie żądania do rozmiaru https://example.com , dodając nazwę użytkownika i hasło jako nagłówki do żądania.

var map = new atlas.Map('myMap', {
    transformRequest: function (url, resourceType) {
        //Check to see if the request is to the specified endpoint.
        if (url.indexOf('https://examples.com') > -1) {
            //Add custom headers to the request.
            return {
                url: url,
                header: {
                    username: 'myUsername',
                    password: 'myPassword'
                }
            };
        }

        //Return the URL unchanged by default.
        return { url: url };
    },

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});