Sdílet prostřednictvím

Kurz: Migrace webové aplikace z Google Maps

Většina webových aplikací, které používají Mapy Google, používá sadu JavaScript SDK Google Maps V3. Webová sada SDK služby Azure Maps je vhodná sada SDK založená na Azure pro migraci. Webová sada SDK služby Azure Maps umožňuje přizpůsobit interaktivní mapy pomocí vlastního obsahu a obrázků. Aplikaci můžete spustit na webových i mobilních aplikacích. Tento ovládací prvek využívá WebGL a umožňuje vykreslovat rozsáhlé datové sady s vysokým výkonem. Vyvíjejte pomocí této sady SDK pomocí JavaScriptu nebo TypeScriptu. Tento kurz ukazuje:

  • Načti mapu
  • Lokalizace mapy
  • Přidejte značky, čáry a mnohoúhelníky.
  • Zobrazení informací ve vyskakovacím okně nebo okně s informacemi
  • Načtení a zobrazení dat KML a GeoJSON
  • Značky clusteru
  • Překrýt dlaždicovou vrstvu
  • Zobrazení provozních dat
  • Přidejte překrytí země

Navíc:

  • Jak provádět běžné úlohy mapování pomocí webové sady SDK služby Azure Maps
  • Osvědčené postupy pro zlepšení výkonu a uživatelského prostředí
  • Tipy k používání pokročilejších funkcí dostupných ve službě Azure Maps

Pokud migrujete existující webovou aplikaci, zkontrolujte, jestli používá knihovnu ovládacích prvků mapování open source. Příklady knihovny pro správu open-source map jsou: Cesium, Leaflet a OpenLayers. Aplikaci můžete migrovat i v případě, že používá knihovnu správy map open source a nechcete používat webovou sadu SDK služby Azure Maps. V takovém případě připojte aplikaci ke službám Azure Maps Render (cestovní dlaždice | satelitní dlaždice). Následující body podrobně uvádějí, jak používat Azure Maps v některých běžně používaných knihovnách pro správu opensourcových map.

Pokud vyvíjíte pomocí javascriptové architektury, může být užitečný jeden z následujících opensourcových projektů:

Požadavky

Pokud ještě nemáte předplatné Azure, vytvořte si napřed bezplatný účet.

Poznámka:

Další informace o ověřování ve službě Azure Maps najdete v tématu Správa ověřování v Azure Maps.

Podpora klíčových funkcí

Tabulka uvádí klíčové funkce rozhraní API v sadě JavaScript SDK Google Maps V3 a podporovanou funkci rozhraní API ve webové sadě SDK služby Azure Maps.

Funkce Google Maps Podpora webové sady SDK služby Azure Maps
Značky ✓
Shlukování markerů ✓
Lomené čáry a mnohoúhelníky ✓
Datové vrstvy ✓
Pozemní překryvy ✓
Teplotní mapy ✓
Vrstvy dlaždic ✓
Vrstva KML ✓
Nástroje pro kreslení ✓
Služba Geocoder ✓
Směrová služba ✓
Služba Matice vzdálenosti ✓

Významné rozdíly ve webových sadách SDK

Tady jsou některé klíčové rozdíly mezi službami Google Maps a webovými sadami SDK Služby Azure Maps, o nichž je potřeba vědět:

  • Kromě poskytování hostovaného koncového bodu pro přístup k webové sadě SDK služby Azure Maps je k dispozici balíček npm. Další informace o tom, jak vložit balíček webové sady SDK do aplikací, najdete v tématu Použití ovládacího prvku mapy Azure Maps. Tento balíček obsahuje také definice TypeScriptu.
  • Nejprve musíte vytvořit instanci třídy Map v Azure Maps. Před programovou interakcí s mapou počkejte, než se mapy ready nebo load událost aktivuje. Tento příkaz zajistí, že se načtou všechny mapové prostředky a budou připravené k použití.
  • Obě platformy používají pro základní mapy podobný dlaždicový systém. Dlaždice v Mapách Google jsou 256 pixelů v rozměru; Dlaždice v Azure Maps jsou však v rozměru 512 pixelů. Pokud chcete mít stejné zobrazení mapy v Azure Maps jako v Google Maps, odečtěte od úrovně přiblížení Google Maps číslo jedna v Azure Maps.
  • Souřadnice v Google Maps se označují jako latitude,longitude, zatímco Azure Maps používá longitude,latitude. Formát Azure Maps je v souladu se standardním [x, y]formátem, za kterým následuje většina platforem GIS.
  • Obrazce ve webové sadě SDK služby Azure Maps jsou založené na schématu GeoJSON. Pomocné třídy jsou vystaveny prostřednictvím prostor názvů atlas.data. Je zde také třída atlas.Shape Tato třída slouží k zabalení objektů GeoJSON, aby bylo možné snadno aktualizovat a udržovat data vázáním.
  • Souřadnice v Azure Maps jsou definovány jako objekty Pozice. Souřadnice je zadána jako číselná matice ve formátu [longitude,latitude]. Určí se to také pomocí nového atlas.data.Position(zeměpisná délka, zeměpisná šířka).

    Návod

    Třída Position má statickou pomocnou metodu pro import souřadnic, které jsou ve formátu "zeměpisná šířka, zeměpisná délka". Metoda atlas.data.Position.fromLatLng může být často nahrazena metodou new google.maps.LatLng v kódu Google Maps.

  • Místo zadávání informací o stylu jednotlivých obrazců přidaných do mapy odděluje Azure Maps styly od dat. Data jsou uložená ve zdroji dat a jsou připojená k vykreslovacím vrstvě. Kód Azure Maps používá zdroje dat k vykreslení dat. Tento přístup poskytuje vyšší výhodu výkonu. Mnoho vrstev navíc podporuje styly řízené daty, kde je možné přidat obchodní logiku do možností stylu vrstvy. Tato podpora mění způsob vykreslování jednotlivých obrazců v rámci vrstvy na základě vlastností definovaných v obrazci.

Příklady webové sady SDK vedle sebe

Tato kolekce obsahuje ukázky kódu pro každou platformu a každá ukázka se zabývá běžným případem použití. Účelem je pomoct migrovat webovou aplikaci ze sady JavaScript SDK Služby Google Maps V3 do sady Azure Maps Web SDK. Ukázky kódu související s webovými aplikacemi jsou k dispozici v JavaScriptu. Azure Maps ale také poskytuje definice TypeScriptu jako jinou možnost prostřednictvím modulu npm.

Témata

Načti mapu

Obě sady SDK mají stejný postup pro načtení mapy:

  • Přidejte odkaz na mapovou sadu SDK.
  • div Přidejte značku do textu stránky, která slouží jako zástupný symbol pro mapu.
  • Vytvořte funkci JavaScriptu, která se volá při načtení stránky.
  • Vytvořte instanci příslušné třídy mapy.

