Självstudie: Migrera en webbapp från Bing-kartor

Webbappar som använder Bing-kartor ofta använder Bing-kartor V8 JavaScript SDK. Azure Maps Web SDK är lämplig Azure-baserad SDK att migrera till. Med Azure Maps Web SDK kan du anpassa interaktiva kartor med ditt eget innehåll och bilder för visning i dina webb- eller mobilprogram. Den här kontrollen använder WebGL, så att du kan rendera stora datauppsättningar med höga prestanda. Utveckla med denna SDK med Hjälp av JavaScript eller TypeScript. I den här självstudien får du lära dig hur man:

  • Läsa in en karta
  • Lokalisera en karta
  • Lägg till kartnålar, polyliner och polygoner.
  • Visa information i ett popup- eller infobox-fönster
  • Läsa in och visa KML- och GeoJSON-data
  • Klustrets pushpins
  • Lägga över ett panelskikt
  • Visa trafikdata
  • Lägg till ett marköverlägg

Om du migrerar ett befintligt webbprogram kontrollerar du om det använder ett kartkontrollbibliotek med öppen källkod, till exempel Cesium, Leaflet och OpenLayers. Om det är och du föredrar att fortsätta att använda det biblioteket kan du ansluta det till Azure Maps paneltjänster (vägpanelersatellitpaneler | ). Länkarna nedan innehåller information om hur du använder Azure Maps i vissa vanliga bibliotek för kartkontroll med öppen källkod.

Om du utvecklar med ett JavaScript-ramverk kan något av följande projekt med öppen källkod vara användbart:

Förutsättningar

  1. Logga in på Azure-portalen. Om du inte har någon Azure-prenumeration kan du skapa ett kostnadsfritt konto innan du börjar.
  2. Skapa ett Azure Maps konto
  3. Hämta en primär prenumerationsnyckel, även kallad primärnyckel eller prenumerationsnyckel. Mer information om autentisering i Azure Maps finns i Hantera autentisering i Azure Maps.

Stöd för viktiga funktioner

I följande tabell visas viktiga API-funktioner i Bing-kartor V8 JavaScript SDK och stöd för ett liknande API i Azure Maps Web SDK.

Bing-kartor funktion stöd för Azure Maps Web SDK
Kartnålar
Pushpin-klustring
Polylines & Polygoner
Marköverlägg
Termiska kartor
Panelskikt
KML-lager
Konturskikt Exempel
Lager för databindning Ingår i modulen Azure Maps Gridded Data Source med öppen källkod
Animerat panelskikt Ingår i modulen Azure Maps animering med öppen källkod
Ritningsverktyg
Geokodartjänst
Directions-tjänsten
Tjänsten Avståndsmatris
Spatial Data Service Ej tillämpligt
Satellit-/flygfoton
Fågelögabilder Ej tillämpligt
Streetside-bilder Ej tillämpligt
GeoJSON-stöd
GeoXML-stöd Rumslig I/O-modul
stöd för Well-Known text
Anpassade kartformat Delvis

Azure Maps har också många ytterligare moduler med öppen källkod för webb-SDK:t som utökar dess funktioner.

Anmärkningsvärda skillnader i webb-SDK:er

Följande är några av de viktigaste skillnaderna mellan Bing-kartor och Azure Maps webb-SDK:er att känna till:

  • Förutom att tillhandahålla en värdbaserad slutpunkt för åtkomst till Azure Maps Web SDK, finns även ett npm-paket tillgängligt för att bädda in webb-SDK:n i appar om så önskas. Mer information finns i den här dokumentationen för mer information. Det här paketet innehåller även TypeScript-definitioner.
  • Bing-kartor tillhandahåller två värdbaserade grenar av deras SDK; Lansering och experimentell. Den experimentella grenen kan få flera uppdateringar om dagen när ny utveckling sker. Azure Maps är endast värd för en versionsgren, men experimentella funktioner skapas som anpassade moduler i projektet Azure Maps kodexempel med öppen källkod. Bing-kartor brukade också ha en frusen gren som uppdaterades mindre ofta, vilket minskade risken för icke-bakåtkompatibla ändringar på grund av en utgåva. I Azure Maps där kan du använda npm-modulen och peka på alla tidigare delversioner.

Tips

Azure Maps publicerar både minifierade och ofminifierade versioner av SDK:et. Ta bort .min enkelt från filnamnen. Den ofminifierade versionen är användbar vid felsökning av problem, men se till att använda den minifierade versionen i produktion för att dra nytta av den mindre filstorleken.

  • När du har skapat en instans av klassen Map i Azure Maps bör koden vänta tills kartorna ready eller load händelsen utlöses innan du interagerar med kartan. Dessa händelser säkerställer att alla kartresurser har lästs in och är redo att nås.

  • Båda plattformarna använder ett liknande sida vid sida-system för baskartorna, men panelerna i Bing-kartor är 256 bildpunkter i dimension medan panelerna i Azure Maps är 512 bildpunkter i dimension. För att få samma kartvy i Azure Maps som Bing-kartor måste därför en zoomnivå som används i Bing-kartor subtraheras med en i Azure Maps.

  • Koordinater i Bing-kartor kallas latitude, longitude för när Azure Maps använder longitude, latitude. Det här formatet överensstämmer med den standard [x, y] som följs av de flesta GIS-plattformar.

  • Former i Azure Maps Web SDK baseras på GeoJSON-schemat. Hjälpklasser exponeras via atlas.data-namnområdet. Det finns också atlasen. Formklass som kan användas för att omsluta GeoJSON-objekt och göra dem enkla att uppdatera och underhålla på ett databindningsbart sätt.

  • Koordinater i Azure Maps definieras som Positionsobjekt som kan anges som en enkel talmatris i formatet [longitude, latitude] eller new atlas.data.Position(longitude, latitude).

