Ein Anfängerleitfaden zum Erstellen einer Karte mithilfe von Blättern.js

blutblättert.js: Eine leichte JavaScript -Bibliothek zum Erstellen interaktiver Karten

blättert.js ist eine beliebte, leichte Open -Source -JavaScript -Bibliothek zum Erstellen interaktiver Karten, die auf wichtigen Desktop- und mobilen Plattformen gut funktionieren.

Kernpunkte:

• blättert.js ist eine beliebte, leichte und Open -Source -JavaScript -Bibliothek zum Erstellen interaktiver Karten, die mit Mainstream -Desktops und mobilen Geräten kompatibel sind.
• Erstellen einer grundlegenden Karte mit Blättern.js erfordert das Erstellen einer HTML -Seite, die Verweisung der Blätterbibliotheksdatei, die Vorbereitung von Kartendaten (einschließlich Koordinaten und Basemap) und das Einrichten der Blattkarte.
• broatot.js unterstützt eine breite Palette der Kartenanpassung, einschließlich des Deaktivierens des Maus -Rad -Zooms, des Hinzufügens mehrerer Vektorschichten, des Anpassung von Markierungen und dem Hinzufügen von Popups zum Anzeigen von Details.
• broatot.js unterstützt eine große Anzahl von Plugins, die von der Broschürengemeinschaft entwickelt wurden, die erweiterte Funktionen für die ursprünglichen Karten liefern .

bleecy.js ist derzeit eine der beliebtesten Kartenbibliotheken und eine flexible, leichte Open -Source -JavaScript -Bibliothek zum Erstellen interaktiver Karten. Die Blätterblatt ist ein Framework, in dem Kartendaten angezeigt werden, und die Daten und Basemap müssen vom Entwickler bereitgestellt werden. Die Karte besteht aus Fliesenschichten und verfügt über Browserunterstützung, Standardinteraktivität, Schwenk- und Zoomfunktionen. Sie können auch mehr benutzerdefinierte Ebenen und Plugins und alle Kartenfunktionen in Flugblättern hinzufügen. Diese Kartenbibliothek wandelt Ihre Daten in Kartenebenen um und bietet eine starke Unterstützung, was sie für die meisten Entwickler zur Auswahl macht. Es funktioniert gut auf wichtigen Desktop- und Mobilfunkplattformen und macht es zu einer idealen JavaScript -Bibliothek für mobile und größere Bildschirmkarten.

Dieses Tutorial zeigt Ihnen, wie Sie eine schöne, interaktive Südpazifikkarte mit HTML, CSS und Blättchen erstellen, die die beliebtesten Strände hervorheben. Ich habe Daten von der TripAdvisor -Website gesammelt und die 10 besten Strände im Südpazifik zusammengestellt, das 2021 von Travelers 'Choice ausgewählt wurde.

Haben Sie einige interessante Karten gesehen und Ihre eigene Karte erstellen? Folgen Sie mir auf dieser aufregenden Reise und ich werde Ihnen zeigen, wie Sie eine coole Karte zeichnen und die Top 10 besten Strände mit Flugblättern hervorheben.

Vier Schritte zum Erstellen einer grundlegenden Blättchenkarte:

Der Prozess des Erstellens einer einfachen Karte mit Blättern ist einfach. Einige HTML- und JavaScript -Grundlagen sind hilfreich, aber mach dir keine Sorgen, wenn du ein vollständiger Anfänger bist. Die Verwendung dieser JavaScript -Bibliothek ist sehr einfach und ich werde Sie Schritt für Schritt durch jede Codezeile führen, während ich diese erstaunliche und aufschlussreiche Karte erstelle.

1.