Některé klíčové rozdíly

  • Google Maps vyžaduje, aby byl v odkazu na skript rozhraní API zadán klíč účtu. Přihlašovací údaje pro autentizaci pro Azure Maps jsou specifikovány jako možnosti třídy map. Tyto přihlašovací údaje můžou být klíčem předplatného nebo informacemi o Microsoft Entra.
  • Google Maps přijímá funkci zpětného volání v odkazu na skript rozhraní API, která se používá k volání inicializační funkce pro načtení mapy. Událost onload stránky by se měla použít v Azure Maps.
  • Při odkazování na div prvek, ve kterém se mapa vykresluje, třída v Azure Maps vyžaduje pouze hodnotu Map, ale Google Maps vyžadují objekt id.
  • Souřadnice v Azure Maps jsou definovány jako objekty Pozice, které lze zadat jako jednoduché číselné pole ve formátu [longitude, latitude].
  • Úroveň přiblížení v Azure Maps je o jednu úroveň nižší než úroveň přiblížení v Google Maps. Tato nesrovnalost je způsobená rozdílem ve velikostech dlaždicového systému na těchto dvou platformách.
  • Azure Maps nepřidává na plátno mapy žádné navigační ovládací prvky. Ve výchozím nastavení tedy mapa neobsahuje tlačítka lupy a tlačítka stylu mapy. Existují ale možnosti ovládacích prvků pro přidání výběru stylu mapy, tlačítka přiblížení, kompasu, ovládání rotace a ovládání náklonu.
  • V Azure Maps se přidá obslužná rutina události pro monitorování ready události instance mapy. Tato událost se aktivuje, když mapa dokončí načtení kontextu WebGL a všech potřebných prostředků. Do této obslužné rutiny události přidejte libovolný kód, který chcete spustit po dokončení načítání mapy.

Následující příklady používají Mapy Google k načtení mapy vycentrované na New York na zadaných souřadnicích. Zeměpisná délka: -73,985, zeměpisná šířka: 40,747 a mapa je na úrovni přiblížení 12.

Před: Mapy Google

Zobrazte mapu Google, která je vycentrovaná a přiblížená na určité místo.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(40.747, -73.985),
                zoom: 12
            });
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Spuštěním tohoto kódu v prohlížeči se zobrazí mapa, která vypadá jako na následujícím obrázku:

Google Mapy - Jednoduché

Po: Azure Maps

