{"id":2873,"date":"2015-12-08T09:41:59","date_gmt":"2015-12-08T08:41:59","guid":{"rendered":"http:\/\/www.sigterritoires.fr\/?p=2873"},"modified":"2016-05-04T11:52:56","modified_gmt":"2016-05-04T10:52:56","slug":"comment-exporter-votre-projet-qgis-en-page-html-en-deux-clics-qgis2leaf","status":"publish","type":"post","link":"https:\/\/www.sigterritoires.fr\/index.php\/comment-exporter-votre-projet-qgis-en-page-html-en-deux-clics-qgis2leaf\/","title":{"rendered":"Comment exporter votre projet QGis en page html en deux clics : Qgis2Leaf"},"content":{"rendered":"

[nota: QGis2Leaf a \u00e9t\u00e9 int\u00e9gr\u00e9 dans les nouvelles versions de QGis dans le plugin Qgis2web]<\/p>\n

Comment communiquer votre travail sous QGis \u00e0 des partenaires qui n’ont pas d’outils SIG? Sous forme de page html consultable avec n’importe quel navigateur Internet, c’est l’option la plus pertinente.<\/p>\n

Le plugin QSGis2Leaf fournit un moyen facile de distribuer et de visualiser votre travail\u00a0 QGIS sous forme de carte Web utilisant LeafLet<\/a>.<\/p>\n

Leaflet est une biblioth\u00e8que logicielle libre en JavaScript de cartographie<\/a> interactive. Elle est notamment utilis\u00e9e par le projet de cartographie libre\u00a0 OpenStreetMap.<\/p>\n

Avec ce plugin, en quelques clics vous exportez votre projet QGis sous forme de page html. Vous cr\u00e9ez un r\u00e9pertoire contenant la page index.html et des sous-r\u00e9pertoires avec tous ce qui est n\u00e9cessaire pour visualiser votre carte.
\nUn projet QGIS classique contient des donn\u00e9es diff\u00e9rentes: vecteur, raster et plugins. QGIS2leaf exporte les couches vecteur en format GeoJSON\u00a0 cr\u00e9e la base de la carte web en utilisant la version actuelle de Leaflet(0.7.3). En plus, le plugin ajoute les donn\u00e9es raster sous forme de superposition d’images avec un curseur d’opacit\u00e9.<\/p>\n

Installez le plugin QGis2Leaf<\/strong> \u00e0 partir du gestionnaire de plugins (Extensions -> G\u00e9rer\/Installer des extensions<\/strong><\/em>).<\/p>\n

$\"installation$ <\/a><\/p>\n

Le plugin est accessible \u00e0 partir du menu Internet -> QGis2leaf<\/strong><\/em><\/p>\n

$\"acces$ <\/a><\/p>\n

G\u00e9n\u00e9ralit\u00e9s<\/h2>\n
Vous pouvez choisir entre plusieurs couches de fond de carte et d\u00e9finir l’\u00e9tendue initiale de la carte, ainsi que les dimensions de la carte dans votre document HTML. Pour faciliter l’export de couches volumineuses, d\u00e9sactivez l’option de chargement automatique des donn\u00e9es dans votre projet QGis. La carte web g\u00e9n\u00e9r\u00e9e ayant un contr\u00f4le d’affichage des couches, vous pourrez les activer une fois termin\u00e9 la cr\u00e9ation de la carte.<\/p>\n
Il y a deux mani\u00e8res de faire avec le plugin:<\/p>\n
\n
utiliser les options par d\u00e9faut propos\u00e9es par le plugin<\/li>\n
ou bien ajouter des possibilit\u00e9s en cr\u00e9ant des colonnes attributaires dans les tables des couches<\/li>\n<\/ul>\n
Nous allons prendre un exemple simple et utiliser les options par d\u00e9faut du plugin, puis, dans un deuxi\u00e8me temps, nous allons ajouter des \u00e9l\u00e9ments avec des champs attributaires.<\/p>\n
Prenons un exemple simple.<\/p>\n
$\"exemple$ <\/a>Le projet a deux couches:<\/p>\n
\n
une couche vecteur avec les lieux-dits<\/li>\n
une couche raster avec la carte de 1940<\/li>\n<\/ul>\n
Param\u00e9trage du plugin<\/h2>\n
Nous allons cr\u00e9er notre carte web. Pour cela ouvrez la fen\u00eatre de configuration du plugin.<\/p>\n
Cliquez sur Get Layers<\/strong><\/em> pour charger les couches de votre projet dans la fen\u00eatre de param\u00e9trage.<\/p>\n
$\"param\u00e9trage$ <\/a>Pour notre premier exemple, nous allons faire le plus simple possible.<\/p>\n
$\"premier$ <\/a><\/p>\n
La seule chose que nous allons utiliser est l’option \u00ab\u00a0Create Opacity control<\/strong><\/em>\u00ab\u00a0. Comme nous avons une couche raster dans notre projet, nous avons deux possibilit\u00e9s:<\/p>\n
\n
faire que la couche raster soit le fond de carte fixe. pour cela on ne coche pas l’option pr\u00e9-cit\u00e9e.<\/li>\n
d\u00e9finir un fond de carte \u00e0 partir de la liste propos\u00e9e dans Basemaps et ajouter un contr\u00f4le de transparence pour notre couche raster. En augmentant la transparence nous pourrons voir le Basemap<\/a> \u00e0 travers.<\/li>\n<\/ul>\n
Nous cochons donc l’option \u00ab\u00a0Create Opacity control<\/strong><\/em>\u00a0\u00bb et nous s\u00e9lectionnons, par exemple, OSM Standard comme Basemap.<\/p>\n
Nous ajoutons un titre et un sous-titre et nous cliquons sur OK.<\/p>\n
$\"r\u00e9sultat$ <\/a><\/p>\n
Vous pouvez voir la page html cr\u00e9\u00e9e en cliquant ici<\/a>. Vous pouvez voir l’utilisation du curseur d’opacit\u00e9 ainsi que l’affichage des attributs des points quand vous cliquez dessus. Le popup pour les entit\u00e9s est une simple table avec tous vos attributs.<\/p>\n
Vous remarquerez que la symbologie des points n’est pas export\u00e9e. Les symboles sont remplac\u00e9s par des points standard.<\/p>\n
Nous allons donc voir les possibilit\u00e9s suppl\u00e9mentaires avec les champs attributaires.<\/p>\n
Personnaliser les symboles<\/h2>\n
Pour les objets de type point( symboles simples, class\u00e9es et gradu\u00e9es) le plugin exporte la taille (le rayon du symbole), la couleur et l’opacit\u00e9. Malheureusement l’exportation de formes et symboles SVG n’est pas impl\u00e9ment\u00e9 pour le moment.<\/p>\n
Si vous souhaitez utiliser un symbole d\u00e9fini dans votre webmap, ajoutez un attribut ‘icon_exp’<\/strong><\/em> \u00e0 votre table attributaire. Le contenu de cette colonne sera\u00a0 un chemin relatif sur votre PC ou une d\u00e9claration HTML. Vous pouvez d\u00e9finir des ic\u00f4nes diff\u00e9rentes pour chaque entit\u00e9.<\/p>\n
Si vous souhaitez communiquer votre page web \u00e0 d’autres personnes, optez par des symboles accessibles par le web.<\/p>\n
Pour affecter un symbole aux entit\u00e9s:<\/p>\n
\n
ajoutez un champ nomm\u00e9 icon_exp<\/strong><\/em> \u00e0 la table attributaire, de type texte et suffisamment long pour contenir l’adresse du symbole<\/li>\n
remplissez ce champ avec l’adresse \u00e0 utiliser. \u00c9tant donn\u00e9 que chaque entit\u00e9 poss\u00e8de une occurrence de ce champ, chaque entit\u00e9 peut avoir un symbole diff\u00e9rent.<\/li>\n<\/ul>\n
$\"lf7\"$ <\/a>Ce qui donne sur la table:<\/p>\n
$\"table$ <\/a>Du moment o\u00f9 le champ icon_exp<\/strong><\/em> existe, le plugin l’utilise pour la symbologie de la couche. Il n’est pas n\u00e9cessaire d’activer de nouvelles options dans la fen\u00eatre de param\u00e9trage de l’export.<\/p>\n
Ajouter des \u00e9tiquettes<\/h2>\n
Nous allons maintenant ajouter les \u00e9tiquettes des noms de lieux dans notre page en sortie.<\/p>\n
Pour cela, vous ajouterez un champ\u00a0 ‘label_exp’<\/strong><\/em> \u00e0 votre couche qui va d\u00e9finir le texte \u00e0 afficher dans l’\u00e9tiquette.<\/p>\n
$\"ajout$ <\/a>Lors de la cr\u00e9ation du champ nous pouvons, comme dans l’exemple, remplir le champ avec le contenu d’un champ existant.<\/p>\n
Si vous voulez que les \u00e9tiquettes s’affichent pour toutes les entit\u00e9s sans action de la part de l’utilisateur, cochez l’option Extract labels<\/strong><\/em> dans la fen\u00eatre du plugin.<\/p>\n
Si vous voulez que l’\u00e9tiquette de l’entit\u00e9 s’affiche quand la souris passe sur l’entit\u00e9, cochez l’option Labels on hover<\/strong><\/em>. Les \u00e9tiquettes ne seront pas toutes affich\u00e9es par d\u00e9faut.<\/p>\n
$\"export$ <\/a>Voici le r\u00e9sultat, en ajoutant l’option de recherche d’une adresse.<\/p>\n
$\"deuxi\u00e8me$ <\/a>et le lien pour acc\u00e9der \u00e0 la page html g\u00e9n\u00e9r\u00e9e<\/a>.<\/p>\n
Autres options<\/h2>\n
Vous pouvez remplacer la fen\u00eatre popup des attributs des entit\u00e9s par une fen\u00eatre html. Chaque entit\u00e9 peut alors avoir un popup diff\u00e9rent. La d\u00e9finition de cette fen\u00eatre se fait obligatoirement dans un champ nomm\u00e9 html_exp<\/strong><\/em>. Si ce champ existe, la fen\u00eatre par d\u00e9faut (table brute) est ignor\u00e9e et ne s’affiche pour aucune entit\u00e9.<\/p>\n
Si vous voulez cr\u00e9er une l\u00e9gende avec diff\u00e9rentes cat\u00e9gories, vous devez ajouter un champ legend_ico<\/strong><\/em> pour d\u00e9finir le symbole de la cat\u00e9gorie et un champ\u00a0 legend_exp<\/strong><\/em> pour contenir le texte associ\u00e9 \u00e0 la cat\u00e9gorie.<\/p>\n
Pour terminer, il y a une option \u00ab\u00a0Encode to json<\/strong><\/em>\u00ab\u00a0. Pour vos donn\u00e9es, il est inutile de cocher cette case, car toutes vos donn\u00e9es seront cod\u00e9s au format json. Cette option se r\u00e9f\u00e8re aux connexions WFS \u00e9ventuelles de votre projet. Si vous avez des connexions WFS il y a deux possibilit\u00e9s:<\/p>\n
\n
si la case n’est pas coch\u00e9e, la page aura sa connexion WFS et devra obtenir les donn\u00e9es \u00e0 partir du fournisseur WFS<\/li>\n
si la case est coch\u00e9e, les donn\u00e9es seront t\u00e9l\u00e9charg\u00e9es avant la cr\u00e9ation de la page html, et encod\u00e9s au format json dans les fichiers de votre page. L’utilisateur qui affichera la page aura les donn\u00e9es disponibles en local sans besoin de connexion WFS sur le fournisseur.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
[nota: QGis2Leaf a \u00e9t\u00e9 int\u00e9gr\u00e9 dans les nouvelles versions de QGis dans le plugin Qgis2web] Comment communiquer votre travail sous QGis \u00e0 des partenaires qui n’ont pas d’outils SIG? Sous forme de page html consultable avec…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sfsi_plus_gutenberg_text_before_share":"","sfsi_plus_gutenberg_show_text_before_share":"","sfsi_plus_gutenberg_icon_type":"","sfsi_plus_gutenberg_icon_alignemt":"","sfsi_plus_gutenburg_max_per_row":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2873","post","type-post","status-publish","format-standard","hentry","category-non-classe"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-Kl","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/2873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/comments?post=2873"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/2873\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=2873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=2873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=2873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Param\u00e9trage du plugin<\/h2>\nNous allons cr\u00e9er notre carte web. Pour cela ouvrez la fen\u00eatre de configuration du plugin.<\/p>\nCliquez sur Get Layers<\/strong><\/em> pour charger les couches de votre projet dans la fen\u00eatre de param\u00e9trage.<\/p>\n