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; } } }

Commencer avec Esri-Leaflet

ReneRubalcava

<\/HEAD>

<\/P>

Si vous n'avez jamais utilisé Leaflet<\/A>, c'est une fantastique bibliothèque de cartographie légère qui a gagné en popularité au fil des années, principalement grâce à la simplicité de l'API. Elle dispose de nombreux plugins et contrôles qui peuvent être utilisés avec elle, y compris le plugin Esri-Leaflet<\/A> qui vous permet de travailler avec les services ArcGIS Server et ArcGIS Online.<\/P>

<\/P>

Il y a beaucoup de choses intéressantes dans les

exemples<\/A> pour Esri-Leaflet sur comment commencer avec, mais parfois on me demande comment un développeur pourrait l'intégrer dans son flux de développement<\/EM>. Les exemples sont excellents pour se familiariser avec le projet, mais à mesure qu'une application grandit, les choses peuvent devenir un peu compliquées. Je voulais juste vous montrer comment vous pourriez commencer de zéro avec une solution plus robuste.<\/P><\/P>

Obtenez les éléments<\/H2>Pour cette démo, vous aurez besoin de node<\/A> et npm<\/A>. Ne nous inquiétons pas de toute cette histoire d'io.js. Une fois que vous avez installé node et npm, créez un répertoire sur votre machine pour votre projet. Il n'a pas besoin d'être sur un serveur local, nous nous en occuperons avec node<\/EM>. Une fois ce répertoire créé, ouvrez un terminal dedans et exécutez la commande suivante dans votre outil de ligne de commande préféré : npm init<\/SPAN><\/P><\/P>Acceptez les valeurs par défaut pour les invites qui vous sont données. Une fois cela fait, vous aurez un fichier package.json<\/STRONG> dans votre répertoire. Maintenant, nous devons installer quelques modules pour nous aider pendant le développement, y compris Leaflet et 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>

Configuration basique<\/H2>Avec les modules dont nous aurons besoin installés, configurons quelques fichiers basiques.<\/P>Créez un fichier index.html<\/STRONG> dans votre répertoire qui ressemblera à ceci, rien de sophistiqué.<\/P><!DOCTYPE html>
<html>
    <head>
        <title>Démarrer Esri Leaflet<\/title>
        <link rel="stylesheet" href="http:\/\/cdn.leafletjs.com\/leaflet-0.7.3\/leaflet.css<\/A>" \/><\/SPAN>
        <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>
Ensuite, créez un répertoire css<\/STRONG> et faisons un simple fichier main.css<\/STRONG> dedans.<\/P>html, body, .map-div {
width : 100%;
height : 100%;
margin : 0;
}<\/PRE><\/P>Puis créez un répertoire src<\/STRONG> dans votre projet et à l'intérieur du répertoire src<\/STRONG>, créez un fichier index.js<\/STRONG> et un fichier popup.js<\/STRONG>. Nous reviendrons sur ce fichier dans une seconde.<\/P><\/P>

Automatisez-le<\/H2>Ouvrez maintenant le fichier package.json<\/STRONG> et faisons quelques modifications à la section scripts<\/EM>.<\/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>Cette section scripts vous permettra d'exécuter des commandes via npm. C'est très pratique pour configurer rapidement des environnements de développement. La section start<\/_STRONG> lancera un serveur de développement local sur localhost:8080<\/_EM>. La section watch<\/_STRONG> surveillera les modifications des fichiers spécifiés et les compilera en utilisant browserify dans un fichier unique nommé bundle.js, qui compilera tout le JavaScript requis en un seul fichier.<\\/p>
watch script dans le package.json selon les besoins et continuez à coder.<\/P><\/P>Voici l'application complète sur github<\/A>.<\/P>
<\/P>
Ceci est une configuration très simpliste, mais honnêtement vous pourriez
faire beaucoup de choses<\/A> avec les scripts npm<\/A> tels qu'ils sont actuellement conçus. Si vous souhaitez plonger avec des outils plus robustes, vous pourriez regarder des choses comme gulp<\/A>, grunt<\/A> ou webpack<\/A>. Immergez-vous et apprenez à aimer vos outils de build.<\/P>
<\/P>
Pour plus d'astuces geodev, consultez
mon blog<\/A>.<\/P><\/BODY><\/HTML>

Trouver plus de publications taguées avec

GeoDev Adventures

Réponses

There are no comments yet

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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