Načtěte mapu se stejným zobrazením ve službě Azure Maps, spolu s ovládáním stylu mapy a tlačítky přiblížení.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- 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: [-73.985, 40.74],  //Format coordinates as longitude, latitude.
                zoom: 11,   //Subtract the zoom level by one.

                //Specify authentication information when loading the map.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Add zoom controls to bottom right of map.
                map.controls.add(new atlas.control.ZoomControl(), {
                    position: 'bottom-right'
                });

                //Add map style control in top left corner of map.
                map.controls.add(new atlas.control.StyleControl(), {
                    position: 'top-left'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Spuštěním tohoto kódu v prohlížeči se zobrazí mapa, která vypadá jako na následujícím obrázku:

Jednoduché Azure Maps

Další informace o tom, jak nastavit a používat ovládací prvek mapy Azure Maps ve webové aplikaci, najdete v tématu Použití ovládacího prvku mapy Azure Maps.

Poznámka:

Na rozdíl od Google Maps nevyžaduje Azure Maps počáteční střed a úroveň přiblížení pro načtení mapy. Pokud se tyto informace při načítání mapy nezadá, Azure Maps se pokusí určit město uživatele. Mapu to zacentruje a přiblíží.

Další zdroje informací:

Lokalizace mapy

Pokud je vaše cílová skupina rozložená do více zemí nebo oblastí nebo mluví různými jazyky, je lokalizace důležitá.

Před: Mapy Google

Pokud chcete lokalizovat Mapy Google, přidejte parametry jazyka a oblasti.

<script type="text/javascript" src=" https://maps.googleapis.com/maps/api/js?callback=initMap&key={api-Key}&language={language-code}&region={region-code}" async defer></script>

Tady je příklad Google Maps s jazykem nastaveným na "fr-FR".

Lokalizace Google Maps

Po: Azure Maps

Azure Maps nabízí dva různé způsoby nastavení jazyka a regionálního zobrazení mapy. První možností je přidat tyto informace do globálního oboru názvů atlas. Výsledkem je, že všechny instance ovládacího prvku mapy ve vaší aplikaci se nastaví ve výchozím nastavení. Následující akce nastaví jazyk na francouzštinu ("fr-FR") a regionální zobrazení na "Auto":

atlas.setLanguage('fr-FR');
atlas.setView('auto');

Druhou možností je předat tyto informace do možností mapy při načítání mapy. Nějak tak:

map = new atlas.Map('myMap', {
    language: 'fr-FR',
    view: 'auto',

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

Poznámka:

V Azure Maps je možné načíst více instancí mapy na stejné stránce s různými nastaveními jazyka a oblasti. Po načtení mapy lze tato nastavení také aktualizovat.

Další informace o podporovaných jazycích najdete v tématu Podpora lokalizace v Azure Maps.

Tady je příklad služby Azure Maps s jazykem nastaveným na fr a oblastí uživatele nastavenou na fr-FR.

Snímek obrazovky znázorňující lokalizovanou verzi mapy Azure Maps s jazykem nastaveným na francouzštinu

Nastavení zobrazení mapy

Dynamické mapy v Azure i Google Maps se dají programově přesunout do nových geografických lokalit. Uděláte to tak, že zavoláte příslušné funkce v JavaScriptu. Příklady ukazují, jak zobrazit satelitní letecké snímky na mapě, umístit mapu na určitou lokalitu a změnit úroveň přiblížení na 15 v Mapách Google. Používají se následující souřadnice umístění: zeměpisná délka: -111.0225 a zeměpisná šířka: 35.0272.

Poznámka:

Google Maps používá dlaždice, které mají rozměry 256 pixelů, zatímco Azure Maps používá větší 512 pixelovou dlaždici. Služba Azure Maps proto vyžaduje méně síťových požadavků, aby se načetla stejná oblast mapy jako Mapy Google. Vzhledem k tomu, jak funguje mřížka dlaždic v ovládacích prvcích map, je potřeba při použití Azure Maps odečíst úroveň přiblížení používanou v Google Maps o jedna. Tato aritmetická operace zajišťuje, že větší dlaždice ve službě Azure Maps vykreslují stejnou oblast mapy jako v Mapách Google.

Před: Mapy Google

Ovládací prvek mapy Google Maps přesuňte pomocí metody setOptions. Tato metoda umožňuje určit střed mapy a úroveň přiblížení.

map.setOptions({
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    center: new google.maps.LatLng(35.0272, -111.0225),
    zoom: 15
});

Nastavení zobrazení v Mapách Google

Po: Azure Maps

V Azure Maps změňte pozici mapy pomocí setCamera metody a změňte styl mapy pomocí setStyle metody. Souřadnice v Azure Maps jsou ve formátu "zeměpisná délka, zeměpisná šířka" a hodnota úrovně přiblížení se odečte o jednu.

map.setCamera({
    center: [-111.0225, 35.0272],
    zoom: 14
});

map.setStyle({
    style: 'satellite'
});

Snímek obrazovky mapy Azure Maps s vlastností stylu nastavenou na satelit

Další zdroje informací:

Přidání značky

Ve službě Azure Maps existují různé způsoby, kterými se data bodů dají vykreslit na mapě:

  • Značky HTML – vykreslují body pomocí tradičních prvků DOM. Značky HTML podporují přetahování.
  • Symbolová vrstva – Vykresluje body pomocí ikony nebo textu v kontextu WebGL.
  • Bublinová vrstva – vykreslí body jako kruhy na mapě. Radii kruhů lze škálovat na základě vlastností v datech.

Vykreslujte vrstvy symbolů a bublinové vrstvy v kontextu WebGL. Obě vrstvy můžou vykreslit velké sady bodů na mapě. Tyto vrstvy vyžadují, aby data byla uložena ve zdroji dat. Po spuštění události by se do mapy ready měly přidat zdroje dat a vrstvy vykreslování. Značky HTML se vykreslují jako prvky DOM na stránce a nepoužívají zdroj dat. Čím více prvků DOM má stránka, tím pomalejší bude stránka. Pokud na mapě vykreslujete více než několik stovek bodů, doporučujeme místo toho použít jednu z vykreslovacích vrstev.

Přidejme k mapě značku s číslem 10 umístěným jako štítek. Použijte délku: -0,2 a zeměpisnou šířku: 51,5.

Před: Mapy Google

Pomocí Google Maps přidejte značky do mapy pomocí google.maps.Marker třídy a jako jednu z možností určete mapu.

//Create a marker and add it to the map.
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.5, -0.2),
    label: '10',
    map: map
});

značka Google Maps

After: Azure Maps s využitím značek HTML

Ve službě Azure Maps použijte značky HTML k zobrazení bodu na mapě. Pro aplikace, které potřebují zobrazit jenom několik bodů na mapě, se doporučují značky HTML. Pokud chcete použít značku HTML, vytvořte instanci atlas.HtmlMarker třídy. Nastavte možnosti textu a umístění a přidejte značku do mapy pomocí map.markers.add metody.

//Create a HTML marker and add it to the map.
map.markers.add(new atlas.HtmlMarker({
    text: '10',
    position: [-0.2, 51.5]
}));

Snímek obrazovky mapy Azure Maps se značkou HTML

Po: Azure Maps používá vrstvu symbolů

Pro vrstvu Symbol přidejte data do zdroje dat. Připojte zdroj dat k vrstvě. Kromě toho by se zdroj dat a vrstva měly přidat do mapy po vyvolání události ready. Pokud chcete vykreslit jedinečnou textovou hodnotu nad symbolem, musí být textové informace uloženy jako vlastnost datového bodu. Vlastnost musí být odkazována v možnosti textField vrstvy. Tento přístup je o něco více práce než použití značek HTML, ale lepší výkon.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- 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, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

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

                //Create a point feature, add a property to store a label for it, and add it to the data source.
                datasource.add(new atlas.data.Feature(new atlas.data.Point([-0.2, 51.5]), {
                    label: '10'
                }));

                //Add a layer for rendering point data as symbols.
                map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                    textOptions: {
                        //Use the label property to populate the text for the symbols.
                        textField: ['get', 'label'],
                        color: 'white',
                        offset: [0, -1]
                    }
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Snímek obrazovky mapy Azure Maps se zobrazeným modrým špendlíkem

Další zdroje informací:

Přidání vlastní značky

Vlastní obrázky můžete použít k reprezentaci bodů na mapě. Následující mapa používá vlastní obrázek k zobrazení bodu na mapě. Bod se zobrazí v zeměpisné šířce: 51,5 a zeměpisná délka: -0,2. Ukotvení posune pozici značky, aby se bod ikony připínáku zarovná se správnou polohou na mapě.

Obrázek žlutého připínáku
žlutý-připínáček.png

Před: Mapy Google

Vytvořte vlastní značku zadáním Icon objektu, který obsahuje url odkaz na obrázek. Zadejte bod, aby anchor zarovnal bod obrázku špendlíku se souřadnicí na mapě. Hodnota ukotvení v Google Maps je relativní vzhledem k levému hornímu rohu obrázku.

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.5, -0.2),
    icon: {
        url: 'https://samples.azuremaps.com/images/icons/ylw-pushpin.png',
        anchor: new google.maps.Point(5, 30)
    },
    map: map
});

Vlastní značka Google Maps

After: Azure Maps s využitím značek HTML

Pokud chcete přizpůsobit značku HTML, předejte kód HTML string nebo HTMLElement do možnosti htmlContent značky. anchor Pomocí možnosti můžete určit relativní pozici značky vzhledem ke souřadnici pozice. Přiřaďte k anchor možnosti jeden z devíti definovaných referenčních bodů. Tyto definované body jsou: "střed", "nahoře", "dole", "vlevo", "vpravo", "vlevo nahoře", "vpravo nahoře", "vlevo dole", "vpravo dole". Ve výchozím nastavení je obsah ukotvený do dolního středu obsahu HTML. Pokud chcete usnadnit migraci kódu z Google Maps, nastavte anchor na "vlevo nahoře" a pak použijte pixelOffset možnost se stejným posunem, který se používá v Google Maps. Posuny v Azure Maps se pohybují opačným směrem než posuny v Google Maps. Vynásobte tedy posuny o mínus jednu.

Návod

Přidejte pointer-events:none jako styl do obsahu html, abyste zakázali výchozí chování přetažení v Microsoft Edge, které zobrazí nežádoucí ikonu.

map.markers.add(new atlas.HtmlMarker({
    htmlContent: '<img src="https://samples.azuremaps.com/images/icons/ylw-pushpin.png" style="pointer-events: none;" />',
    anchor: 'top-left',
    pixelOffset: [-5, -30],
    position: [-0.2, 51.5]
}));

Snímek obrazovky mapy Azure Maps se zobrazeným žlutým připínáčkem

Po: Azure Maps používá vrstvu symbolů