Tips

Klassen Position har en statisk hjälpfunktion för att importera koordinater som är i latitude, longitude format. Funktionen atlas.data.Position.fromLatLngkan ofta ersätta new Microsoft.Maps.Location funktionen i Bing-kartor kod.

  • I stället för att ange formatinformation för varje form som läggs till på kartan separerar Azure Maps formatmallar från data. Data lagras i datakällor och är anslutna till renderingslager som Azure Maps kod använder för att återge data. Den här metoden ger förbättrade prestandafördelar. Dessutom har många lager stöd för datadriven formatering där affärslogik kan läggas till i lagerstilsalternativ som ändrar hur enskilda former renderas i ett lager baserat på egenskaper som definierats i formen.
  • Azure Maps innehåller en mängd användbara rumsliga matematikfunktioner i atlas.math namnområdet, men dessa skiljer sig från dem i modulen Bing-kartor rumslig matematik. Den främsta skillnaden är att Azure Maps inte tillhandahåller inbyggda funktioner för binära åtgärder som union och skärningspunkt, men eftersom Azure Maps baseras på GeoJSON som är en öppen standard finns det många bibliotek med öppen källkod tillgängliga. Ett populärt alternativ som fungerar bra med Azure Maps och ger massor av rumsliga matematikfunktioner är turf js.

Se även Azure Maps ordlista för en detaljerad lista över terminologi som är associerad med Azure Maps.

Exempel på webb-SDK sida vid sida

Följande är en samling kodexempel för varje plattform som omfattar vanliga användningsfall som hjälper dig att migrera din webbapp från Bing-kartor V8 JavaScript SDK till Azure Maps Web SDK. Kodexempel som rör webbprogram finns i JavaScript; men Azure Maps tillhandahåller även TypeScript-definitioner som ytterligare ett alternativ via en NPM-modul.

Ämnen

Läsa in en karta

När du läser in en karta i båda SDK:erna följer du samma uppsättning steg.

  • Lägg till en referens till Map SDK.
  • Lägg till en div tagg i brödtexten på sidan som ska fungera som platshållare för kartan.
  • Skapa en JavaScript-funktion som anropas när sidan har lästs in.
  • Skapa en instans av respektive map-klass.

