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.
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.
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.
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:
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:
Hier ist das Endergebnis auf CodePen:
Siehe den Stift KDHFH von sitepoint (@sitepoint) auf CodePen.
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 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.
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!
Der Unterschied zwischen vscode und Visual Studio
Welche privaten Informationen werden Douyins enge Freunde sehen?
Lösung für das Problem, dass exe-Dateien im Win10-System nicht geöffnet werden können
Gängige hexadezimale Farbcodes
Was ist eine .Xauthority-Datei?
So ändern Sie das Passwort in MySQL
So erhalten Sie die Länge eines Arrays in js
Befehlsverwendung konvertieren
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