Vrstvy symbolů v Azure Maps podporují také vlastní image. Nejprve načtěte obrázek do prostředků mapy a přiřaďte mu nějaké jedinečné ID. Odkazujte na obrázek ve vrstvě symbolů. offset Pomocí možnosti můžete obrázek zarovnat ke správnému bodu na mapě. anchor Pomocí možnosti můžete určit relativní pozici symbolu vzhledem ke souřadnicům pozice. Použijte jeden z devíti definovaných referenčních bodů. Tyto body jsou: "střed", "horní", "dolní", "vlevo", "vpravo", "vlevo nahoře", "vpravo nahoře", "vlevo dole", "vpravo dole". Ve výchozím nastavení je obsah ukotvený do dolního středu obsahu HTML. Pokud chcete usnadnit migraci kódu z Google Maps, nastavte anchor na "vlevo nahoře" a pak použijte offset možnost se stejným posunem, který se používá v Google Maps. Posuny v Azure Maps se pohybují opačným směrem než posuny v Google Maps. Vynásobte tedy posuny o mínus jednu.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- 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, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Load the custom image icon into the map resources.
                map.imageSprite.add('my-yellow-pin', 'https://samples.azuremaps.com/images/icons/ylw-pushpin.png').then(function () {

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

                    //Create a point and add it to the data source.
                    datasource.add(new atlas.data.Point([-0.2, 51.5]));

                    //Add a layer for rendering point data as symbols.
                    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            //Set the image option to the id of the custom icon that was loaded into the map resources.
                            image: 'my-yellow-pin',
                            anchor: 'top-left',
                            offset: [-5, -30]
                        }
                    }));
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Snímek obrazovky mapy Azure Maps se žlutým připínáčkem zobrazeným na mapě v Londýně

Návod

Pokud chcete vykreslit pokročilé vlastní body, použijte několik vrstev vykreslování společně. Řekněme například, že chcete mít více připínáčků, které mají stejnou ikonu na různých barevných kruzích. Místo vytvoření skupiny obrázků pro každý překryv barev přidejte vrstvu symbolů nad bublinovou vrstvu. Ujistěte se, že připínáky odkazují na stejný zdroj dat. Tento přístup bude efektivnější než vytváření a údržba spousty různých imagí.

Další zdroje informací:

Přidání lomené čáry

Pomocí čar můžete znázorňovat čáru nebo cestu na mapě. Vytvoříme na mapě přerušovanou čáru.

Před: Mapy Google

Třída Polyline přijímá sadu možností. Předejte pole souřadnic v path možnosti polylinie.

//Get the center of the map.
var center = map.getCenter();

//Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
};

//Create the polyline.
var line = new google.maps.Polyline({
    path: [
        center,
        new google.maps.LatLng(center.lat() - 0.5, center.lng() - 1),
        new google.maps.LatLng(center.lat() - 0.5, center.lng() + 1)
    ],
    strokeColor: 'red',
    strokeOpacity: 0,
    strokeWeight: 4,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '20px'
    }]
});

//Add the polyline to the map.
line.setMap(map);

Mapa Google polyline

Po: Azure Maps

Lomené čáry se nazývají LineString nebo MultiLineString objekty. Tyto objekty lze přidat do zdroje dat a vykreslit pomocí vrstvy čáry. Přidejte LineString ke zdroji dat a poté přidejte zdroj dat do LineLayer pro jeho vykreslení.

//Get the center of the map.
var center = map.getCamera().center;

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

//Create a line and add it to the data source.
datasource.add(new atlas.data.LineString([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5]
]));

//Add a layer for rendering line data.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 4,
    strokeDashArray: [3, 3]
}));

Snímek obrazovky mapy Azure Maps s červenou přerušovanou čárkou, která ukazuje křivku.

Další zdroje informací:

Přidání mnohoúhelníku

Azure Maps a Google Maps poskytují podobnou podporu pro mnohoúhelníky. Mnohoúhelníky se používají k reprezentaci oblasti na mapě. Následující příklady ukazují, jak vytvořit mnohoúhelník, který tvoří trojúhelník na základě středové souřadnice mapy.

Před: Mapy Google

Třída Polygon přijímá různé možnosti. Předejte pole souřadnic do možnosti paths mnohoúhelníku.

//Get the center of the map.
var center = map.getCenter();

//Create a polygon.
var polygon = new google.maps.Polygon({
    paths: [
        center,
        new google.maps.LatLng(center.lat() - 0.5, center.lng() - 1),
        new google.maps.LatLng(center.lat() - 0.5, center.lng() + 1),
        center
    ],
    strokeColor: 'red',
    strokeWeight: 2,
    fillColor: 'rgba(0, 255, 0, 0.5)'
});

//Add the polygon to the map
polygon.setMap(map);

Mnohoúhelník Google Maps

Po: Azure Maps

Přidejte Polygon nebo MultiPolygon objekty do zdroje dat. Vykreslení objektu na mapě pomocí vrstev Vykreslení oblasti mnohoúhelníku pomocí polygonové vrstvy A vykreslujte obrys mnohoúhelníku pomocí vrstvy čáry.

//Get the center of the map.
var center = map.getCamera().center;

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

//Create a polygon and add it to the data source.
datasource.add(new atlas.data.Polygon([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5],
    center
]));

//Add a polygon layer for rendering the polygon area.
map.layers.add(new atlas.layer.PolygonLayer(datasource, null, {
    fillColor: 'rgba(0, 255, 0, 0.5)'
}));

//Add a line layer for rendering the polygon outline.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 2
}));

Snímek obrazovky mapy Azure Maps s plnou červenou čárou, která tvoří trojúhelník vyplněný poloprůhlednou zelenou barvou, která ukazuje mnohoúhelník.

Další zdroje informací:

Zobrazení informačního okna

Další informace o entitě lze zobrazit na mapě jako google.maps.InfoWindow třídu v Mapách Google. V Azure Maps lze tuto funkci dosáhnout pomocí atlas.Popup třídy. Další příklady přidají do mapy značku. Po kliknutí na značku se zobrazí informační okno nebo automaticky otevírané okno.

Před: Mapy Google

Vytvořte instanci informačního okna pomocí konstruktoru google.maps.InfoWindow .

<!-- Google Maps Script Reference -->
<script async src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&loading=async"></script>