Några viktiga skillnader

  • Bing-kartor kräver att en kontonyckel anges i skriptreferensen för API:et eller som ett kartalternativ. Autentiseringsuppgifter för Azure Maps anges som alternativ för map-klassen. Det kan vara en prenumerationsnyckel eller Azure Active Directory-information.
  • Bing-kartor använder en återanropsfunktion i skriptreferensen för det API som används för att anropa en initieringsfunktion för att läsa in kartan. Med Azure Maps ska sidans inläsningshändelse användas.
  • När du använder ett ID för att referera till elementet div som kartan ska renderas i använder Bing-kartor en HTML-väljare (d.v.s.#myMap), medan Azure Maps endast använder ID-värdet (dvs. myMap).
  • Koordinater i Azure Maps definieras som Positionsobjekt som kan anges som en enkel talmatris i formatet [longitude, latitude].
  • Zoomnivån i Azure Maps är en nivå lägre än Bing-kartor exempel på grund av skillnaden i tilingsystemstorlekar mellan plattformarna.
  • Som standard lägger Azure Maps inte till några navigeringskontroller på kartarbetsytan, till exempel zoomknappar och knappar för kartformat. Det finns dock kontroller för att lägga till en kartformatväljare, zoomknappar, kompass- eller rotationskontroll och en tonhöjdskontroll.
  • En händelsehanterare läggs till i Azure Maps för att övervaka händelsen för ready kartinstansen. Detta utlöses när kartan har läst in WebGL-kontexten och alla resurser som behövs. All postinläsningskod kan läggas till i den här händelsehanteraren.

Exemplen nedan visar hur du läser in en grundläggande karta som är centrerad över New York vid koordinater (longitud: -73,985, latitud: 40,747) och är på zoomnivå 12 i Bing-kartor.

Före: Bing-kartor

Följande kod är ett exempel på hur du visar en Bing-karta centrerad och zoomad över en plats.

<!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 Microsoft.Maps.Map('#myMap', {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.747, -73.985),
                zoom: 12
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

När du kör den här koden i en webbläsare visas en karta som ser ut som på följande bild:

Bing-kartor karta

Efter: Azure Maps

Följande kod visar hur du läser in en karta med samma vy i Azure Maps tillsammans med en kartstilskontroll och zoomknappar.

<!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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

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

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-73.985, 40.747],  //Format coordinates as longitude, latitude.
                zoom: 11,   //Subtract the zoom level by one.

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

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Add zoom and map style controls to top right of map.
                map.controls.add([
                        new atlas.control.StyleControl(),
                        new atlas.control.ZoomControl()
                    ], {
                        position: 'top-right'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

När du kör den här koden i en webbläsare visas en karta som ser ut som på följande bild:

Azure Maps karta

Detaljerad dokumentation om hur du konfigurerar och använder Azure Maps kartkontroll i en webbapp finns här.

Tips

Azure Maps publicerar både minifierade och ofminifierade versioner av SDK:et. Ta bort .min från filnamnen. Den ofminifierade versionen är användbar vid felsökning av problem, men se till att använda den minifierade versionen i produktion för att dra nytta av den mindre filstorleken.

Ytterligare resurser

  • Azure Maps innehåller också navigeringskontroller för att rotera och visa kartvyn enligt beskrivningen här.

Lokalisera kartan

Om målgruppen är utspridd i flera länder eller talar olika språk är lokalisering viktigt.

Före: Bing-kartor

För att lokalisera Bing-kartor anges språk och region med parametrarna setLang och UR läggs till i <script> taggreferensen till API:et. Vissa funktioner i Bing-kartor är endast tillgängliga på vissa marknader, eftersom användarens marknad anges med hjälp av parametern setMkt .

<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=initMap&setLang={language-code}&setMkt={market}&UR={region-code}" async defer></script>

Här är ett exempel på Bing-kartor med språket inställt på "fr-FR".

Lokaliserad Bing-kartor karta

Efter: Azure Maps

Azure Maps innehåller bara alternativ för att ange språk och regional vy för kartan. En marknadsparameter används inte för att begränsa funktioner. Det finns två olika sätt att ange språk och regional vy för kartan. Det första alternativet är att lägga till den här informationen i det globala atlas namnområdet som resulterar i att alla kartkontrollinstanser i din app använder de här inställningarna som standard. Följande ställer in språket på franska ("fr-FR") och den regionala vyn till "Auto":

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

Det andra alternativet är att skicka den här informationen till kartalternativen när du läser in kartan, till exempel:

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

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

Anteckning

Med Azure Maps går det att läsa in flera kartinstanser på samma sida med olika språk- och regioninställningar. Dessutom är det också möjligt att uppdatera dessa inställningar på kartan när den har lästs in. En detaljerad lista över språk som stöds i Azure Maps finns här.

Här är ett exempel på Azure Maps med språket inställt på "fr" och användarregionen inställd på "fr-FR".

Lokaliserad Azure Maps karta

Ange kartvyn

Dynamiska kartor i både Bing och Azure Maps kan flyttas programmatiskt till nya geografiska platser genom att anropa lämpliga funktioner i JavaScript. Exemplen nedan visar hur du gör så att kartan visar satellitfoton, centrerar kartan över en plats med koordinater (longitud: -111.0225, latitud: 35.0272) och ändrar zoomnivån till 15 i Bing-kartor.

Anteckning

Bing-kartor använder paneler som är 256 bildpunkter i dimensioner medan Azure Maps använder en större panel på 512 bildpunkter. Detta minskar antalet nätverksbegäranden som krävs av Azure Maps för att läsa in samma kartområde som Bing-kartor. Men på grund av hur panelpyramider fungerar i kartkontroller innebär de större panelerna i Azure Maps att för att uppnå samma visningsbara område som en karta i Bing-kartor måste du subtrahera zoomnivån som används i Bing-kartor med 1 när du använder Azure Maps.

Före: Bing-kartor

Den Bing-kartor kartkontrollen kan flyttas programmatiskt med hjälp av funktionen setView som gör att du kan ange mitten av kartan och en zoomnivå.

map.setView({
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    center: new Microsoft.Maps.Location(35.0272, -111.0225),
    zoom: 15
});

Bing-kartor ange kartvy

Efter: Azure Maps

I Azure Maps kan kartpositionen ändras programmatiskt med hjälp setCamera av kartans funktion och kartformatet kan ändras med hjälp av setStyle funktionen . Observera att koordinaterna i Azure Maps är i formatet "longitud, latitud" och zoomnivåvärdet subtraheras med 1.

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

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

Azure Maps ange kartvy

Ytterligare resurser

Lägga till en pushpin

I Azure Maps finns det flera sätt att rendera punktdata på kartan.

  • HTML-markörer – Återger punkter med traditionella DOM-element. HTML-markörer stöder dragen.
  • Symbolskikt – återger punkter med en ikon och/eller text i WebGL-kontexten.
  • Bubbellager – Återger punkter som cirklar på kartan. Radii av cirklarna kan skalas baserat på egenskaper i data.

Både symbol- och bubbelskikt renderas i WebGL-kontexten och kan återge mycket stora uppsättningar punkter på kartan. Dessa lager kräver att data lagras i en datakälla. Datakällor och återgivningslager bör läggas till på kartan när händelsen ready har utlösts. HTML-markörer återges som DOM-element på sidan och använder ingen datakälla. Ju fler DOM-element en sida har, desto långsammare blir sidan. Om du återger fler än några hundra punkter på en karta rekommenderar vi att du använder ett av återgivningsskikten i stället.

Exemplen nedan lägger till en markör på kartan vid (longitud: -0.2, latitud: 51,5) med siffran 10 överlagrad som en etikett.

Före: Bing-kartor

Med Bing-kartor läggs markörer till på kartan med hjälp av Microsoft.Maps.Pushpin klassen*. Pushpins läggs sedan till på kartan med någon av två funktioner.

Den första funktionen är att skapa ett lager, infoga pushpinn till den och sedan lägga till lagret i kartans layers egenskap.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    text: '10'
});

var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

Den andra är att lägga till den med hjälp av kartans entities egenskap. Den här funktionen är markerad som inaktuell i dokumentationen för Bing-kartor V8, men den har förblivit delvis funktionell för grundläggande scenarier.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    text: '10'
});

