Vytvoření mapy

Článek
07/04/2023

V tomto článku se dozvíte, jak vytvořit mapu a animovat ji.

Načítá se mapa.

Pokud chcete načíst mapu, vytvořte novou instanci třídy Map. Při inicializaci mapy předejte ID elementu DIV pro vykreslení mapy a předejte sadu možností, které se mají použít při načítání mapy. Pokud v oboru názvů nejsou zadané atlas výchozí ověřovací informace, je potřeba tyto informace zadat v možnostech mapování při načítání mapy. Mapa načítá několik prostředků asynchronně kvůli výkonu. Proto po vytvoření instance mapy připojte ready k mapě událost nebo load a pak do obslužné rutiny události přidejte další kód, který s mapou komunikuje. Událost se ready aktivuje, jakmile má mapa načtený dostatek prostředků pro interakci prostřednictvím kódu programu. Událost se load aktivuje po úplném načtení počátečního zobrazení mapy.

Na stejnou stránku můžete také načíst více map. Ukázkový kód, který ukazuje načtení více map na stejnou stránku, najdete v části Více map v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Více zdrojových kódů map.

Snímek obrazovky znázorňující mřížku přichycení na mapě

Tip

Při použití více map na stejné stránce můžete použít stejné nebo odlišné nastavení ověřování a jazyka.

Zobrazit jednu kopii světa

Když je mapa oddálit na široké obrazovce, několik kopií světa se zobrazí vodorovně. Tato možnost je skvělá pro některé scénáře, ale pro jiné aplikace je žádoucí vidět jednu kopii světa. Toto chování se implementuje nastavením možnosti mapy renderWorldCopies na falsehodnotu .

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

Možnosti mapy

Při vytváření mapy je k dispozici několik různých typů možností, které je možné předat, abyste přizpůsobili fungování mapy:

Funkce CameraOptions a CameraBoundOptions slouží k určení oblasti, která má mapa zobrazit.
ServiceOptions slouží k určení způsobu interakce mapy se službami, které mapu využívají.
StyleOptions slouží k určení, že mapování má být stylované a vykreslované.
UserInteractionOptions slouží k určení, jak se má mapa dostat, když uživatel s mapou pracuje.

Tyto možnosti je také možné aktualizovat po načtení mapy pomocí setCamerafunkcí , setServiceOptions, setStylea setUserInteraction .

Ovládání mapové kamery

Zobrazenou oblast mapy můžete nastavit dvěma způsoby pomocí kamery mapy. Možnosti kamery můžete nastavit při načítání mapy. Nebo můžete tuto možnost volat setCamera kdykoli po načtení mapy a aktualizovat zobrazení mapy prostřednictvím kódu programu.

Nastavení kamery

Kamera mapy určuje, co se zobrazí v oblasti zobrazení plátna mapy. Možnosti kamery je možné předat do možností mapy při inicializaci nebo předání do funkce 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 
});

Vlastnosti mapy, jako je střed a úroveň přiblížení, jsou součástí vlastností CameraOptions .

Nastavení hranic kamery

K aktualizaci kamery mapy je možné použít ohraničující rámeček. Pokud byl ohraničující rámeček vypočítán z bodových dat, je často užitečné zadat hodnotu odsazení pixelů v možnostech fotoaparátu, aby se zohlednila velikost ikony. Toto odsazení pixelů pomáhá zajistit, aby body neodpadly od okraje zobrazení mapy.

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

V následujícím kódu je objekt Map vytvořen prostřednictvím new atlas.Map(). Vlastnosti mapování, jako CameraBoundsOptions je, lze definovat prostřednictvím funkce setCamera třídy Map. Hranice a vlastnosti odsazení se nastavují pomocí setCamera.

Animovat zobrazení mapy

Při nastavování možností kamery na mapě je také možné nastavit možnosti animace . Tyto možnosti určují typ animace a dobu trvání, které by mělo trvat přesunutí kamery.

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

V následujícím kódu první blok kódu vytvoří mapu a nastaví styly map enter a zoom. V druhém bloku kódu se pro tlačítko animace vytvoří obslužná rutina události kliknutí. Když vyberete toto tlačítko, zavolá se setCamera funkce s náhodnými hodnotami pro CameraOptions a 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>

Snímek obrazovky zobrazující mapu s tlačítkem s popiskem Animovat mapy, které při stisknutí mapy přiblíží nebo oddálí.

Transformace požadavků

Někdy je užitečné, když budete moct upravovat požadavky HTTP vytvořené ovládacím prvku mapování. Příklad:

Přidejte další hlavičky k dlaždici požadavků na služby chráněné heslem.
Upravte adresy URL tak, aby spouštěly požadavky prostřednictvím služby proxy.

Možnosti služby mapy mají transformRequest objekt , který lze použít k úpravě všech požadavků provedených mapou před jejich provedením. Možnost transformRequest je funkce, která přijímá dva parametry: adresu URL řetězce a řetězec typu prostředku, který označuje, k čemu se požadavek používá. Tato funkce musí vrátit výsledek RequestParameters .

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

Při použití transformace požadavku musíte vrátit RequestParameters objekt, který obsahuje url minimálně vlastnost. Následující jsou vlastnosti, které lze zahrnout do objektu RequestParameters .

Možnost	Typ	Description
text	řetězec	Text požadavku POST.
Přihlašovací údaje	`'same-origin'` \| `'include'`	Používá se k určení nastavení přihlašovacích údajů pro požadavky mezi zdroji. Pomocí příkazu include můžete odesílat soubory cookie s požadavky z více zdrojů.
Záhlaví	object	Hlavičky, které se mají spolu s požadavkem odeslat. Objekt je pár hodnot klíče s řetězcovými hodnotami.
method	`'GET'` \| `'POST'` \| `'PUT'`	Typ požadavku, který má být proveden. Výchozí je `'GET'`.
typ	`'string'` \| `'json'` \| `'arrayBuffer'`	Formát textu odpovědi POST.
url	řetězec	Adresa URL, která se má vyžadovat.

Typy prostředků, které jsou nejrelevantní pro obsah, který přidáte do mapy, jsou uvedené v následující tabulce:

Typ prostředku	Description
Image	Žádost o obrázek pro použití s symbolLayer nebo ImageLayer.
Zdroj	Požadavek na informace o zdroji, například požadavek TileJSON. Některé požadavky ze stylů základní mapy také používají tento typ prostředku při načítání informací o zdroji.
dlaždici	Požadavek z vrstvy dlaždic (rastrový nebo vektorový).
WFS	Požadavek z `WfsClient` modulu prostorových vstupně-výstupních operací na službu webových funkcí OGC. Další informace najdete v tématu Připojení ke službě WFS.
Služba webových map	Požadavek z `OgcMapLayer` modulu prostorových vstupně-výstupních operací na službu WMS nebo WMTS. Další informace najdete v tématu Přidání vrstvy mapy z OGC (Open Geospatial Consortium).

Tady jsou některé typy prostředků, které se obvykle ignorují, které se předávají transformací požadavku a které souvisejí se základními styly map: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Atribution.

Následující příklad ukazuje, jak upravit všechny požadavky na velikost https://example.com přidáním uživatelského jména a hesla jako záhlaví požadavku.

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