<script type='text/javascript'>

    async function initMap() {
        // Request needed libraries.
        const { Map, InfoWindow } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker",);

        const map = new Map(document.getElementById("myMap"), {
            zoom: 12,
            center: { lat: 47.608458, lng: -122.335077 },
            disableDefaultUI: true,
            mapId: "4504f8b37365c3d0",
        });

        // Create an info window to share between markers.
        const infoWindow = new InfoWindow();

        // Create the marker.
        const pin = new PinElement();
        const marker = new AdvancedMarkerElement({
            position: { lat: 47.608458, lng: -122.335077 },
            map,
            title: "<B>Hello World!</B>",
            content: pin.element,
            gmpClickable: true,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener("click", ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    }
</script>

Automaticky otevírané okno Map Google

Po: Azure Maps

Pomocí vyskakovacího okna zobrazíme další informace o umístění. Předat HTML string nebo HTMLElement objekt do možnosti content vyskakovacího okna. Máte-li zájem, vyskakovací okna lze zobrazit nezávisle na libovolném obrazci. Proto automaticky otevíraná okna vyžadují, aby byla zadána position hodnota. position Zadejte hodnotu. Pokud chcete zobrazit vyskakovací okno, zavolejte metodu open a předejte map, ve které se má okno zobrazit.

//Add a marker to the map in which to display a popup for.
var marker = new atlas.HtmlMarker({
    position: [-122.33, 47.6]
});

//Add the marker to the map.
map.markers.add(marker);

//Create a popup.
var popup = new atlas.Popup({
    content: '<div style="padding:5px"><b>Hello World!</b></div>',
    position: [-122.33, 47.6],
    pixelOffset: [0, -35]
});

//Add a click event to the marker to open the popup.
map.events.add('click', marker, function () {
    //Open the popup
    popup.open(map);
});

Snímek obrazovky mapy Azure Maps s modrým špendlíkem s automaticky otevíraným oknem, který v něm zobrazuje hello world

Poznámka:

Totéž můžete udělat pomocí symbolu, bubliny, čáry nebo mnohoúhelníku tak, že předáte zvolenou vrstvu kódu události mapy místo značky.

Další zdroje informací:

Import souboru GeoJSON

Google Maps podporuje načítání a dynamické stylování dat GeoJSON prostřednictvím google.maps.Data třídy. Funkce této třídy více odpovídají stylům založeným na datech služby Azure Maps. Ale je tu klíčový rozdíl. Pomocí Google Maps zadáte funkci zpětného volání. Obchodní logika pro stylování jednotlivých funkcí zpracovaných jednotlivě ve vlákně uživatelského rozhraní. Ve službě Azure Maps ale vrstvy podporují zadávání výrazů řízených daty jako možnosti stylů. Tyto výrazy se zpracovávají v době vykreslování v samostatném vlákně. Přístup Azure Maps zlepšuje výkon vykreslování. Tato výhoda je vnímaná, když je potřeba rychle zpracovat větší datové sady.

Následující příklady načítají zdroj GeoJSON všech zemětřesení za posledních sedm dní z USGS. Data zemětřesení se na mapě vykreslují jako škálované kruhy. Barva a měřítko každého kruhu závisí na velikosti každého zemětřesení, které je uloženo ve "mag" vlastnosti každé funkce v sadě dat. Pokud je velikost větší nebo rovna pěti, kruh je červený. Pokud je větší nebo rovno třem, ale menší než pět, kruh je oranžový. Pokud je menší než tři, kruh je zelený. Poloměr každého kruhu je exponenciální hodnota velikosti vynásobená 0,1.

Před: Mapy Google

Zadejte jednu funkci zpětného volání v metodě map.data.setStyle. Uvnitř funkce zpětného volání použijte obchodní logiku pro každou funkci. Načtěte zdroj GeoJSON metodou map.data.loadGeoJson .

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2
            });

            //Define a callback to style each feature.
            map.data.setStyle(function (feature) {

                //Extract the 'mag' property from the feature.
                var mag = parseFloat(feature.getProperty('mag'));

                //Set the color value to 'green' by default.
                var color = 'green';

                //If the mag value is greater than 5, set the color to 'red'.
                if (mag >= 5) {
                    color = 'red';
                }
                //If the mag value is greater than 3, set the color to 'orange'.
                else if (mag >= 3) {
                    color = 'orange';
                }

                return /** @type {google.maps.Data.StyleOptions} */({
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,

                        //Scale the radius based on an exponential of the 'mag' value.
                        scale: Math.exp(mag) * 0.1,
                        fillColor: color,
                        fillOpacity: 0.75,
                        strokeWeight: 2,
                        strokeColor: 'white'
                    }
                });
            });

            //Load the data feed.
            map.data.loadGeoJson(earthquakeFeed);
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Mapy Google GeoJSON

Po: Azure Maps