map.entities.add(pushpin);

Bing-kartor lägga till puspin

Efter: Azure Maps med HTML-markörer

I Azure Maps kan HTML-markörer användas för att enkelt visa en punkt på kartan och rekommenderas för enkla appar som bara behöver visa ett litet antal punkter på kartan. Om du vill använda en HTML-markör skapar du en instans av klassen, anger text- och placeringsalternativen och lägger till markören på kartan med hjälp av atlas.HtmlMarkermap.markers.add funktionen .

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

Azure Maps lägga till markör

Efter: Azure Maps med ett symbollager

När du använder ett symbollager måste data läggas till i en datakälla och den datakälla som är kopplad till lagret. Dessutom bör datakällan och lagret läggas till på kartan när händelsen ready har utlösts. Om du vill återge ett unikt textvärde ovanför en symbol måste textinformationen lagras som en egenskap för datapunkten och egenskapen som refereras till i textField alternativet för lagret. Det här är lite mer arbete än att använda HTML-markörer, men ger många prestandafördelar.

<!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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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>

Azure Maps lägga till symbolskikt

Ytterligare resurser

Lägga till en anpassad pushpin

Anpassade avbildningar kan användas för att representera punkter på en karta. Följande bild används i exemplen nedan och använder en anpassad bild för att visa en punkt på kartan vid (latitud: 51.5, longitud: -0.2) och förskjuter markörens position så att pushpinikonens punkt justeras med rätt position på kartan.

Azure Maps lägga till puspin
yellow-pushpin.png

Före: Bing-kartor

I Bing-kartor skapas en anpassad markör genom att en URL skickas till en bild till alternativen för icon en pushpin. Alternativet anchor används för att justera punkten för pushpin-bilden med koordinaten på kartan. Ankarvärdet i Bing-kartor i förhållande till bildens övre vänstra hörn.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    icon: 'ylw-pushpin.png',
    anchor: new Microsoft.Maps.Point(5, 30)
});

var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

Bing-kartor lägga till anpassad puspin

Efter: Azure Maps med HTML-markörer

Om du vill anpassa en HTML-markör i Azure Maps en HTML-kod string eller HTMLElement skickas till htmlContent alternativet för markören. I Azure Maps används ett anchor alternativ för att ange den relativa positionen för markören i förhållande till positionskoordinaten med hjälp av en av nio definierade referenspunkter. "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right". Innehållet är förankrat och är inställt på "bottom" som standard, som är det nedre mitten av html-innehållet. Om du vill göra det enklare att migrera kod från Bing-kartor anger du fästpunkten till "överst till vänster" och använder offset sedan alternativet med samma förskjutning som används i Bing-kartor. Förskjutningarna i Azure Maps röra sig i motsatt riktning mot Bing-kartor, så multiplicera dem med minus ett.

Tips

Lägg till pointer-events:none som ett format i HTML-innehållet för att inaktivera standarddragbeteendet i MS Edge som visar en oönskad ikon.

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

Azure Maps lägga till anpassad markör

Efter: Azure Maps med ett symbollager

Symbolskikt i Azure Maps har även stöd för anpassade avbildningar, men bilden måste läsas in i kartresurserna först och tilldelas ett unikt ID. Symbollagret kan sedan referera till det här ID:t. Symbolen kan förskjutas för att justera till rätt punkt på bilden med hjälp av ikonalternativet offset . I Azure Maps används ett anchor alternativ för att ange symbolens relativa position i förhållande till positionskoordinaten med hjälp av en av nio definierade referenspunkter. "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right". Innehållet är förankrat och inställt på "nederkant" som standard som är det nedre mitten av HTML-innehållet. Om du vill göra det enklare att migrera kod från Bing-kartor anger du fästpunkten till "överst till vänster" och använder offset sedan alternativet med samma förskjutning som används i Bing-kartor. Förskjutningarna i Azure Maps röra sig i motsatt riktning mot Bing-kartor, så multiplicera dem med minus ett.

<!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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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', '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>

Bing-kartor lägga till anpassat symbollager

Tips

Om du vill skapa avancerad anpassad återgivning av punkter använder du flera återgivningslager tillsammans. Om du till exempel vill ha flera pushpins som har samma ikon i olika färgade cirklar, i stället för att skapa en massa bilder för varje färg överlägg ett symbolskikt ovanpå ett bubbellager och låta dem referera till samma datakälla. Detta blir mycket effektivare än att skapa, och att kartan behåller en massa olika bilder.

Ytterligare resurser

Lägga till en polyline

