Wenn ich Diagramme erstellen muss, ist meine erste Wahl Google -Diagramme oder eine andere dedizierte Bibliothek. Manchmal brauche ich jedoch einige spezifische Funktionen, die ich dort nicht finden kann. In diesen F?llen erweisen sich SVG -Bilder als sehr wertvoll.
Vor kurzem musste ich eine Berichtsseite erstellen, auf der eine Karte Italiens angezeigt werden konnte, auf der jede Region einen anderen Farbton entspricht, gem?? einigen Werten, die aus einer Datenbank abgerufen wurden. Dank SVG war diese Aufgabe sehr einfach.
Key Takeaways
- SVG -Bilder k?nnen verwendet werden, um dynamische Geo -Karten mit unterschiedlichen Farbt?nen für jede Region zu erstellen, basierend auf Daten, die aus einer Datenbank abgerufen wurden. Dies wird erreicht, indem jede Region als ein einzelnes Objekt mit einem eindeutigen Level -Namen gezeichnet wird, der dem in der Datenbank verwendeten Code entspricht, um seine Daten zu identifizieren.
- Die Karte kann mit CSS und JQuery interaktiv gemacht werden, sodass sie spezifische Daten wie Bev?lkerungswert anzeigen kann, wenn die Maus über eine Region schwebt. Dies wird erreicht, indem eine CSS -Regel für G: Hover und eine neue info_panel -Klasse hinzugefügt wird, um die Informationsfelder zu stylen, und dann den vorherigen für den Zyklus zu ?ndern, und addiert .Data (), um Informationen zu speichern, die auf Hover angezeigt werden.
- SVG -Karten k?nnen reagiert, mit anderen JavaScript -Bibliotheken verwendet, für die Datenvisualisierung verwendet und sogar animiert. Sie k?nnen auch für die Leistung angepasst und optimiert werden. Das Erstellen einer benutzerdefinierten Karte erfordert jedoch ein gutes Verst?ndnis für SVG- und geografische Daten, und komplexe Animationen k?nnen sich auf die Leistung auswirken.
Erstellen der SVG -Karte in Illustrator
Zuerst habe ich eine Karte Italiens mit Illustrator gezeichnet:
Jede Region wird als einzelnes Objekt gezeichnet, und jede von ihnen hat eine eigene Ebene, wobei ein Name dem in der Datenbank verwendeten Code entspricht, um seine relativen Daten zu identifizieren (z. B. ?TOS“ für Toskana).
Schlie?lich muss die Karte als SVG -Datei gespeichert werden. Sie müssen darauf achten, die Option ?CSS -Eigenschaft“ auf "Stilelemente" in Illustrator festzulegen, wie unten gezeigt:
?ffnen Sie die gerade erstellte Datei, Sie werden sehen, dass sie einen Satz von G -Tags enth?lt, deren IDs mit den Namen der Illustrator -Ebenen übereinstimmen.
Erstellen unserer HTML -Datei
Jedes in G -Tags enthaltene Element hat eine ST0 -Klasse, damit ihnen der Schlaganfall und die Füllung von CSS -Eigenschaften zugewiesen werden k?nnen:
Wenn Sie versuchen, diese Werte zu ?ndern, ?ndert sich die Karte sofort:
Jetzt k?nnen wir diesen Code verwenden, um unsere HTML -Datei mit Inline -SVG zu erstellen, wie unten gezeigt (Code wurde für die Bequemlichkeit verkürzt):
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span> <span><span><span><title</span>></span>Map Sample<span><span></title</span>></span>
</span> <span><span><span><style</span> type<span>="text/css"</span> media<span>="all"</span>></span><span>
</span></span><span><span> <span><span>.map svg</span> {
</span></span></span><span><span> <span>height: auto;
</span></span></span><span><span> <span>width: 350px;
</span></span></span><span><span> <span>}
</span></span></span><span><span> <span><span>.map g</span> {
</span></span></span><span><span> <span>fill: #ccc;
</span></span></span><span><span> <span>stroke: #333;
</span></span></span><span><span> <span>stroke-width: 1;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span> <span><span><span><div</span> class<span>="map"</span>></span>
</span> <span><span><span><svg</span> version<span>="1.1"</span> id<span>="Livello_1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span> <span>xmlns:xlink</span><span>="https://www.w3.org/1999/xlink"</span> x<span>="0px"</span> y<span>="0px"</span> viewBox<span>="0 -21.6 761 919"</span> <span>style<span>="<span>enable-background:new 0 -21.6 761 919;</span>"</span></span> <span>xml:space</span><span>="preserve"</span>></span>
</span> <span><span><span><g</span> id<span>="sar"</span>></span>
</span> <span><span><span><polygon</span> class<span>="st0"</span> points<span>="193,463 ... "</span>/></span>
</span> <span><span><span></g</span>></span>
</span>
<span><!-- etc ... -->
</span>
<span><span><span></svg</span>></span>
</span> <span><span><span></div</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
Sie k?nnen sehen, dass das Style -Attribut im SVG -Tag gel?scht und durch eine neue im Dokumentkopf ersetzt wurde. Alle G -Elemente wurden ursprünglich mit einem hellgrau gefüllt.
Die ST0 -Klasse wird nicht mehr verwendet (Sie k?nnen sie aus Ihrem SVG -Code entfernen) und wurde durch den Selektor von .map G ersetzt. Wie auch immer, dies ist nicht obligatorisch, Sie k?nnen die CSS -Selektoren verwenden, die Sie bevorzugen.
Der zweite Schritt besteht darin, unsere Karte an einige Daten zu binden, die aus unserer Datenbank abgerufen werden. In diesem Beispiel ist es unser Ziel, die Karte gem?? der Population jeder Region zu malen.
Hinzufügen der JSON -Daten und JavaScript
Daten werden im JSON -Format abgerufen und direkt in unsere HTML -Datei eingefügt (in der realen Welt würden natürlich Daten mit AJAX oder ?hnlichem) abgerufen.
.
Jetzt enth?lt unsere Seite JSON in unserer JavaScript -Datei, die so aussieht (erneut abgekürzt):
<span>var regions=[
</span> <span>{
</span> <span>"region_name": "Lombardia",
</span> <span>"region_code": "lom",
</span> <span>"population": 9794525
</span> <span>},
</span> <span>{
</span> <span>"region_name": "Campania",
</span> <span>"region_code": "cam",
</span> <span>"population": 5769750
</span> <span>},
</span>
<span>// etc ...
</span>
<span>];</span>
Danach wird eine Farbe ausgew?hlt (in diesem Fall #0B68AA), und wir weisen sie der Region mit dem h?chsten Bev?lkerungswert zu. Die anderen Regionen werden im Verh?ltnis zu ihrem Prozentsatz der Bev?lkerung mit T?nen der Hauptfarbe gef?rbt.
Als n?chstes k?nnen wir etwas JavaScript hinzufügen.
Zun?chst müssen wir die Region mit dem maximalen Bev?lkerungswert bestimmen. Dies kann mit ein paar Codezeilen erfolgen.
Sobald ein tempor?res Array mit den Bev?lkerungswerten erstellt wurde, k?nnen wir die mathematische Methode verwenden:
<span>var temp_array= regions.map( function( item ) {
</span> <span>return item.population;
</span><span>});
</span>
<span>var highest_value = Math.max.apply( Math, temp_array );</span>
Dann k?nnen wir die Elemente aller Regionen durchlaufen und einen Prozentsatz der Transparenz gem?? der Berechnung Population / Maximalwert (mit ein wenig Hilfe von JQuery) anwenden:
<span>$(function() {
</span> <span>for(i=0; i < regions.length; i++) {
</span> <span>$('#'+ regions[i].region_code).css({'fill': 'rgba(11, 104, 170,'
</span> <span>+ regions[i].population/highest_value
</span> <span>+ ')'});
</span> <span>}
</span><span>});</span>
Dies ist das Ergebnis:
Interaktivit?t mit CSS und JQuery
hinzufügen
Die Karte kann durch eine gewisse Interaktivit?t verbessert werden. Wir m?chten, dass es den Bev?lkerungswert zeigt, wenn die Maus über Regionen positioniert ist.
Erstens fügen wir eine CSS -Regel für G: Hover und eine neue info_panel -Klasse hinzu, um unsere Informationsboxen zu stylen:
<span><span>.map g:hover</span> {
</span> <span>fill: #fc0 !important;
</span> <span>cursor: help;
</span><span>}
</span>
<span><span>.info_panel</span> {
</span> <span>background-color: <span>rgba(255,255,255, .7)</span>;
</span> <span>padding: .3em;
</span> <span>font-size: .8em;
</span> <span>font-family: Helvetica, Arial, sans-serif;
</span> <span>position: absolute;
</span><span>}
</span>
<span><span>.info_panel::first-line</span> {
</span> <span>font-weight: bold;
</span><span>}</span>
Der! Wichtige Modifikator in .Map G: Der Schwebe wird ben?tigt, um die Spezifit?t
der Füllregel zu verbessern, ansonsten würde es durch injizierte Inline -CSS umgangen.
Dann müssen wir unsere vorherige für den Zyklus ?ndern und .Data () hinzuzufügen, um Informationen zu speichern, die auf schweber angezeigt werden:
<span>for (i = 0; i < regions.length; i++) {
</span> <span>$('#'+ regions[i].region_code)
</span> <span>.css({'fill': 'rgba(11, 104, 170,'
</span> <span>+ regions[i].population/highest_value
</span> <span>+')'}).data('region', regions[i]);
</span><span>}</span>
Schlie?lich k?nnen wir unser Skript vervollst?ndigen, indem wir einige Mausover -Effekte hinzufügen:
<span>$('.map g').mouseover(function (e) {
</span> <span>var region_data=$(this).data('region');
</span> <span>$('<div >'
</span> <span>+ region_data.region_name
</span> <span>+ '<br>'
</span> <span>+ 'Population: '
</span> <span>+ region_data.population.toLocaleString("en-UK")
</span> <span>+ '</div>').appendTo('body');
</span><span>}).mouseleave(function () {
</span> <span>$('.info_panel').remove();
</span><span>}).mousemove(function(e) {
</span> <span>var mouseX = e.pageX, // X coordinates of mouse
</span> mouseY <span>= e.pageY; // Y coordinates of mouse
</span>
<span>$('.info_panel').css({
</span> <span>top: mouseY-50,
</span> <span>left: mouseX - ($('.info_panel').width() / 2)
</span> <span>});
</span><span>});</span>
wie es funktioniert:
- Erstens bauen wir mit Mausover eine DIV, die die zu zeigen (Regionennamen und Bev?lkerung) enth?lt. Das DIV ist jedes Mal aufgebaut, wenn die Maus über ein G -Element schwebt und an den Dokumentk?rper angeh?ngt ist.
- Mouselave entfernt diesen Div, wenn sich der Cursor au?erhalb des erweiterten Bereichs befindet;
- Die letzte Methode, Mousemove, ruft Mauskoordinaten ab und weist sie den generierten Divs zu.
Hier ist das Endergebnis auf CodePen:
Siehe den Stift KDHFH von sitepoint (@sitepoint) auf CodePen.
h?ufig gestellte Fragen (FAQs) auf dynamischen Geo -Karten mit SVG und JQuery
Wie kann ich meine SVG -Karte reagieren? Mit dem Ansichtbox -Attribut k?nnen Sie angeben, dass ein bestimmter Bereich der Karte sichtbar ist und das Seitenverh?ltnis beim Auf- oder Abklingern erhalten bleibt. Sie k?nnen auch Medienabfragen verwenden, um die Gr??e und Position der Karte basierend auf der Bildschirmgr??e anzupassen. mit anderen JavaScript -Bibliotheken wie D3.JS, Raphael und Snap.svg verwendet werden. Diese Bibliotheken bieten zus?tzliche Funktionen zum Erstellen und Manipulieren von SVG -Grafiken. Die Implementierung kann jedoch von JQuery abweichen. Sie müssen daher auf die Dokumentation der jeweiligen Bibliothek verweisen.
Wie kann ich meiner SVG -Karte Interaktivit?t hinzufügen? SVG -Karte mit JavaScript oder JQuery. Dies kann Funktionen wie Tooltips, Zoomen, Schwenk und klickbare Regionen umfassen. Beispielsweise k?nnen Sie die Ereignisse "Mausover" und "Mausout" verwenden, um Tooltips anzuzeigen, und das "Klicken" -Ereignis, um Regionen zu klicken.
Wie kann ich SVG -Karten für die Datenvisualisierung verwenden? ??> SVG -Karten k?nnen für die Datenvisualisierung verwendet werden, indem auf Datenwerten basierend auf Datenwerten ausfarb, eine Technik, die als Choropleth -Mapping bekannt ist. Sie k?nnen JavaScript verwenden, um Daten an Ihre SVG -Elemente zu binden und eine Farbskala anzuwenden. Bibliotheken wie D3.Js bieten integrierte Funktionen zum Erstellen von Choropleth-Karten.
Wie kann ich eine benutzerdefinierte SVG-Karte erstellen? Adobe Illustrator oder Inkscape und dann als SVG -Datei exportieren. Sie k?nnen dann JavaScript oder JQuery verwenden, um die SVG -Elemente zu manipulieren und Interaktivit?t hinzuzufügen. Denken Sie daran, dass das Erstellen einer benutzerdefinierten Karte ein gutes Verst?ndnis für SVG- und geografische Daten erfordert.
Kann ich SVG -Karten in allen Browsern verwenden? Safari und Kante. ?ltere Versionen von Internet Explorer (IE8 und unten) unterstützen jedoch keine SVG. Wenn Sie diese Browser unterstützen müssen, k?nnen Sie eine Polyfill wie Rapha?l verwenden oder Ihr SVG in ein anderes Format wie VML konvertieren.
Wie kann ich meine SVG -Karte animieren? Dies kann die Animation der Farben, Formen und Positionen Ihrer SVG -Elemente beinhalten. Beachten Sie, dass komplexe Animationen die Leistung beeinflussen k?nnen. Verwenden Sie sie daher sparsam.
Kann ich SVG -Karten in mobilen Anwendungen verwenden? SVG wird sowohl in Android- als auch in iOS -Webansichten unterstützt und kann in hybriden mobilen Apps verwendet werden, die Rahmenbedingungen wie Cordova oder React Native verwenden. Beachten Sie jedoch, dass die Leistung ein Problem auf ?lteren Ger?ten oder komplexen Karten sein kann.
Das obige ist der detaillierte Inhalt vonDynamische Geo -Karten mit SVG und JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!