Dynamische Geo -Karten mit SVG und JQuery

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>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Map Sample<span><span></span>></span>
</span>    <span><span><span><style> type<span >="text/css"</style></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></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><div> class<span>="map"</span>>
        <span><span><span><svg> 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>></svg></span>
</span>            <span><span><span><g> id<span>="sar"</span>></g></span>
</span>                <span><span><span><polygon> class<span>="st0"</span> points<span>="193,463 ...    "</span>/></polygon></span>
</span>            <span><span><span></span>></span>
</span>
            <span><!-- etc ... -->
</span>
        <span><span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></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     <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></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     <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></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>+ region_data.region_name 
</span>    <span>+ '<br>' 
</span>    <span>+ 'Population: ' 
</span>    <span>+ region_data.population.toLocaleString("en-UK")
</span>    <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.

Warum werden meine SVG -Kartenregionen nicht richtig angezeigt? Die SVG -Datei wird möglicherweise nicht korrekt formatiert, oder in Ihrem JavaScript -Code kann ein Fehler auftreten. Überprüfen Sie die Konsole auf Fehlermeldungen und stellen Sie sicher, dass Ihre SVG -Datei gültig ist.

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 für die Leistung optimieren? Die Karte für die Leistung kann verschiedene Techniken beinhalten. Dazu gehört die Minimierung der Größe Ihrer SVG -Datei, die Verwendung von CSS zum Styling anstelle von Inline -Attributen und die effiziente Verwendung von JavaScript. Sie können auch Tools wie SVGO verwenden, um Ihre SVG -Dateien zu optimieren.

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!