Polylinjer används för att representera en linje eller sökväg på kartan. Exemplen nedan visar hur du skapar en streckad polyline på kartan.

Före: Bing-kartor

I Bing-kartor tar polyline-klassen in en matris med platser och en uppsättning alternativ.

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

//Create the polyline.
var polyline = new Microsoft.Maps.Polyline([
        center,
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1)
    ], {
        strokeColor: 'red',
        strokeThickness: 4,
        strokeDashArray: [3, 3]
    });

//Add the polyline to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polyline);
map.layers.insert(layer);

Bing-kartor polyline

Efter: Azure Maps

I Azure Maps refereras polyliner till de vanligare geospatiala termerna LineString eller MultiLineString objekten. Dessa objekt kan läggas till i en datakälla och renderas med hjälp av ett linjeskikt. Alternativen för linjefärg, bredd och streckmatris är nästan identiska mellan plattformarna.

//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]
}));

Azure Maps rad

Ytterligare resurser

Lägga till en polygon

Polygoner används för att representera ett område på kartan. Azure Maps och Bing-kartor ger mycket liknande stöd för polygoner. Exemplen nedan visar hur du skapar en polygon som bildar en triangel baserat på kartans mittkoordinat.

Före: Bing-kartor

I Bing-kartor tar polygonklassen in en matris med koordinater eller koordinatringar och en uppsättning alternativ.

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

//Create the polygon.
var polygon = new Microsoft.Maps.Polygon([
        center,
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1),
        center
    ], {
        fillColor: 'rgba(0, 255, 0, 0.5)',
        strokeColor: 'red',
        strokeThickness: 2
    });

//Add the polygon to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polygon);
map.layers.insert(layer);

Bing-kartor polyogn

Efter: Azure Maps

I Azure Maps kan polygon- och multipolygonobjekt läggas till i en datakälla och renderas på kartan med hjälp av lager. Området för en polygon kan renderas i ett polygonskikt. Konturen av en polygon kan renderas med hjälp av ett linjeskikt.

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

Azure Maps polyogn

Ytterligare resurser

Visa en informationsruta

Ytterligare information för en entitet kan visas på kartan som en Microsoft.Maps.Infobox klass i Bing-kartor, i Azure Maps detta kan uppnås med hjälp av atlas.Popup klassen . Exemplen nedan lägger till en kartnål/markör på kartan och visar en infobox/popup när du klickar på den.

Före: Bing-kartor

Med Bing-kartor skapas en infobox med konstruktornMicrosoft.Maps.Infobox.

//Add a pushpin where we want to display an infobox.
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, -122.33));

//Add the pushpin to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

//Create an infobox and bind it to the map.
var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(47.6, -122.33), {
    description: '<div style="padding:5px"><b>Hello World!</b></div>',
    visible: false
});
infobox.setMap(map);

//Add a click event to the pushpin to open the infobox.
Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
    infobox.setOptions({ visible: true });
});

Bing-kartor infobox

Efter: Azure Maps

I Azure Maps kan ett popup-fönster användas för att visa ytterligare information för en plats. Ett HTML-objekt string eller HTMLElement -objekt kan skickas till content alternativet för popup-fönstret. Popup-fönster kan visas oberoende av vilken form som helst om så önskas och kräver därför att ett position värde anges. Om du vill visa ett popup-fönster anropar open du funktionen och skickar den karta som popup-fönstret ska visas på.

//Add a marker to the map that 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:10px"><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);
});

Azure Maps popup-meny

Anteckning

Om du vill göra samma sak med ett symbol-, bubbel-, linje- eller polygonskikt skickar du lagret till händelsekoden maps i stället för en markör.

Ytterligare resurser

Pushpin-klustring

När du visualiserar många datapunkter på kartan överlappar punkterna varandra, kartan ser rörig ut och blir svår att se och använda. Klustring av punktdata kan användas för att förbättra användarupplevelsen och även förbättra prestanda. Klustringspunktdata är en process där du kombinerar punktdata som är nära varandra och representerar dem på kartan som en enda klustrad datapunkt. När användaren zoomar in på kartan delas klustren upp i sina enskilda datapunkter.

Exemplen nedan läser in en GeoJSON-feed med jordbävningsdata från den senaste veckan och lägger till den på kartan. Kluster renderas som skalade och färgade cirklar beroende på antalet punkter de innehåller.

Anteckning

Det finns flera olika algoritmer som används för pushpin-klustring. Bing-kartor använder en enkel rutnätsbaserad funktion, medan Azure Maps använder en mer avancerad och visuellt tilltalande punktbaserade klustringsmetoder.

Före: Bing-kartor

I Bing-kartor kan GeoJSON-data läsas in med hjälp av GeoJSON-modulen. Du kan gruppera pushpins genom att läsa in klustringsmodulen och använda klustringsskiktet som den innehåller.

