nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Beginnen mit Esri-Leaflet

ReneRubalcava

<\/HEAD>

<\/P>

Wenn Sie noch nie Leaflet<\/A> verwendet haben, ist es eine fantastische, leichte Mapping-Bibliothek, die im Laufe der Jahre vor allem wegen der Einfachheit der API immer beliebter geworden ist. Es gibt viele Plugins und Steuerungen, die damit verwendet werden können, einschließlich des Esri-Leaflet<\/A>-Plugins, mit dem Sie mit ArcGIS Server- und ArcGIS Online-Diensten arbeiten können.<\/P>

<\/P>

Es gibt viele großartige Dinge in den

Beispielen<\/A> für Esri-Leaflet, wie man damit anfängt, aber manchmal werde ich gefragt, wie ein Entwickler es in seinen Entwicklungsworkflow integrieren könnte<\/EM>. Beispiele sind großartig, um sich mit dem Projekt vertraut zu machen, aber wenn eine Anwendung wächst, kann es etwas komplizierter werden. Ich wollte Ihnen nur zeigen, wie Sie von Grund auf mit einer robusteren Lösung starten könnten.<\/P><\/P>

Die Komponenten besorgen<\/H2>Für diese Demo benötigen Sie node<\/A> und npm<\/A>. Machen wir uns keine Sorgen um das ganze io.js-Ding. Sobald Sie node und npm installiert haben, erstellen Sie ein Verzeichnis auf Ihrem Rechner für Ihr Projekt. Es muss nicht auf einem lokalen Server sein, das erledigen wir mit node<\/EM>. Nachdem das Verzeichnis erstellt ist, öffnen Sie ein Terminal darin und führen Sie den folgenden Befehl in Ihrem bevorzugten Kommandozeilentool aus: npm init<\/SPAN><\/P><\/P>Akzeptieren Sie die Standardwerte für die Eingabeaufforderungen. Wenn das erledigt ist, haben Sie eine package.json<\/STRONG>-Datei in Ihrem Verzeichnis. Jetzt müssen wir ein paar Module installieren, die uns während der Entwicklung helfen, darunter Leaflet und Esri-Leaflet.<\/P>npm install watchify --save-dev<\/SPAN><\/P>npm install http-server --save-dev<\/SPAN><\/SPAN><\/P>npm install leaflet --save<\/SPAN><\/SPAN><\/P>npm install esri-leaflet --save<\/SPAN><\/SPAN><\/P><\/P>

Grundlegende Einrichtung<\/H2>Nachdem die benötigten Module installiert sind, richten wir einige grundlegende Dateien ein.<\/P>Erstellen Sie eine index.html<\/STRONG>-Datei in Ihrem Verzeichnis, die so aussehen wird, nichts Besonderes.<\/P><!DOCTYPE html>
<html>
    <head>
        <title>Starting Esri Leaflet<\/title>
        <link rel="stylesheet" href=\"http:\/\/cdn.leafletjs.com\/leaflet-0.7.3\/leaflet.css\" \/>
        <link rel="stylesheet" href=\"css\/main.css\" \/>
        <meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\" \/>
        <meta name=\"viewport\" content=\"initial-scale=1.0 maximum-scale=1.0\">
    <\/head>
    <body>
        <script src=\"bundle.js\"><\/script>
    <\/body>
<\/html><\/PRE><\/P>Erstellen Sie als Nächstes ein css<\/STRONG>-Verzeichnis und legen Sie dort eine einfache main.css<\/STRONG>-Datei an.<\/P>html, body, .map-div {
width : 100%;
height : 100%;
margin : 0;
}<\/PRE><\/P>Erstellen Sie dann ein src<\/STRONG>-Verzeichnis in Ihrem Projekt und darin eine index.js<\/STRONG>-Datei sowie eine popup.js<\/STRONG>-Datei. Wir kommen gleich auf diese Datei zurück.<\/P><\/P>Automatisieren Sie es<\/H2>Öffnen Sie nun die package.json<\/STRONG>-Datei und nehmen wir einige Änderungen im Abschnitt scripts<\/EM> vor.<\/P>"scripts": {
"start": "http-server",
"watch": "watchify src\/_index.js src\/_popup.js -o bundle.js -dv",
"start-dev": "npm start | npm run watch"
}<\/PRE><\/P>Dieser Scripts-Abschnitt ermöglicht es Ihnen, Befehle mit npm auszuführen. Das ist sehr praktisch für das schnelle Einrichten von Entwicklungsumgebungen. Der Abschnitt start<\/_strong> startet einen lokalen Entwicklungsserver auf localhost:8080<\/_em>. Der Abschnitt watch<\/_strong> überwacht Änderungen an den angegebenen Dateien und gibt sie mit Hilfe von watch-Skript in der package.json nach Bedarf anpassen und weiter programmieren.<\/P><\/P>Hier ist die vollständige Anwendung auf github<\/A>.<\/P>
<\/P>
Dies ist eine sehr einfache Einrichtung, aber ehrlich gesagt könnte man
viel machen<\/A> mit den npm scripts<\/A>, so wie sie derzeit gestaltet sind. Wenn Sie mit robusteren Tools tiefer einsteigen möchten, könnten Sie sich Dinge wie gulp<\/A>, grunt<\/A> oder webpack<\/A> ansehen. Tauchen Sie tief ein und lernen Sie, Ihre Build-Tools zu lieben.<\/P>
<\/P>
Für weitere geodev Tipps und Tricks besuchen Sie
meinen Blog<\/A>.<\/P><\/BODY><\/HTML>

Finde mehr Beiträge mit dem Tag

GeoDev Adventures

Kommentare

There are no comments yet

Nehmen Sie an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registrieren Sie ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.