GeoJSON je základní datový typ v Azure Maps. Importujte ho do zdroje dat pomocí metody datasource.importFromUrl. Použijte vrstvu bublin. Bublinová vrstva poskytuje funkce pro vykreslování škálovaných kruhů na základě vlastností funkcí ve zdroji dat. Místo funkce zpětného volání se obchodní logika převede na výraz a předá se do možností stylu. Výrazy definují, jak obchodní logika funguje. Výrazy lze předat do jiného vlákna a vyhodnotit je na základě dat funkce. Do Azure Maps je možné přidat více zdrojů dat a vrstev, z nichž každá má jinou obchodní logiku. Tato funkce umožňuje vykreslení více datových sad na mapě různými způsoby.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- 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;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

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

                //Load the earthquake data.
                datasource.importDataFromUrl(earthquakeFeed);

                //Create a layer to render the data points as scaled circles.
                map.layers.add(new atlas.layer.BubbleLayer(datasource, null, {
                    //Make the circles semi-transparent.
                    opacity: 0.75,

                    color: [
                        'case',

                        //If the mag value is greater than 5, return 'red'.
                        ['>=', ['get', 'mag'], 5],
                        'red',

                        //If the mag value is greater than 3, return 'orange'.
                        ['>=', ['get', 'mag'], 3],
                        'orange',

                        //Return 'green' as a fallback.
                        'green'
                    ],

                    //Scale the radius based on an exponential of the 'mag' value.
                    radius: ['*', ['^', ['e'], ['get', 'mag']], 0.1]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Snímek obrazovky mapy Azure Maps s různými červenými a oranžovými kruhy vytvořenými pomocí bublinové vrstvy

Další zdroje informací:

Shlukování markerů

Když se na mapě zobrazí velké množství datových bodů, můžou se body překrývat, což ztěžuje čitelnost a použití mapy. Clustering bodových dat je proces kombinování datových bodů, které jsou blízko sebe, a jejich reprezentace na mapě jako jeden clusterovaný datový bod. Když se uživatel přiblíží k mapě, clustery se rozdělí do jednotlivých datových bodů. Seskupování datových bodů vylepšuje uživatelskou zkušenost a zvyšuje výkon map.

V následujících příkladech kód načte geoJSON data zemětřesení z minulého týdne a přidá je do mapy. Clustery se vykreslují jako škálované a barevné kruhy. Měřítko a barva kruhů závisí na počtu bodů, které obsahují.

Poznámka:

Google Maps a Azure Maps používají mírně odlišné algoritmy clusteringu. Proto se někdy distribuce bodů v clusterech liší.

Před: Mapy Google

Použijte knihovnu MarkerCluster pro seskupování značek. Ikony clusteru jsou omezené na obrázky, které mají jako název čísla jedna až pět. Jsou hostované ve stejném adresáři.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        async function initMap() {
            const AdvancedMarkerElement = await google.maps.importLibrary("marker");
            const map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2,
                mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
            });

            //Download the GeoJSON data.
            fetch(earthquakeFeed)
                .then(function (response) {
                    return response.json();
                }).then(function (data) {

                    //Loop through the GeoJSON data and create a marker for each data point.
                    var markers = [];
                    for (var i = 0; i < data.features.length; i++) {
                        markers.push(new google.maps.marker.AdvancedMarkerElement({
                            position: new google.maps.LatLng(data.features[i].geometry.coordinates[1], data.features[i].geometry.coordinates[0])
                        }));
                    }

                    //Create a marker clusterer instance and tell it where to find the cluster icons.
                    var markerCluster = new markerClusterer.MarkerClusterer({map, markers});
                });
        }
    </script>

    <!-- Load the marker cluster library. -->
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&loading=async"></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Shlukování Google Maps

Po: Azure Maps

Přidání a správa dat ve zdroji dat Připojte zdroje dat a vrstvy a pak vykreslujte data. Třída DataSource v Azure Maps nabízí několik možností clusteringu.

  • cluster – Nařizuje zdroji dat, aby seskupil data bodů.
  • clusterRadius - Poloměr v pixelech pro seskupení bodů.
  • clusterMaxZoom - Maximální úroveň přiblížení, ve které dochází ke clusteringu. Pokud přiblížíte více než tuto úroveň, zobrazí se všechny body jako symboly.
  • clusterProperties – Definuje vlastní vlastnosti, které se počítají pomocí výrazů pro všechny body v každém klastru a přidávají se k vlastnostem každého klastru.

Když je clustering povolený, zdroj dat odesílá clusterované a neclusterované datové body do vrstev pro vykreslování. Zdroj dat dokáže seskupit stovky tisíc datových bodů. Clusterovaný datový bod má následující vlastnosti:

Název vlastnosti Typ Popis
cluster booleovský Označuje, jestli funkce představuje cluster.
cluster_id řetězec Jedinečné ID clusteru, které lze použít s DataSource getClusterExpansionZoom, getClusterChildrena getClusterLeaves metody.
point_count Číslo Počet bodů, které cluster obsahuje.
point_count_abbreviated řetězec Řetězec, který zkracuje point_count hodnotu, pokud je dlouhá. (například 4 000 se změní na 4K)

Třída DataSource má následující pomocnou funkci pro přístup k dalším informacím o clusteru pomocí nástroje cluster_id.

Metoda Návratový typ Popis
getClusterChildren(clusterId: number) Promise<Array<Feature<Geometry, any> | Tvar>> Načte podřízené položky daného clusteru na další úrovni přiblížení. Tyto podřízené položky můžou být kombinací obrazců a podkluzů. Podclustery jsou funkce s vlastnostmi odpovídajícími clusteredProperties.
getClusterExpansionZoom(clusterId: number) Číslo příslibu<> Vypočítá úroveň zoomu, při které se shluk začne rozbalovat nebo rozdělovat.
getClusterLeaves(clusterId: number, limit: number, offset: number) Promise<Array<Feature<Geometry, any> | Tvar>> Načte všechny body v clusteru. limit Nastavte, aby se vrátila podmnožina bodů, a použijte offset stránku k procházení bodů.

Při vykreslování clusterovaných dat na mapě je často nejlepší použít dvě nebo více vrstev. Následující příklad používá tři vrstvy. Bublinová vrstva pro kreslení měřítkových barevných kruhů na základě velikosti klusterů. Vrstva symbolů, která vykreslí velikost clusteru jako text. A používá druhou vrstvu symbolů pro vykreslení neclusterovaných bodů. Další informace o dalších způsobech vykreslení clusterovaných dat naleznete v tématu Data bodu clusteringu ve webové sadě SDK.

Přímo naimportujte data GeoJSON pomocí importDataFromUrl funkce ve DataSource třídě v mapě Azure Maps.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- 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, datasource;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource(null, {
                    //Tell the data source to cluster point data.
                    cluster: true
                });
                map.sources.add(datasource);

                //Create layers for rendering clusters, their counts and unclustered points and add the layers to the map.
                map.layers.add([
                    //Create a bubble layer for rendering clustered data points.
                    new atlas.layer.BubbleLayer(datasource, null, {
                        //Scale the size of the clustered bubble based on the number of points in the cluster.
                        radius: [
                            'step',
                            ['get', 'point_count'],
                            20,         //Default of 20 pixel radius.
                            100, 30,    //If point_count >= 100, radius is 30 pixels.
                            750, 40     //If point_count >= 750, radius is 40 pixels.
                        ],

                        //Change the color of the cluster based on the value on the point_cluster property of the cluster.
                        color: [
                            'step',
                            ['get', 'point_count'],
                            'lime',            //Default to lime green. 
                            100, 'yellow',     //If the point_count >= 100, color is yellow.
                            750, 'red'         //If the point_count >= 750, color is red.
                        ],
                        strokeWidth: 0,
                        filter: ['has', 'point_count'] //Only rendered data points which have a point_count property, which clusters do.
                    }),

                    //Create a symbol layer to render the count of locations in a cluster.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            image: 'none' //Hide the icon image.
                        },
                        textOptions: {
                            textField: ['get', 'point_count_abbreviated'],
                            offset: [0, 0.4]
                        }
                    }),

                    //Create a layer to render the individual locations.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
                    })
                ]);

                //Retrieve a GeoJSON data set and add it to the data source. 
                datasource.importDataFromUrl(earthquakeFeed);
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Snímek obrazovky mapy Azure Maps na světě s různými červenými, zelenými a žlutými kruhy s čísly Vytvořeno pomocí tří vrstev, bublinová vrstva pro kreslicí barevné kruhy na základě velikosti shluků. Vrstva symbolů, která vykreslí velikost clusteru jako text a druhou vrstvu symbolů pro vykreslení neclusterovaných bodů.

Další zdroje informací:

Přidat tepelnou mapu

Teplotní mapy, označované také jako mapy hustoty bodů, jsou typem vizualizace dat. Používají se k reprezentaci hustoty dat pomocí rozsahu barev. A často se používají k zobrazení "horkých míst" dat na mapě. Heat mapy představují skvělý způsob, jak vykreslit velké datové sady bodů.

Následující příklady načtou zdroj GeoJSON všech zemětřesení za poslední měsíc z USGS a poté je vykreslí jako váženou tepelnou mapu. Vlastnost "mag" se používá jako váha.

Před: Mapy Google

Pokud chcete vytvořit teplotní mapu, načtěte knihovnu vizualizace, přidáním &libraries=visualization do adresy URL skriptu rozhraní API. Vrstva tepelných map v Mapách Google nepodporuje přímo data GeoJSON. Nejprve si stáhněte data a převeďte je na pole vážených datových bodů:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {

            var map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2,
                mapTypeId: 'satellite'
            });

            //Download the GeoJSON data.
            fetch(url).then(function (response) {
                return response.json();
            }).then(function (res) {
                var points = getDataPoints(res);

                var heatmap = new google.maps.visualization.HeatmapLayer({
                    data: points
                });
                heatmap.setMap(map);
            });
        }

        function getDataPoints(geojson, weightProp) {
            var points = [];

            for (var i = 0; i < geojson.features.length; i++) {
                var f = geojson.features[i];

                if (f.geometry.type === 'Point') {
                    points.push({
                        location: new google.maps.LatLng(f.geometry.coordinates[1], f.geometry.coordinates[0]),
                        weight: f.properties[weightProp]
                    });
                }
            }

            return points;
        } 
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&libraries=visualization" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Tepelná mapa Google Maps