<!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 Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(20, -160),
                zoom: 2
            });

            //Load the GeoJSON and Clustering modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.Clustering'], function () {

                //Load the GeoJSON data from a URL.
                Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (pins) {

                    //Create a ClusterLayer with options and add it to the map.
                    clusterLayer = new Microsoft.Maps.ClusterLayer(pins, {
                        clusteredPinCallback: createCustomClusteredPin,
                        gridSize: 100
                    });

                    map.layers.insert(clusterLayer);
                });
            });
        }

        //A function that defines how clustered pins are rendered.
        function createCustomClusteredPin(cluster) {
            //Get the number of pushpins in the cluster
            var clusterSize = cluster.containedPushpins.length;

            var radius = 20;    //Default radius to 20 pixels.
            var fillColor = 'lime'; 	//Default to lime green.

            if (clusterSize >= 750) {
                radius = 40;   //If point_count >= 750, radius is 40 pixels.
                fillColor = 'red';    //If the point_count >= 750, color is red.
            } else if (clusterSize >= 100) {
                radius = 30;    //If point_count >= 100, radius is 30 pixels.
                fillColor = 'yellow';    //If the point_count >= 100, color is yellow.
            }

            //Create an SVG string of a circle with the specified radius and color.
            var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
                '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
                '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="font-size:12px;font-family:arial;fill:black;" >{text}</text>',
                '</svg>'];

            //Customize the clustered pushpin using the generated SVG and anchor on its center.
            cluster.setOptions({
                icon: svg.join(''),
                anchor: new Microsoft.Maps.Point(radius, radius),
                textOffset: new Microsoft.Maps.Point(0, radius - 8) //Subtract 8 to compensate for height of text.
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Bing-kartor klustring

Efter: Azure Maps

I Azure Maps läggs data till och hanteras av en datakälla. Lager ansluter till datakällor och renderar data i dem. Klassen DataSource i Azure Maps innehåller flera klusteralternativ.

  • cluster – Instruerar datakällan att klustra punktdata.
  • clusterRadius – Radien i bildpunkter för att gruppera pekar tillsammans.
  • clusterMaxZoom – Den maximala zoomnivå som klustring sker på. Om du zoomar in mer än så återges alla punkter som symboler.
  • clusterProperties – Definierar anpassade egenskaper som beräknas med hjälp av uttryck mot alla punkter i varje kluster och läggs till i egenskaperna för varje klusterpunkt.

När klustring är aktiverat skickar datakällan klustrade och olustererade datapunkter till lager för återgivning. Datakällan kan gruppera hundratusentals datapunkter. En klustrad datapunkt har följande egenskaper:

Egenskapsnamn Typ Description
cluster boolean Anger om funktionen representerar ett kluster.
cluster_id sträng Ett unikt ID för klustret som kan användas med klasserna DataSourcegetClusterExpansionZoom, getClusterChildrenoch getClusterLeaves funktioner.
point_count antal Antalet punkter som klustret innehåller.
point_count_abbreviated sträng En sträng som förkortar point_count värdet om det är långt. (till exempel blir 4 000 4 000)

Klassen DataSource har följande hjälpfunktion för åtkomst till ytterligare information om ett kluster med hjälp av cluster_id.

Funktion Returtyp Description
getClusterChildren(clusterId: number) Promise<Feature<Geometry, any> | Shape> Hämtar underordnade till det angivna klustret på nästa zoomnivå. Dessa underordnade kan vara en kombination av former och underkluster. Underkluster är funktioner med egenskaper som matchar klusteregenskaper.
getClusterExpansionZoom(clusterId: number) Promise<number> Beräknar en zoomnivå som klustret börjar expandera eller bryta isär.
getClusterLeaves(clusterId: number, limit: number, offset: number) Promise<Feature<Geometry, any> | Shape> Hämtar alla punkter i ett kluster. limit Ange för att returnera en delmängd av punkterna och använd offset till-sidan genom punkterna.

När du återger klustrade data på kartan är det ofta enklast att använda två eller flera lager. I exemplet nedan används tre lager, ett bubbellager för att rita skalade färgade cirklar baserat på klustrens storlek, ett symbolskikt för att återge klusterstorleken som text och ett andra symbolskikt för återgivning av de olustererade punkterna. Det finns många andra sätt att återge klustrade data i Azure Maps markerade i dokumentationen för klusterpunktsdata.

GeoJSON-data kan importeras direkt i Azure Maps med hjälp av importDataFromUrl funktionen i DataSource klassen .

<!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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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 key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                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 inthe 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 that 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>

Azure Maps klustring

Ytterligare resurser

Lägga till en termisk karta

Termiska kartor, även kallade punktdensitetskartor, är en typ av datavisualisering som används för att representera densiteten för data med hjälp av en mängd olika färger. De används ofta för att visa data "hot spots" på en karta och är ett bra sätt att återge stora punktdatamängder.

Exemplen nedan läser in ett GeoJSON-flöde för alla jordbävningar under den senaste månaden från USGS och återger dem som en termisk karta.

Före: Bing-kartor

I Bing-kartor, för att skapa en termisk karta, läser du in i modulen termisk karta. På samma sätt läses GeoJSON-modulen in för att lägga till stöd för GeoJSON-data.

<!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_month.geojson';

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(20, -160),
                zoom: 2,
                mapTypeId: Microsoft.Maps.MapTypeId.aerial
            });

            //Load the GeoJSON and HeatMap modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.HeatMap'], function () {

                //Load the GeoJSON data from a URL.
                Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (shapes) {

                    //Create a heat map and add it to the map.
                    var heatMap = new Microsoft.Maps.HeatMapLayer(shapes, {
                        opacity: 0.65,
                        radius: 10
                    });
                    map.layers.insert(heatMap);
                });
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Bing-kartor termisk karta

