Oktober 2016
Band 31, Nummer 10
Dieser Artikel wurde maschinell übersetzt.
Bing Karten: Erstellen interaktiver Geoanwendungen mithilfe von Bing Karten 8
Durch James McCaffrey
Unternehmen sind große Datenmengen generieren, und große Datenmengen, Breiten- und Längengrad Speicherortinformationen enthält. Die Bing Maps Version 8-Bibliothek veröffentlicht im Juni 2016, verfügt über viele neue Features, mit die Sie interaktive Geo-Anwendungen erstellen können. In diesem Artikel zeige ich zwei Web Applications, die einige der interessantesten Features der Bing Maps-8-Bibliothek demonstrieren. Die erste Anwendung werden einige der Funktionen, die Benutzerinteraktionen, z. B. ein neues Zeichenblatt Steuerelement und voll Modell Funktionen zu ermöglichen. Die zweite Anwendung werden einige der Funktionen, die Benutzer für den Umgang mit großen Mengen von Daten, einschließlich einer neuen Daten, die clustering-Modul und Hitze kartenvisualisierungen zu ermöglichen.
Dieser Artikel setzt Sie über grundlegende Kenntnisse von Webanwendungsentwicklung jedoch nicht vorausgesetzt, dass Sie nichts Geolocation-Anwendung oder die Bing Maps-8-Bibliothek kennen. Die zwei Demo von ASP.NET-Webanwendungen verwenden Sie nur standard-HTML und standard-JavaScript – ASP.NET, und kein JavaScript Framework-des-Monats. Jede Demo zwei Web-Anwendung ist in einer HTML-Datei enthalten. Den vollständigen Quellcode und die Daten der beiden Dateien sind im Codedownload verfügbar.
Sehen Sie sich die erste Webanwendung in Abbildung 1. Wenn die Webseite geladen wird, wurden die HTML-Steuerelemente auf der linken Seite gerendert, sofort während die Zuordnung wurde asynchron abgerufen werden. Die Map-Objekt ist in der Nähe von Portland, ganz, zentriert, und eine Standardformat Lila PIN-Marker in der Mitte der Karte platziert wurde.
.png "Pins und Polygone-Demo")
Abbildung 1-Pins und Polygone-Demo
Anschließend Durchsuchen-Schaltfläche auf das HTML5-Steuerelement geklickt haben und zeigt eine Textdatei namens LatLonData.txt, die auf meinem lokalen Computer im Verzeichnis C:\Data gespeichert. Die Datei hat vier Datenpunkte und jede verfügt über zugeordnete Text. Klicken Sie dann nach dem Klicken auf das Schaltflächen-Steuerelement mit der Bezeichnung Ort Pins und die Anwendung die Textdatei lesen, vier benutzerdefinierte formatiertes kleine orange Pins erstellt und auf der linken Seite der Zuordnung gespeichert.
Als Nächstes klicken auf das Polygon-Element in der Zeichnung Tools-Steuerelement in der oberen rechten Ecke der Karte und interaktiv gezeichnet haben vier Seiten Grün Polygon oberhalb der Stadt Vancouver, Washington, USA. Eine zweite Polygon mit drei Seiten angeordnet nach rechts und unten den Mittelpunkt. Beim Zeichnen der Anwendung zeichnen Start- und zeichnen Ereignisse überwacht, und Nachrichten ausgegeben, wenn diese Ereignisse ausgelöst.
Nach dem Klicken auf das Schaltflächen-Steuerelement mit der Bezeichnung gezeichnet Form Info und die Anwendung Informationen über die interaktiv erstellte Polygone abgerufen und die drei Eckpunkte des Vielecks Dreieck angezeigt. Als Nächstes verschoben ich meine Mauscursor über und dann von den orangefarbenen untersten-PIN. Der Anwendungscode die Mouseover und Mouseout abgefangen und den Speicherort der Ereignisse angezeigt. Es aber nicht in der Abbildung dargestellt, wenn ich mein Mauszeiger über den PIN bewegt, wird ein Popup-Infobox-Objekt angezeigt, und wenn ich den Mauszeiger weg verschoben, die Infobox automatisch nicht mehr angezeigt.
Ich habe meinen Demo-Sitzung durch Verschieben des Mauszeigers über den orangefarbenen oberste-PIN und die Anwendung reagiert, erstellen Sie ein Standardformat Infobox-Objekt, das Daten mit dem PIN (dem Text "erste Datenspeicherort") und den Speicherort der PIN (45.46,-122.90) angezeigt.
Kurz gesagt, veranschaulicht die erste Web-Anwendung asynchrone Zuordnung laden, dynamische benutzerdefinierte Pins, umfangreiche Ereignis Modellierung, interaktive Form erstellen und Infobox-Objekte.
Erstellen die Pins und Polygone Demo
Vor dem Schreiben der ersten Webseite, erstellt habe ich die Quelldatei mit dem Editor:
45.46,-122.90,first location data
45.38,-122.90,second location data
45.42,-122.94,third location data
45.42,-122.86,fourth location data
Klicke ich nicht auf die < eingeben > Schlüssel nach der letzten Zeile der Daten, damit mein Code Lesen aus einer Datei versucht würde nicht um eine leere Zeile des Texts zu interpretieren. Kommas als Feldtrennzeichen verwendet, aber ich hätte das Tabulatorzeichen verwendet. Kann ich die Datei als gespeichert LatLonData.txt in das Verzeichnis C:\Data auf meinem lokalen Computer. Wie Sie sehen werden, können mit einer beliebigen Art von Datenspeicher Bing Maps arbeiten.
Ich verwendet das Programm Notepad, um die Demo ASP.NET-Webanwendungen erstellen. Ich mag Editor eine neue Technologie zu lernen, da zwingt mich vorsichtig sein und nichts mit Zauberei hat verdecken die Kerngedanken ausgeblendet.
Da ich nur einfachem HTML und JavaScript verwendet, muss ich nicht gar nichts Besonderes IIS oder meinem Computer vorbereiten. Ich erstellte ein Verzeichnis namens NodeAtlasLight in das Verzeichnis "C:\inetpub\wwwroot" auf meinem Computer. Dieser Name ist willkürlich und können unabhängig benennen Sie z. B. Wenn Sie die Demo Web Applications ausführen möchten.
Ich gestartet Editor die Option "Als Administrator ausführen" verwenden, damit ich meinen Code im geschützten C:\inetpub Stammverzeichnis gespeichert wären. Ich nannte die Anwendung PushpinsAndPolygonsDemo.html, aber die Bing Maps-8-Bibliothek hat keine erforderlichen Benennungskonventionen, sodass Sie einen anderen Dateinamen verwenden können, wenn Sie möchten.
Die allgemeine Struktur der Website wird angezeigt, Abbildung 2. Hier ist eine stark verkürzte Version der Struktur:
<html>
<head>
<script type=‘text/javascript’>
// All JavaScript here
</script>
</head>
<body>
<!-- all HTML here -->
<script type='text/javascript'
src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
</body>
</html>
Der Tastencode ist das am unteren Rand des Abschnitts < Body > < Script >-Tag. Sie können lose interpretieren dies bedeutet: "Laden der Bing Maps 8 Bibliotheks-asynchron während der HTML-Code gerendert wird. Wenn die Bibliothek geladen hat, Übertragung der Steuerung eine JavaScript-Funktion mit dem Namen GetMap." Es ist möglich, die Bing Maps-8-Bibliothek synchron zu laden, aber ein asynchrones laden bietet ein besseres UX in Situationen, in denen die Bibliothek sehr langsam geladen wird.
Abbildung 2-Pins und Polygone Demo-Web-Seite
<!DOCTYPE html>
<!-- PushpinsAndPolygonsDemo.html -->
<html>
<head>
<title>Bing Maps 8 Pushpins with Infoboxes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
var map = null;
var pushpins = [];
var infobox = null; // Shared infobox for all pushpins
var ppLayer = null; // Pushpin layer
var drawingManager = null;
var drawnShapes = null; // an array
function GetMap() { . . }
function AddDrawControlEvents(manager) { . . }
function WriteLn(txt) { . . }
function LatLonStr(loc) { . . }
function Button1_Click() { . . }
function Button2_Click() { . . }
function ShowInfobox(e) { . . }
function HideInfobox(e) { . . }
function CreateCvsDot(radius, clr) { . . }
</script>
</head>
<body style="background-color:wheat">
<div id='controlPanel' style="float:left; width:262px; height:580px;
border:1px solid green; padding:10px; background-color: beige">
<input type="file" id="file1" size="24"></input>
<span style="display:block; height:10px"></span>
<input id="button1" type='button' style="width:125px;"
value='Place Pushpins' onclick="Button1_Click();"></input>
<div style="width:2px; display:inline-block"></div>
<input id="textbox1" type='text' size='15' value=' (not used)'></input><br/>
<span style="display:block; height:10px"></span>
<input id="button2" type='button' style="width:125px;"
value='Drawn Shape Info' onclick="Button2_Click();"></input>
<div style="width:2px; display:inline-block"></div>
<input id="textbox2" type='text' size='15' value=' (not used)'></input><br/>
<span style="display:block; height:10px"></span>
<textarea id='msgArea' rows="34" cols="36"
style="font-family:Consolas; font-size:12px"></textarea>
</div>
<div style="float:left; width:10px; height:600px">
<div id='mapDiv' style="float:left; width:700px; height:600px;
border:1px solid red;"></div>
<br style="clear: left;" /> <!-- magic formatting -->
<script type='text/javascript'
src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
</body>
</html>
Das allgemeine Layout der Webseite besteht aus zwei Side-by-Side schwebenden < Div > Bereichen. Im linken Fensterbereich < Div > enthält die HTML-Steuerelemente. Die rechte Seite < Div > enthält die Map-Objekt:
<div id='mapDiv' style="float:left; width:700px; height:600px;
border:1px solid red;">
</div>
Es ist möglich, mehrere Map-Objekte für spezielle Szenarien haben. Anstatt die Zuordnung Breite und Höhe, die Pixeleinheiten mit können Sie auch die CSS3 Viewport-Einheiten, VW- und Vh verwenden. Der Einfachheit halber einbetten ich HTML mithilfe einer separaten CSS-Datei, auf die Nebenversion des ein wenig hierzu, anstatt direkt formatieren.
Kurz gesagt, ein Bing Maps-8-Map-Objekt wird mithilfe einer Anwendung benutzerdefinierte JavaScript-Funktion erstellt, und befindet sich in einem < Div >-HTML-Bereich, der die Größe der Zuordnung angibt. Sie können eine Zuordnung synchron oder asynchron laden.
Initialisieren das Map-Objekt
Die Web-Anwendung eingerichtet sechs globalen Skriptbereich-Objekte:
var map = null;
var pushpins = [];
var infobox = null;
var ppLayer = null;
var drawingManager = null;
var drawnShapes = null;
Beim Erstellen einer kartenanwendung ich häufig vorstellen, die der Architektur wie bei einem großen C#- oder Java-Klasse, und somit Skriptbereich JavaScript-Objekte werden in der Regel, die von zwei oder mehr Funktionen verwendet werden. Jedoch werden aufgrund der JavaScript-Sprache Quirksmodus und massiver Verwendung von Rückruffunktionen und Closures, ich manchmal Objekte platzieren, die nur Gültigkeitsbereich der Funktion in den Skriptbereich Bereich benötigen.
Das Objekt mit dem Namen Zuordnung ist die Map-Objekt, und obwohl diese Namen nicht erforderlich ist, ist mehr oder weniger standard. Die Pins-Objekt ist ein Array, das alle Pins enthalten wird. Initialisiert das Objekt, das ein leeres Array hier im Gegensatz zu auf null, hauptsächlich, um anzugeben, dass das Objekt ein Array ist. Die Infobox-Objekt ist eine Einzelinstanz-Infobox-Klasse, die alle Pins freigegeben werden soll.
Eine der neuen Funktionen von Bing Maps-8 ist die Layer-Klasse. Anstatt alle visuellen Elemente in einer monolithische Auflistung ist es möglich, die visuellen Objekte in Ebenen organisiert. Das DrawingManager-Objekt ist ein Verweis auf das DrawingTools-Steuerelement. Das DrawnShapes-Objekt ist ein Array, das die Polygon-Objekt Formen gezeichnet, die durch einen Benutzer enthält.
Die Zuordnung wird von der Funktion GetMap initialisiert. Die Definition beginnt mit:
function GetMap()
{
var options = {
credentials: "AmUck2_xxxx_jSCm",
center: new Microsoft.Maps.Location(45.50, -122.50),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 10, enableClickableLogo: false, showCopyright: false
};
...
Beachten Sie, dass ich dabei die Namen der Mein Programm definierten Funktionen gern, die sie aus der Bibliothek oder integrierten JavaScript-Funktionen zu unterscheiden. Der Code Hier werden einige der ursprüngliche Zuordnung Einstellungen definiert. Alle Probleme sind optional, dies gilt auch für das Element Anmeldeinformationen, die im Wesentlichen ein Bing Maps-Schlüssel ist. Wenn Sie nicht über einen Schlüssel verfügen, können Sie eine beliebige Zeichenfolge vorhanden und die Zuordnung werden weiterhin geladen und funktionsfähig, aber es ist ein dünner Streifen über Ihre Zuordnung mit einer Meldung, "die angegebenen Anmeldeinformationen sind ungültig. Sie können für ein kostenloses Entwicklerkonto beim Anmelden http://www.bingmapsportal.com. " Erstellen eines Kontos eines Schlüssels ist relativ problemlos, aber wenn Sie ungeduldig wie ich Sie sofort beginnen möchten, können Sie registrieren später.
Die Zuordnung Center-Eigenschaft festgelegt ist, mithilfe einer Standortobjekt, das Latitude, gefolgt von einem Längengrad, optional gefolgt von zwei Werten, die im Zusammenhang mit der Höhe akzeptiert. Wenn Sie neue Geo-Clientanwendungen sind, müssen Sie ein bisschen vorsichtig sein. Der X-Wert ist ein normaler geometriepunkt (X, y) den Wert "Left-Right", aber in Geo-Anwendung ist die Breite der "Up-Down"-Wert.
Anschließend die Zuordnung wird angezeigt, und der master Infobox-Objekt vorbereitet ist:
var mapDiv = document.getElementById("mapDiv");
map = new Microsoft.Maps.Map(mapDiv, options);
infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0),
{ visible: false, offset: new Microsoft.Maps.Point(0,0) });
infobox.setMap(map);
Vorteile Bing Maps ist, dass die API-Variable verwenden und, die Parameternamen in den meisten Fällen, ziemlich verständlich sind. Die Infobox wird an Position (0, 0) platziert, die gerade ein dummy Speicherort ist, da die visible-Eigenschaft auf False festgelegt ist. Die Offset-Eigenschaft steuert die Positionierung des kleinen dreieckigen Zeigers am unteren Rand der Infobox-Objekt. Der Standardwert ist (0, 0), damit ich es ausgelassen haben könnte.
Als Nächstes werden die Pins vorbereitet:
ppLayer = new Microsoft.Maps.Layer();
var cpp= new Microsoft.Maps.Pushpin(map.getCenter(), null);
ppLayer.add(cpp);
map.layers.insert(ppLayer);
Das Objekt PpLayer ("PIN-Layer") definiert eine visuelle Ebene, in dem alle Pins gespeichert werden. Die Cpp ("Center Pushpin") wird auf die Ebene hinzugefügt, und die Ebene wird dann in die Zuordnung der PIN Sichtbarmachen hinzugefügt. Der zweite Parameter für die PIN-Konstruktor, der null hier ist, kann ein PushpinOptions-Objekt, das in Kürze erläutert wird. Ein Null-Wert übergeben, bietet Ihnen eine Standard-PIN-Objekt, das violetten und hat einen Radius von ca. 10 Pixel.
Bing Maps-8 unterstützt ältere Mechanismus, mit der alle visuellen Objekte in einer globalen Auflistung platzieren. Der Code sieht wie aus:
map.entities.push(cpp);
Die Funktion GetMap endet mit dem Erstellen des DrawingTools-Steuerelements, und platzieren es auf der Karte:
...
Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function() {
var tools = new Microsoft.Maps.DrawingTools(map);
tools.showDrawingManager(AddDrawControlEvents);
});
}
Eine große architekturänderung für Bing Maps-8 ist, dass die Bibliothek jetzt in 11 Modulen organisiert ist. Dadurch können Sie nur die Module, die Sie benötigen, die laden, die Leistung erheblich verbessert werden kann. Für andere Module enthalten, Suche, SpatialMath und HeatMap.
Die LoadModule-Funktion akzeptiert den Namen des Moduls zum Laden und eine Definition der Callback-Funktion, die enthält Code, der ausgeführt wird, nachdem das Modul geladen wurde. Dauert eine Weile mit der Callback-Funktionen vertraut sind, werden jedoch wie alles andere nach ein paar Beispiele für die hängt von deren Verwendung.
Die ShowDrawingManager-Funktion akzeptiert auch eine Rückruffunktion, diesmal unter Verwendung eines Namens (AddDrawControlEvents) statt einer anonymen Funktion. Funktion AddDrawControlEvents ist wie folgt definiert:
function AddDrawControlEvents(manager)
{
Microsoft.Maps.Events.addHandler(manager, 'drawingStarted',
function(e) { WriteLn('Drawing has started'); });
Microsoft.Maps.Events.addHandler(manager, 'drawingEnded',
function(e) { WriteLn(‘Drawing has ended \n’); });
drawingManager = manager;
}
Dieser Code ist kurz aber eher geringfügige. Ausgedrückt "Wenn ein Benutzer beginnt, Zeichnen einer Form mit dem Steuerelement DrawingTools und automatisch das DrawingStarted-Ereignis ausgelöst wird, setzen Sie eine Nachricht mit einer Programm definierten Funktion mit dem Namen WriteLn." Die Events.addHandler-Funktion akzeptiert ein Objekt für das Auslösen von Ereignissen und eine Callback-Funktion. Das Ereignisargument, e, werden nicht in der Demo verwendet, aber die gezeichnete Form dar.
Programm-Funktion WriteLn ist wie folgt definiert:
function WriteLn(txt)
{
var existing = msgArea.value;
msgArea.value = existing + txt + "\n";
}
Das MsgArea-Objekt ist ein HTML-Textarea-Tag auf der linken Seite der Webseite. Der hier verwendete Ansatz des bereits vorhandenen Inhalts, und Ersetzen dann mit angefügten Text ist recht Grobes, aber funktioniert gut, solange die Größe des großen erhält.
Erstellen und Anzeigen von benutzerdefinierten Pins
Klickt ein Benutzer auf das Schaltflächen-Steuerelement mit der Bezeichnung Pins eingerichtet, wird die Steuerung der Button1_Click-Funktion übergeben. Die Struktur der Funktion lautet:
function Button1_Click()
{
var f = file1.files[0];
var reader = new FileReader();
reader.onload = function(e) {
// Parse each line of result
// Create pushpins
// Add event handlers for pushpins
// Display pushpins
}
reader.readAsText(f);
}
Lokales Objekt f enthält Informationen über die physische Datei, die vom Steuerelement des Objekts "file1" HTML-Browser gezeigt wird. Da die HTML-Datei-API mehrere Dateien ausgewählt werden können, erfolgt die erste Datei als Dateien [0]. Das FileReader-Objekt wird eine Datei asynchron geladen, damit die Webseite reaktionsfähig bleibt. Das Onload-Ereignis wird ausgelöst, wenn die Datei in den Arbeitsspeicher gelesen wurde. Beachten Sie, wie Sie vorgehen, nachdem die Datei gelesen wird und dann die ReadAsText-Funktion rufen, um tatsächlich zu starten, lesen die Datei zu definieren.
Die anonyme Funktion, die beim Instanziieren einer das Onload-Ereignis ausgelöst wird, beginnt mit:
WriteLn("Source data = \n");
var lines = reader.result.split('\n');
for (var i = 0; i < lines.length; ++i) {
var line = lines[i];
...
Inhalt der Datei werden im reader.result-Objekt als eine riesige Zeichenfolge eingebettete '\n' gespeichert. Die String.split-Funktion wird verwendet, um jede Zeile in ein Array zu extrahieren. Anschließend durchlaufen die Zeilen werden mithilfe einer for-Schleife mit der Length-Eigenschaft. Nächster Schritt:
var tokens = line.split(',');
WriteLn(tokens[0] + " " + tokens[1] + " " + tokens[2]);
var loc = new Microsoft.Maps.Location(tokens[0], tokens[1]);
Beachten Sie, dass eine Zeile der Datei folgendermaßen aussieht:
45.46,-122.90,first location data
Jede Zeile wird auf das Komma als Trennzeichen aufgeteilt, und die drei Ergebnisse werden in ein Array namens Token, damit die Breite auf Token [0] und der Längengrad am Token [1] gespeichert. Da viele schief beim Lesen einer Textdatei gehen kann, würde in einem Produktionssystem Sie wahrscheinlich beim Versuch, ein Location-Objekt in einem JavaScript-Try-Catch-Block umschließen.
Anschließend wird ein benutzerdefinierte PIN für die Daten aus der aktuellen Textzeile erstellt:
var ppOptions = { icon: CreateCvsDot(6, "orangered"),
anchor: new Microsoft.Maps.Point(6,6), subTitle: tokens[2] };
var pp = new Microsoft.Maps.Pushpin(loc, ppOptions);
pushpins[i] = pp;
Benutzerdefinierte Pins werden durch die Übergabe von Informationen an die Symbol-Eigenschaft eines PushpinOptions-Objekts erstellt. Hier wird eine benutzerdefinierte Farbe für Rot, Orange Symbol mit einem Radius von 6 Pixel durch Aufrufen der Funktion Programm definierten Namens CreateCvsDot erstellt. Auch die Untertitel Eigenschaft festgelegt für die aktuelle PIN für den Text aus der Datendatei, die die Lat Lon Felder folgt. Nachdem die PIN erstellt wurde, wird das globale Pins Array hinzugefügt.
Die anonyme Funktionscode ist:
...
Microsoft.Maps.Events.addHandler(pushpins[i], 'mouseover', ShowInfobox);
Microsoft.Maps.Events.addHandler(pushpins[i], 'mouseout', HideInfobox);
}
ppLayer.add(pushpins);
map.layers.insert(ppLayer);
WriteLn("");
Jede PIN hat seine Mouseover und Mouseout-Ereignisse, die mit Programm definierten Funktionen ShowInfobox und HideInfobox geändert. Nachdem alle Pins erstellt wurden, ist das Array aufrechterhalten werden, den PIN-Ebene hinzufügen, klicken Sie dann in der Zuordnung eingefügt wird, die Pins sichtbar macht.
Funktion CreateCvsDot ("HTML-Canvas-Punkt erstellen") ist wie folgt definiert:
function CreateCvsDot(radius, clr) {
var c = document.createElement('canvas');
c.width = 2 * radius; c.height = 2 * radius;
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
ctx.fillStyle = clr; ctx.fill();
return(c.toDataURL());
}
Die Funktion akzeptiert einen Radius und eine Farbe und gibt ein HTML5-Canvas-Objekt zurück. Es gibt vier Methoden zum Erstellen einer benutzerdefinierten Pin-Symbol angezeigt. Sie können ein statisches Bild z. B. eine PNG-Datei verwenden. Sie können ein statisches Bild mit Base64-Format codiert. Sie können ein dynamische HTML-Canvas-Objekt erstellen. oder Sie können eine dynamische scalable Vector Graphics (SVG)-Objekt erstellen.
Die Möglichkeit, eine Pinsymbol im Handumdrehen erstellen ermöglicht ein hohes Maß an Flexibilität. Sie können z. B. andere Farbe und Größe von Symbolen abhängig von der Dichte der Pins in einem Bereich der Zuordnung oder je nach die Zoomstufe der Karte erstellen.
Ereignishandlerfunktion ShowInfobox ist wie folgt definiert:
function ShowInfobox(e)
{
var loc = e.target.getLocation();
WriteLn('\n mouseover at ' + loc);
infobox.setLocation(loc);
infobox.setOptions( { visible: true, title: e.target.getSubTitle(),
description: LatLonStr(loc) });
}
Wechselt der Benutzer den Mauszeiger über einen PIN, das Pinsymbol Mouseover-Ereignis ausgelöst wird, und überträgt die Steuerung auf ShowInfobox. Die Funktion ruft den Speicherort des Ereignisses/PIN und verwendet, um den PIN zu platzieren. Beachten Sie, dass die Untertitel-Eigenschaft der einzelnen PIN Text wie z. B. "erste Datenspeicherort." enthält. Dieser Text wird als Titel Infobox verwendet.
Der Speicherort der PIN, mit zwei Dezimalstellen an, die mithilfe der Anwendung definierte Hilfsfunktion LatLonStr formatiert wird die Description-Eigenschaft der Infobox festgelegt:
function LatLonStr(loc)
{
var s = "(" + Number(loc.latitude).toFixed(2) + ", " +
Number(loc.longitude).toFixed(2) + ")";
return s;
}
Die Funktion HideInfobox ist:
function HideInfobox(e)
{
WriteLn(' mouseout at ' + e.target.getLocation());
infobox.setOptions({ visible: false });
}
Wechselt der Benutzer den Cursor außerhalb einer PIN, das Pinsymbol Mouseout-Ereignis ausgelöst wird, und überträgt die Steuerung auf HideInfobox. Die visible-Eigenschaft ist auf False festgelegt, damit die Infobox nicht sichtbar ist, aber immer noch in der Zuordnung ist.
Abrufen von interaktiven Formen
Klickt ein Benutzer auf das Schaltflächen-Steuerelement mit der Bezeichnung gezeichnet Formen Info, wird die Steuerung an die Button2_Click-Funktion übergeben. Die Funktion wird wie folgt definiert:
function Button2_Click()
{
drawnShapes = drawingManager.getPrimitives();
var numShapes = drawnShapes.length;
var mostRecent = drawnShapes[numShapes-1]; // Polygon
var vertices = mostRecent.getLocations();
WriteLn("There are " + numShapes + " drawn shapes");
WriteLn("Vertices of most recent drawn shape: ");
for (var i = 0; i < vertices.length; ++i) {
WriteLn(LatLonStr(vertices[i]));
}
}
Die globale DrawingManager-Objekt wurde erstellt, wenn das DrawingTools-Steuerelement auf der Karte eingefügt wurde. Sie wird verwendet, um ein Array mit allen Formen vom zeichnen-Steuerelement gezeichnet abzurufen. Das letzte Shape gezeichnet werden das letzte Element im Array. Der Code setzt die gezeichneten Formen sind vom Typ Polygon, aber das Steuerelement DrawingTool kann verschiedene Arten von Objekten erstellen. Sie können den Shape-Typ mit einem Code wie überprüfen:
var isPoly = mostRecent instanceof Microsoft.Maps.Polygon;
Die Funktion abgeschlossen ist, durch die Eckpunkte des letzten gezeichneten Form mithilfe der Funktion GetLocations abgerufen und durchlaufen die Scheitelpunkte angezeigt.
Die Heat Map-Demo
Beim Arbeiten mit Geo-Applikationen, kategorisieren ich auf diese entsprechend der Anzahl von Datenpunkten, die mit denen ich zu tun habe. Arbeiten mit einer großen Anzahl von Standorten kann eine Herausforderung darstellen. Die Bing ordnet 8-Bibliothek hat zwei sehr schöne Methoden zum Arbeiten mit eine große Anzahl von Standorten – clustered Pins und heatmaps. Sehen Sie sich die Demo heatmap in Abbildung 3.
.png "Heat Map-Demo")
Abbildung 3 Heat Map-Demo
Es gibt mehrere Arten von heatmaps, aber eine häufige Art zeigt die kombinierte Datenpunkte, die mit einem Farbverlauf, wobei unterschiedliche Farben dichten unterschiedliche Daten darstellen. Die Demo Web-Anwendung lädt zunächst eine Karte, die zentriert (37.50,-118.00) und fügt einen großen Lila Standard-PIN zentriert.
Zunächst ich klickte auf die Schaltfläche Durchsuchen von HTML5-Datei und zeigt in einer lokalen Datei mit dem Namen NV_Cities.txt, Stadt Daten enthält. Als nächstes klickte ich auf das erste Steuerelement, das geladen und eine Wärmekarte City Dichte Staates Nevada angezeigt. Anschließend werden, verwenden das zweite Schaltflächen-Steuerelement Wärmekarte gelöscht.
Ich Sie dann erneut auf die Durchsuchen-Schaltflächen-Steuerelement geklickt und eine tabstoppgetrennte Textdatei mit dem Namen CA_Cities.txt gezeigt wird. Diese Datei enthält eine Liste 1,522 Städte in Kalifornien und ihre entsprechenden Längen-und Informationen. Dann klickte ich auf das Schaltflächensteuerelement Heat Map anzeigen, lesen die Textdatei, die Lat Lon-Daten analysiert und die Daten in einem Array gespeichert. Die Lat-Lon Daten wurde dann als einer Wärmekarte generieren eine Stadt Dichte Visualisierung angezeigt.
Die Struktur der Heat Map demoanwendung ist fast genauso wie die Struktur der Demo Pins und Polygone. Die globale Skriptbereich Objekte sind:
var map = null;
var ppLayer = null;
var hmLayer = null;
var reader = null; // FileReader object
var locs = [];
var cGrad = { '0.0': 'black', '0.2': 'purple', '0.4': 'blue', '0.6': 'green',
'0.8': 'yellow', '0.9': 'orange', '1.0': 'red' };
var hmOptions = { intensity: 0.65, radius: 7, colorGradient: cGrad };
Das HmLayer-Objekt ist eine Schicht für die heatmap. Das Locs-Array hält die Speicherort-Objekte, die heatmap definieren. Das Objekt cGrad definiert einen benutzerdefinierten Farbverlauf für die Heat Map-Optionen. Die HmOptions definieren Sie die Optionen für die heatmap. Verwenden eines benutzerdefinierten HeatMapOptions-Objekts ist optional, aber in den meisten Fällen sollten Sie auf die Optionen verwenden, um die Darstellung der heatmap gesteuert.
Hier ist der Code in der Funktion Button1_Click, die liest und analysiert die Quelldatei:
var lines = reader.result.split('\n');
for (var i = 0; i < lines.length; ++i) { // Each line
var line = lines[i];
var tokens = line.split('\t'); // Split on tabs
var loc = new Microsoft.Maps.Location(tokens[12], tokens[13]);
locs[i] = loc;
}
Die Quelldateien für die Daten sehen wie folgt:
CA 602000 2409704 Anaheim city ( . . ) 33.855497 -117.760071
CA 602028 2628706 Anchor Bay CDP ( . . ) 38.812653 -123.570267
...
Jede Zeile enthält 14 tabulatorgetrennte Werte. Der erste Wert ist die Abkürzung für den Bundesstaat. Die nächsten beiden Felder sind IDs. Das vierte Feld heißt der Ort, der eine Stadt, eine Stadt oder einen Ort Census festgelegt (CDP) sein kann. Sind acht Felder, die Informationen wie z. B. Count und Land US Census Population-Bereich enthalten. Die letzten beiden Felder sind die Breiten- und Längenkoordinaten. Ich habe die Daten aus den USA Census-Website unter bit.ly/29SETIU.
Der Code, der erstellt und zeigt die heatmap ist:
Microsoft.Maps.loadModule('Microsoft.Maps.HeatMap', function() {
hmLayer = new Microsoft.Maps.HeatMapLayer(locs, hmOptions);
map.layers.insert(hmLayer);
});
Die HmLayer wird unter Verwendung des globalen Speicherortobjekte und das HmOptions-Objekt, das den benutzerdefinierten Farbverlauf enthält eine Ebene erstellt. Sehr nett!
Der Code für die Funktion Button2_Click entfernt die aktuelle heatmap:
function Button2_Click()
{
WriteLn('Clearing heat map' + "\n");
hmLayer.clear();
reader = null;
locs = [];
}
Dieser Code zeigt, einer der Vorteile bei der Arbeit mit Objekten der Ebene. Statt jedes Objekt in der Auflistung Map.entities durchlaufen, können Sie Objekte in einer bestimmten Ebene direkt zugreifen.
PIN-Clustering
Eines meiner neuen Lieblingsfeatures in Bing Maps-8 ist clustering PIN. Die Idee ist am besten visuell erläutert. In Abbildung 4, die Webseite mit dem Namen ClusteredPushpinsDemo.html lädt eine Karte mit einer anfänglichen Zoomstufe von 10, in der Nähe von Portland, ganz zentriert Beim Klicken auf das Schaltflächen-Steuerelement mit der Bezeichnung Pins generiert wurde, verwendet die Anwendung die GetLocations-Funktion in der Maps.TestDataGenerator zum Erstellen von 6.000 wahllos. Klicken Sie dann den Anwendungscode gruppierten Pins erstellt und angezeigt werden. Rote Kreise kennzeichnen 100 oder mehr Pins in der zugehörigen Zuordnungsbereich vorhanden sind, und Blau Pins Pins 10 bis 99 angeben.
.png "PIN-Clustering mit Zoom-Stufe 10")
Abbildung 4-PIN-Clustering mit Zoomstufe 10
Als Nächstes vergrößert ich drei Ebenen. Clustering automatisch tritt bei jeder Änderung der Zoomfaktor. Auf Zoom Ebene 13 (finden Sie unter Abbildung 5) einzelne Pins werden als kleine rote Punkte angezeigt, und grüne Kreise anzugeben, dass es 2 bis 9 Pins an diesem Speicherort.
.png "PIN-Clustering mit Zoom auf 13")
Abbildung 5-PIN Clustering mit Zoomstufe 13
Heatmaps und Pins clustering aktivieren Sie eine große Anzahl von Elementen Speicherort zu verwalten. PIN-Clusterunterstützung erlaubt jedoch Benutzern den Zugriff auf einzelne Elemente.
Zusammenfassung
Die hier vorgestellte Demo Web Applications erhalten Sie eine gute Vorstellung davon, wie die neue Big Maps 8-Bibliothek ist. Es gibt viele weitere neue Funktionen, die ich nicht einschließlich Infobox Anpassung, kachelebenen, geografischen Suche und räumliche mathematische Funktionen behandelt habe, aus. Wenn Sie weitere Informationen zum Bing Maps 8 erfahren möchten, empfehle ich die interaktiven SDK-Website unter binged.it/29SFytX. Es stellt ca. 137 sehr kurz aber von Webseiten, die viele wichtige Features von Bing Maps 8 zu erläutern abgeschlossen wird. Sie erfahren auch, die in die offizielle Dokumentation unter aka.ms/BingMapsV8Docs ist sehr gut geschriebene und nützlich.
Ich habe zwei der wichtigsten Alternativen zu den Bing Maps-8-Bibliothek, die Google Maps-Bibliothek und der open-Source-Bibliothek Leaflet.js verwendet. Alle drei Bibliotheken sind hervorragend geeignet, aber ich finde Bing Maps-8. Einige Technologien nur ein Gefühl"rechts" und für mich, zumindest Bing Maps-8 ist jetzt meiner bevorzugten-Bibliothek für Geo-Applications.
Dr. James McCaffreyist in Redmond (Washington) für Microsoft Research tätig. Er hat an verschiedenen Microsoft-Produkten mitgearbeitet, unter anderem an Internet Explorer und Bing. Er ist unter <jammc@microsoft.com.>
Unser Dank gilt den folgenden technischen Experten von Microsoft für die Durchsicht dieses Artikels: Ricky Brundritt (Bing Maps) und John Krumm (Microsoft Research)