Po: Azure Maps

Načtěte data GeoJSON do datového zdroje a připojte datový zdroj k vrstvě tepelné mapy. Vlastnost, která se používá pro váhu, lze předat do weight možnosti pomocí výrazu. Přímo naimportujte data GeoJSON do Azure Maps pomocí importDataFromUrl funkce ve DataSource třídě.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- 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;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,
                style: 'satellite',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

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

                //Load the earthquake data.
                datasource.importDataFromUrl(earthquakeFeed);

                //Create a layer to render the data points as a heat map.
                map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
                    weight: ['get', 'mag'],
                    intensity: 0.005,
                    opacity: 0.65,
                    radius: 10
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Snímek obrazovky mapy Azure Maps světa s vrstvou teplotní mapy

Další zdroje informací:

Překrýt dlaždicovou vrstvu

Vrstvy dlaždic v Azure Maps se označují jako překryvy obrázků v Google Maps. Vrstvy dlaždic umožňují překrýt velké obrázky, které byly rozděleny do menších dílčích obrázků, jež odpovídají systému dlaždic map. Tento přístup se běžně používá k překrytí velkých obrázků nebo velkých datových sad.

Následující příklady zobrazují vrstvu radarových dlaždic počasí z systému Iowa Environmental Mesonet, který je součástí Iowa State University.

Před: Mapy Google

V Mapách Google lze vrstvy dlaždic vytvořit pomocí google.maps.ImageMapType třídy.

map.overlayMapTypes.insertAt(0, new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
        return "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + coord.x + "/" + coord.y;
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.8
}));

Vrstva dlaždic Google Maps

Po: Azure Maps

Přidejte do mapy vrstvu dlaždic podobně jako jakoukoli jinou vrstvu. Použijte formátovanou adresu URL, která obsahuje zástupné symboly pro x, y a zoom; {x}, {y}, {z} označte vrstvě, kde má přistupovat k dlaždicím. Vrstvy dlaždic Azure Maps také podporují {quadkey}, {bbox-epsg-3857}a {subdomain} zástupné symboly.

Návod

Ve službě Azure Maps lze vrstvy snadno vykreslit pod jiné vrstvy, včetně vrstev základní mapy. Často je žádoucí vykreslit vrstvy dlaždic pod popisky mapy, aby byly snadno čitelné. Metoda map.layers.add přebírá druhý parametr, což je ID vrstvy, do které chcete vložit novou vrstvu pod. Pokud chcete vložit vrstvu dlaždic pod popisky mapy, použijte tento kód: map.layers.add(myTileLayer, "labels");

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256
}), 'labels');

Snímek obrazovky mapy Azure Maps světa s vrstvou dlaždic.

Návod

Žádosti o dlaždici je možné zachytit pomocí transformRequest možnosti mapy. To vám umožní v případě potřeby upravit nebo přidat hlavičky do požadavku.

Další zdroje informací:

Zobrazení provozních dat

Dopravní data mohou být zobrazena do Azure a Google Maps.

Před: Mapy Google

Překryjte data provozu na mapě pomocí vrstvy provozu.

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

Dopravní provoz na Mapách Google

Po: Azure Maps

Azure Maps nabízí několik různých možností zobrazení provozu. Zobrazte dopravní incidenty, jako jsou například uzavírací silnice a nehody, jako jsou ikony na mapě. Překryvný tok provozu a barevně kódované cesty na mapě Barvy lze upravit na základě publikovaného limitu rychlosti vzhledem k normálnímu očekávanému zpoždění nebo absolutnímu zpoždění. Data incidentů v Azure Maps se aktualizují každou minutu a data toku se aktualizují každých dvě minuty.

Přiřaďte požadované hodnoty pro setTraffic možnosti.

map.setTraffic({
    incidents: true,
    flow: 'relative'
});

Snímek obrazovky mapy Azure Maps zobrazující provoz

Pokud vyberete některou z dopravních ikon v Azure Maps, zobrazí se ve vyskakovacím okně další informace.

Snímek obrazovky mapy Azure Maps zobrazující provoz s automaticky otevíraným oknovým oknem zobrazující podrobnosti konkrétního dopravního incidentu

Další zdroje informací:

Přidejte překrytí země

Azure i Google Maps podporují překrytí geograficky odvozovaných obrázků na mapě. Při posouvání a přiblížení mapy se pohybují a škálují obrázky s georeferencemi. V Google Maps se georeferencované obrázky označují jako zemské překryvy, zatímco v Azure Maps se nazývají vrstvy obrazu. Jsou skvělé pro vytváření plánů prostorového uspořádání, překrytí starých map nebo obrázků z dronu.

Před: Mapy Google

Zadejte adresu URL obrázku, který chcete překrýt, a ohraničující rámeček za účelem spojení obrázku s mapou. Tento příklad překryje obrázek mapy Newark New Jersey z roku 1922 na mapě.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map, historicalOverlay;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(40.740, -74.18),
                zoom: 12
            });

            var imageBounds = {
                north: 40.773941,
                south: 40.712216,
                east: -74.12544,
                west: -74.22655
            };

            historicalOverlay = new google.maps.GroundOverlay(
                'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
                imageBounds);
            historicalOverlay.setMap(map);
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Spuštěním tohoto kódu v prohlížeči se zobrazí mapa, která vypadá jako na následujícím obrázku:

Překrytí obrázků Google Maps

Po: Azure Maps

Použijte třídu atlas.layer.ImageLayer ke překrytí georeferencovaných obrázků. Tato třída vyžaduje adresu URL obrázku a sadu souřadnic pro čtyři rohy obrázku. Image musí být hostovaná buď ve stejné doméně, nebo musí mít povolené cors.

Návod