Efter: Azure Maps

I Azure Maps läser du in GeoJSON-data till en datakälla och ansluter datakällan till ett termisk kartskikt. GeoJSON-data kan importeras direkt i Azure Maps med hjälp av importDataFromUrl funktionen i DataSource klassen .

<!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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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_with_roads',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                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, {
                    opacity: 0.65,
                    radius: 10
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Azure Maps termisk karta

Ytterligare resurser

Lägga över ett panelskikt

Med panelskikt kan du lägga över stora bilder som har delats upp i mindre tillagda bilder som överensstämmer med kartrutesystemet. Det här är ett vanligt sätt att lägga över stora bilder eller mycket stora datamängder.

Exemplen nedan överlagrar ett väderradarpanelskikt från Iowa Environmental Mesonet vid Iowa State University som använder ett schema för namngivning av X, Y och Zoom tiling.

Före: Bing-kartor

I Bing-kartor kan panellager skapas med hjälp Microsoft.Maps.TileLayer av klassen .

var weatherTileLayer = new Microsoft.Maps.TileLayer({
    mercator: new Microsoft.Maps.TileSource({
        uriConstructor: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{zoom}/{x}/{y}.png'
    })
});
map.layers.insert(weatherTileLayer);

Bing-kartor viktad termisk karta

Efter: Azure Maps

I Azure Maps kan ett panelskikt läggas till på kartan på ungefär samma sätt som andra lager. En formaterad URL som har platshållare för x, y, zoom; {x}, {y}{z} , används för att tala om för lagret var panelerna ska kommas åt. Azure Maps panelskikt har också stöd för {quadkey}platshållarna och {bbox-epsg-3857}{subdomain} .

Tips

I Azure Maps kan skikt enkelt återges under andra lager, inklusive baskartskikt. Ofta är det önskvärt att återge panelskikt under kartetiketterna så att de är lätta att läsa. Funktionen map.layers.add använder en andra parameter som är ID:t för ett andra lager för att infoga det nya lagret nedan. Om du vill infoga ett panelskikt under kartetiketterna kan du använda följande kod:

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

Azure Maps viktad termisk karta

Tips

Panelbegäranden kan samlas in med transformRequest hjälp av alternativet för kartan. På så sätt kan du ändra eller lägga till rubriker i begäran om du vill.

Ytterligare resurser

Visa trafikdata

Trafikdata kan läggas över både Bing- och Azure-kartor.

Före: Bing-kartor

I Bing-kartor kan trafikdata överlagras på kartan med hjälp av trafikmodulen.

Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', function () {
    var manager = new Microsoft.Maps.Traffic.TrafficManager(map);
    manager.show();
});

Bing-kartor trafik

Efter: Azure Maps

Azure Maps har flera olika alternativ för att visa trafik. Trafikincidenter, till exempel vägavstängningar och olyckor, kan visas som ikoner på kartan. Trafikflödet, färgkodade vägar, kan överlagras på kartan och färgerna kan ändras så att de baseras på den anlagda hastighetsgränsen, i förhållande till den normala förväntade fördröjningen eller den absoluta fördröjningen. Incidentdata i Azure Maps uppdateras varje minut och flödesdata var 2:e minut.

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

Azure Maps trafik

Om du klickar på någon av trafikikonerna i Azure Maps visas ytterligare information i ett popup-fönster.

popup-meny för Azure Maps trafik

Ytterligare resurser

Lägg till ett marköverlägg

Både Bing- och Azure-kartor har stöd för överlagring av georefererade bilder på kartan så att de flyttas och skalas när du panorerar och zoomar kartan. I Bing-kartor kallas dessa för marköverlägg medan de i Azure Maps kallas för bildskikt. Dessa är bra för att skapa planritningar, lägga över gamla kartor eller bilder från en drönare.

Före: Bing-kartor

När du skapar ett marköverlägg i Bing-kartor måste du ange URL:en till bilden som ska överläggas och en avgränsningsruta för att binda bilden till på kartan. Det här exemplet överlagrar en kartbild av Newark New Jersey från 1922 på kartan.

<!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 Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.740, -74.18),
                zoom: 12
            });

            var overlay = new Microsoft.Maps.GroundOverlay({
                //Create a LocationRect from the edges of the bounding box; north, west, south, east.
                bounds: Microsoft.Maps.LocationRect.fromEdges(40.773941, -74.22655, 40.712216, -74.12544),
                imageUrl: 'newark_nj_1922.jpg'
            });
            map.layers.insert(overlay);
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

När du kör den här koden i en webbläsare visas en karta som ser ut som på följande bild:

Bing-kartor marköverlägg

Efter: Azure Maps

I Azure Maps kan georeferenced-bilder överlagras med hjälp av atlas.layer.ImageLayer klassen . Den här klassen kräver en URL till en bild och en uppsättning koordinater för bildens fyra hörn. Avbildningen måste vara värdbaserad på samma domän eller ha aktiverat cors.

Tips