Erstens erstelle ich eine HTML -Seite, um das Kartenobjekt zu rendern. Fügen Sie dann eine <div> hinzu, um die Karte zu halten, und geben Sie ihr eine ID (z. B. "Karte") als später als Referenz an. Als nächstes füge ich einige Stildetails hinzu, in denen ich Breite und Höhe als 100VW und 100VH angeben. Dadurch wird die Karte die gesamte Seite besetzt: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Leaflet Map&lt;/title&gt; &lt;style type=&quot;text/css&quot;&gt; body{ margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> <strong> 2. </strong> Da ich die Blätterbibliothek verwende, muss ich die erforderlichen JavaScript- und CSS -Dateien für die Bibliothek einbeziehen. Sie können die Datei direkt herunterladen, die Datei lokal mit JavaScript Package Manager (NPM) installieren oder die verwaltete Version in der CDN: </p> verwenden <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Leaflet Map&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.6.0/dist/leaflet.css&quot; integrity=&quot;sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==&quot; crossorigin=&quot;&quot;/&gt; &lt;style type=&quot;text/css&quot;&gt; body{ margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;🎜&gt; &lt;🎜&gt; &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> Hinweis: Mit der Eigenschaft <p> kann der Browser die abgerufenen Skripte überprüfen, um sicherzustellen, dass der Code nicht geladen wird, wenn der Quellcode manipuliert wurde. <em> <code>integrity

3

Zeichnen Sie eine Karte, koordinieren Sie Werte wie Breitengrad und Längengrad. Ich habe den Breitengrad und die Länge jedes Datenpunkts von hier gesammelt. Außerdem brauche ich auch für die Broschürenentwicklung die Basemap, die ich von einer Website namens OpenStreetMap bekomme.

4 ist jetzt der unterhaltsame Teil des Erstellens der Karte und des Schreibens von Code. Sie werden nicht glauben, wie viele Codezeilen es braucht, um eine voll funktionsfähige Karte mithilfe der Blättchen zu erstellen. Diese Leichtigkeit der Entwicklung und die Tatsache, dass die Broschüre eine Open -Source -JavaScript -Bibliothek ist, macht sie hoch in der Liste der Kartenbibliothek.

Denken Sie zunächst daran, dass auf alles in dieser JavaScript -Bibliothek über den Buchstaben "L" zugegriffen wird und alle Funktionen durch sie erweitert werden.

Initialisieren Sie die Karte

Erstens erkläre ich die Kartenvariable und initialisiere sie mithilfe der Blättchenkarte. Der erste Parameter ist die zuvor definierte ID von

. In dem zweiten Parameter soll die Mitte der Karte gefunden werden. Der letzte ist der Zoomebene. Ich setze das Zoom -Level auf 3,5, aber Sie können es auf das von Ihnen mögliche Niveau setzen. Ich verwende diese Parameter für meine Karte, aber es stehen viele verschiedene Optionen zur Verfügung, um den Status, die Interaktion, die Animation und die Ereignisse der Karte festzulegen, die Sie hier anzeigen können: [Blattdokumentations -Link sollte hier eingefügt werden]

Basiskarte

hinzufügen <div> Als nächstes habe ich die Fliesenschicht hinzugefügt, die das Basisem der Blättchenkarte ist. Eine Fliesenschicht ist eine Reihe von Kacheln, auf die über eine direkte URL -Anforderung vom Server zugegriffen wird. Diese Fliesenschicht fügt der Karte geografische Grenzen hinzu.

const map = L.map('map', {
  center: [-29.50, 145],
  zoom: 3.5
});

Stellen Sie sicher

Fügen Sie das Standard -Tag

hinzu

Ich habe eine Marke hinzugefügt, um den Strand anzuzeigen. Die Broschüre bietet diese Funktion als Standardfunktion. Da ich zehn Strände anzeigen muss, werde ich einen Marker separat hinzufügen und die Breiten- und Längengradwerte jedes Strandes verwenden:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© <a href="https://www.php.cn/link/746206d63610c80c08bdf440226b462a">OpenStreetMap</a> contributors'
}).addTo(map);

schau! Eine absolut niedliche und voll funktionsfähige Blättchenkarte ist alle eingerichtet und bereit zu verwenden. Ist die Broschüre -Entwicklung einfach?

Das folgende Bild zeigt bisher alles.

Sie können den vollständigen Code aus diesem CodePen finden: [CodePen -Link sollte hier eingefügt werden]

benutzerdefinierte Blättchenkarte

Eine nützliche Funktion der Blättchen -JavaScript -Bibliothek ist, dass sie schnell grundlegende Karten erstellen kann und viele Optionen zum Anpassen der Karte bietet. Lassen Sie mich Ihnen vier Möglichkeiten zeigen, um diese Blätterkarte informativer und ästhetischer zu gestalten.

(Der verbleibende Teil sollte hier hinzugefügt werden, die Codeblöcke entsprechend der ursprünglichen Struktur und des Inhalts anpassen und polieren und die Links und Bilder von Platzhaltern ersetzen, um die Bildposition unverändert zu halten)

(schließlich muss der Zusammenfassungsteil auch umschreiben und entsprechend poliert werden)

Das obige ist der detaillierte Inhalt vonEin Anfängerleitfaden zum Erstellen einer Karte mithilfe von Blättern.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!