Pokud máte pouze informace o severu, jihu, východě, západu a otočení a nemáte souřadnice pro každý roh obrázku, můžete použít statickou atlas.layer.ImageLayer.getCoordinatesFromEdges metodu.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- 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() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-74.18, 40.740],
                zoom: 12,

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create an image layer and add it to the map.
                map.layers.add(new atlas.layer.ImageLayer({
                    url: 'newark_nj_1922.jpg',
                    coordinates: [
                        [-74.22655, 40.773941], //Top Left Corner
                        [-74.12544, 40.773941], //Top Right Corner
                        [-74.12544, 40.712216], //Bottom Right Corner
                        [-74.22655, 40.712216]  //Bottom Left Corner
                    ]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Snímek obrazovky mapy Azure Maps znázorňující překryvný obrázek nad mapou

Další zdroje informací:

Přidání dat KML do mapy

Azure i Google Maps můžou na mapě importovat a vykreslit data KML, KMZ a GeoRSS. Azure Maps také podporuje GPX, GML, soubory CSV s prostorovými daty, GeoJSON, dobře známý text (WKT), služby webového mapování (WMS), služby webových mapových dlaždic (WMTS) a služby funkcí webového mapování (WFS). Azure Maps čte soubory místně do paměti a ve většině případů dokáže zpracovat větší soubory KML.

Před: Mapy Google

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map, historicalOverlay;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(0, 0),
                zoom: 1
            });

             var layer = new google.maps.KmlLayer({
              url: 'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml',
              map: map
            });
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Spuštěním tohoto kódu v prohlížeči se zobrazí mapa, která vypadá jako na následujícím obrázku:

KML v Mapách Google

Po: Azure Maps

V Azure Maps je GeoJSON hlavním formátem dat používaným ve webové sadě SDK, více prostorových formátů dat je možné snadno integrovat pomocí modulu prostorových vstupně-výstupních operací. Tento modul má funkce pro čtení i zápis prostorových dat a obsahuje také jednoduchou datovou vrstvu, která může snadno vykreslovat data z libovolného z těchto prostorových formátů dat. Pokud chcete číst data v prostorovém datovém souboru, předejte do funkce adresu URL nebo nezpracovaná data jako řetězec nebo objekt blob atlas.io.read . Tím se vrátí všechna analyzovaná data ze souboru, která se pak dají přidat do mapy. KmL je o něco složitější než většina prostorových dat, protože obsahuje mnohem více stylů informací. Třída SpatialDataLayer podporuje většinu těchto stylů, ale obrázky ikon je nutné před načtením dat funkcí načíst do mapy a překryvy země musí být přidány jako vrstvy do mapy samostatně. Při načítání dat přes adresu URL by měla být hostována na koncovém bodu s povoleným CORS nebo by měla být služba proxy předána jako možnost do funkce pro čtení.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

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

    <!-- Add reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

    <script type='text/javascript'>
        var map, datasource, layer;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
            
                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Add a simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read a KML file from a URL or pass in a raw KML string.
                atlas.io.read('https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml').then(async r => {
                    if (r) {

                        //Check to see if there are any icons in the data set that need to be loaded into the map resources.
                        if (r.icons) {
                            //For each icon image, create a promise to add it to the map, then run the promises in parallel.
                            var imagePromises = [];

                            //The keys are the names of each icon image.
                            var keys = Object.keys(r.icons);

                            if (keys.length !== 0) {
                                keys.forEach(function (key) {
                                    imagePromises.push(map.imageSprite.add(key, r.icons[key]));
                                });

                                await Promise.all(imagePromises);
                            }
                        }

                        //Load all features.
                        if (r.features && r.features.length > 0) {
                            datasource.add(r.features);
                        }

                        //Load all ground overlays.
                        if (r.groundOverlays && r.groundOverlays.length > 0) {
                            map.layers.add(r.groundOverlays);
                        }

                        //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>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Snímek obrazovky mapy Azure Maps znázorňující KML s různými barevnými čárami představujícími různé železniční tratě pocházející z přístavu v Chicagu do různých cílů, všechna data pocházející ze souboru KM

Další zdroje informací:

Další ukázky kódu

Tady je několik dalších ukázek kódu souvisejících s migrací Google Maps:

Služby:

Mapování tříd Google Maps V3 na Azure Maps Web SDK

Následující dodatek obsahuje křížový odkaz na běžně používané třídy v Google Maps V3 a ekvivalentní webovou sadu SDK služby Azure Maps.

Základní třídy

Mapy Google Azure Maps
google.maps.Map atlas. Mapa
google.maps.InfoWindow atlas. Vyskakovací okno
google.maps.InfoWindowOptions atlas.Možnosti automaticky otevíraného okna
google.maps.LatLng atlas.data.Position
google.maps.LatLngBounds atlas.data.BoundingBox
google.maps.MapOptions atlas. CameraOptions
atlas. CameraBoundsOptions
atlas. ServiceOptions
atlas. StyleOptions
atlas. UserInteractionOptions
google.maps.Point atlas. Pixel

Překryvné třídy

Mapy Google Azure Maps
google.maps.Marker atlas. HtmlMarker
atlas.data.Point
google.maps.MarkerOptions atlas. HtmlMarkerOptions
atlas.layer.SymbolLayer
atlas. SymbolLayerOptions
atlas. IconOptions
atlas. Možnosti textu
atlas.layer.BubbleLayer
atlas. BubbleLayerOptions
google.maps.Polygon atlas.data.Polygon
google.maps.PolygonOptions atlas.layer.PolygonLayer
atlas. PolygonLayerOptions
atlas.layer.LineLayer
atlas. LineLayerOptions
google.maps.Polyline atlas.data.LineString
google.maps.PolylineOptions atlas.layer.LineLayer
atlas. LineLayerOptions
google.maps.Circle Viz Přidání kruhu na mapu
google.maps.ImageMapType atlas. TileLayer
google.maps.ImageMapTypeOptions atlas. TileLayerOptions
google.maps.GroundOverlay atlas.layer.ImageLayer
atlas. ImageLayerOptions

Třídy služeb

Webová sada SDK služby Azure Maps obsahuje modul služeb, který je možné načíst samostatně. Tento modul zabalí služby Azure Maps REST s webovým rozhraním API a dá se použít v javascriptových, typescriptových a Node.js aplikacích.

Mapy Google Azure Maps
google.maps.Geocoder atlas.service.SearchUrl
google.maps.GeocoderRequest atlas. Možnosti vyhledávací adresy
[atlas. SearchAddressReverseOptions]
atlas. SearchAddressReverseCrossStreetOptions
atlas. SearchAddressStructuredOptions
atlas. SearchAlongRouteOptions
atlas. SearchFuzzyOptions
atlas. SearchInsideGeometryOptions
atlas. SearchNearbyOptions
atlas. SearchPOIOptions
atlas. Možnosti vyhledávání POIC
google.maps.DirectionsService atlas.service.RouteUrl
google.maps.DirectionsRequest atlas. CalculateRouteDirectionsOptions
google.maps.places.PlacesService f

Knihovny

Knihovny přidávají do mapy další funkce. Mnohé z těchto knihoven jsou v základní sadě SDK služby Azure Maps. Tady je několik ekvivalentních tříd, které se mají použít místo těchto knihoven Google Maps.

Mapy Google Azure Maps
Knihovna výkresů Modul nástrojů pro kreslení
Knihovna geometrie atlas.math
Knihovna vizualizací Vrstva teplotní mapy

Vyčistěte prostředky

Není třeba žádné prostředky čistit.

Další kroky

Další informace o migraci na Azure Maps:

Migrace webové služby