Om du bara har information om nord, syd, öst, väst och rotation, och inte koordinater för varje hörn av bilden, kan du använda funktionen static atlas.layer.ImageLayer.getCoordinatesFromEdges .

<!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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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 key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                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>

Azure Maps marköverlägg

Ytterligare resurser

Lägga till KML-data på kartan

Både Azure- och Bing-kartor kan importera och återge KML-, KMZ-, GeoRSS-, GeoJSON- och Well-Known Text-data (WKT) på kartan. Azure Maps stöder även GPX-, GML-, spatial CSV-filer, Web-Mapping Services (WMS), Web-Mapping Tile Services (WMTS) och Web Feature Services (WFS).

Före: Bing-kartor

När du kör den här koden i en webbläsare visas en karta som ser ut som på följande bild:

<!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 Microsoft.Maps.Map('#myMap', {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.747, -73.985),
                zoom: 12
            });
                
            Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
                var callback = function (dataset) {
                    if (dataset.shapes) {
                        var l = new Microsoft.Maps.Layer();
                        l.add(dataset.shapes);
                        map.layers.insert(l);
                    }
                    if (dataset.layers) {
                        for (var i = 0, len = dataset.layers.length; i < len; i++) {
                            map.layers.insert(dataset.layers[i]);
                        }
                    }
                };
                Microsoft.Maps.GeoXml.readFromUrl('myKMLFile.kml', { error: function (msg) { alert(msg); } }, callback);
            });                
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Bing-kartor kml

Efter: Azure Maps

I Azure Maps är GeoJSON det huvudsakliga dataformatet som används i webb-SDK: et. Ytterligare rumsliga dataformat kan enkelt integreras med hjälp av den rumsliga I/O-modulen. Den här modulen har funktioner för både läsning och skrivning av rumsliga data och innehåller även ett enkelt datalager som enkelt kan återge data från något av dessa rumsliga dataformat. Om du vill läsa data i en rumslig datafil skickar du en URL eller rådata som sträng eller blob till atlas.io.read funktionen. Då returneras alla parsade data från filen som sedan kan läggas till på kartan. KML är lite mer komplext än de flesta rumsliga dataformat eftersom det innehåller mycket mer formatinformation. Klassen SpatialDataLayer stöder återgivning av de flesta av dessa format, men ikoner måste läsas in på kartan innan funktionsdata läses in, och marköverlägg måste läggas till som lager på kartan separat. När du läser in data via en URL ska den finnas på en COR-aktiverad slutpunkt, eller så ska en proxytjänst skickas in som ett alternativ i läsfunktionen.

<!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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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 key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                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('myKMLFile.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 parrallel.
                            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>

Azure Maps kml

Ytterligare resurser

Lägga till ritverktyg

Både Bing och Azure Maps tillhandahåller en modul som lägger till möjligheten för användaren att rita och redigera former på kartan med hjälp av musen eller någon annan indataenhet. Båda stöder ritning av kartnålar, linjer och polygoner. Azure Maps innehåller också alternativ för att rita cirklar och rektanglar.

Före: Bing-kartor

I Bing-kartor läses modulen DrawingTools in med hjälp av Microsoft.Maps.loadModule funktionen . När den har lästs in kan en instans av klassen DrawingTools skapas och showDrawingManager funktionen kallas lägg till ett verktygsfält på kartan.

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

    function initMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: '<Your Bing Maps Key>'
        });

        //Load the DrawingTools module
        Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            //Create an instance of the DrawingTools class and bind it to the map.
            var tools = new Microsoft.Maps.DrawingTools(map);

            //Show the drawing toolbar and enable editting on the map.
            tools.showDrawingManager(function (manager) {
                //Store a reference to the drawing manager as it will be useful later.
                drawingManager = manager;
            });
        });
    }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Bing-kartor ritverktyg

Efter: Azure Maps

I Azure Maps behöver ritverktygsmodulen läsas in genom inläsning av JavaScript och CSS-filerna måste refereras till i appen. När kartan har lästs in kan en instans av DrawingManager klassen skapas och en DrawingToolbar instans bifogas.

<!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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

    <!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.js"></script>
    
    <script type='text/javascript'>
        var map, drawingManager;

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

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

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

                //Create an instance of the drawing manager and display the drawing toolbar.
                drawingManager = new atlas.drawing.DrawingManager(map, {
                    toolbar: new atlas.control.DrawingToolbar({ position: 'top-left' })
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Azure Maps ritverktyg

Tips

I Azure Maps lager ger ritverktygen flera olika sätt som användare kan rita former på. När du till exempel ritar en polygon kan användaren klicka för att lägga till varje punkt, eller hålla ned den vänstra musknappen och dra musen för att rita en sökväg. Detta kan ändras med interactionType hjälp av DrawingManageralternativet för .

Ytterligare resurser

Ytterligare resurser

Ta en titt på modulerna för Azure Maps Web SDK med öppen källkod. Dessa moduler ger massor av ytterligare funktioner och är helt anpassningsbara.

Granska kodexempel relaterade till migrering av andra Bing-kartor funktioner:

Datavisualiseringar

Tjänster

Läs mer om Azure Maps Web SDK.

Rensa resurser

Det finns inga resurser att rensa.

Nästa steg

Läs mer om att migrera från Bing-kartor till Azure Maps.