{"id":4253,"date":"2017-07-21T12:17:16","date_gmt":"2017-07-21T10:17:16","guid":{"rendered":"http:\/\/www.sigterritoires.fr\/?p=4253"},"modified":"2017-07-21T13:07:44","modified_gmt":"2017-07-21T11:07:44","slug":"comment-exporter-votre-projet-qgis-en-page-html-en-deux-clics-le-plugin-qgis2web","status":"publish","type":"post","link":"https:\/\/www.sigterritoires.fr\/index.php\/comment-exporter-votre-projet-qgis-en-page-html-en-deux-clics-le-plugin-qgis2web\/","title":{"rendered":"Comment exporter votre projet QGis en page html en deux clics : le plugin Qgis2Web"},"content":{"rendered":"

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

Le plugin QSGis2Web fournit un moyen facile de distribuer et de visualiser votre travail QGIS sous forme de carte Web utilisant, sans que vous ayez \u00e0 les conna\u00eetre, OpenLayers ou LeafLet<\/a>.<\/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, ainsi que les donn\u00e9es utilis\u00e9es.
\nUn projet QGIS classique contient des donn\u00e9es diff\u00e9rentes: vecteur et\u00a0 raster. QGIS2WEBf exporte les couches vecteur en format GeoJSON, cr\u00e9e la base de la carte web en utilisant la version actuelle de Leaflet ou d’OpenLayers(au choix). 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 QGis2Web<\/strong> \u00e0 partir du gestionnaire de plugins (Extensions -> G\u00e9rer\/Installer des extensions<\/strong><\/em>).<\/p>\n

$\"\"$ <\/a>Le plugin est accessible \u00e0 partir du menu Internet -> QGis2web<\/strong><\/em><\/p>\n

$\"\"$ <\/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, vous pouvez d\u00e9sactiver l’option de chargement automatique des donn\u00e9es dans votre projet QGis, ou d\u00e9cocher l’affichage de la couche. 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. Si votre couche a plus de 1000 enregistrements, elle ne sera pas affich\u00e9e dans la fen\u00eatre d’aper\u00e7u, mais elle sera incluse dans les donn\u00e9es export\u00e9es.<\/p>\n
L’interface du plugin qgis2web<\/h2>\n
$\"interface$ <\/a>Vous trouverez 4 panneaux, 3 onglets et une barre de boutons.<\/p>\n
Commen\u00e7ons par cette derni\u00e8re.<\/p>\n
La barre d’outils<\/h4>\n
$\"barre$ <\/a>Vous avez deux options pour la biblioth\u00e8que de code \u00e0 utiliser par le plugin pour g\u00e9n\u00e9rer la page HTML. Si vous comptez utiliser le plugin pour cr\u00e9er une carte de base et que vous comptez l’enrichir ou modifier ult\u00e9rieurement, vous choisirez \u00e9videment l’option qui vous correspond. Si non, cela v d\u00e9pendre des caract\u00e9ristiques de votre projet. En effet, le plugin essaye de reproduire au mieux votre projet (symbologie, \u00e9tiquettes, transparence,…). Mais vous verrez \u00e0 l’usage que tout ne peut pas \u00eatre reproduit. Leaflet et OpenLayers<\/strong><\/em> n’ayant pas les m\u00eames possibilit\u00e9s, selon les cas votre projet sera mieux reproduit par l’un ou par l’autre.<\/p>\n
Si vous changez d’option dans l’interface, l’affichage de la fen\u00eatre d’aper\u00e7u est mis \u00e0 jour automatiquement, et vous verrez le rendu avec la nouvelle biblioth\u00e8que de code. Par contre, pour toutes les autres modifications apport\u00e9es dans les autres panneaux, la mise \u00e0 jour de l’aper\u00e7u ne se fera que si vous cliquez sur le bouton Update preview<\/strong><\/em>.<\/p>\n
Le bouton Export<\/strong><\/em> g\u00e9n\u00e8re la page html et exporte les donn\u00e9es en Json.<\/p>\n
La fen\u00eatre d’aper\u00e7u.<\/h4>\n $\"fen\u00eatre$ <\/a>Vous pouvez voir un aper\u00e7u du rendu final dans cette fen\u00eatre. N’oubliez pas de cliquer sur le bouton Update preview pour voir les modifications apport\u00e9es au param\u00e8tres du plugin. Tous les \u00e9l\u00e9ments ne seront pas forc\u00e9ment \u00e0 l’\u00e9chelle finale. Comme vous pouvez le voir dans l’image pr\u00e9c\u00e9dente, la barre de l\u00e9gende a la taille d\u00e9finitive, mais pas la carte en elle-m\u00eame.<\/p>\n
Cette fen\u00eatre n’est pas simplement une image, elle r\u00e9agit comme le fera la page finale (clics, surbrillances, etc…)<\/p>\n
Le panneau layers et groupes.<\/h4>\n
$\"panneau$ <\/a>Ce panneau permet de configurer deux choses:<\/p>\n
\n
le fait que la couche soit affich\u00e9e part d\u00e9faut ou pas: si vous cochez la case Visible, la couche sera affich\u00e9e d\u00e8s le chargement de la page HTML. Si la case n’est pas coch\u00e9e, votre couche appara\u00eetra dans la barre de l\u00e9gende et il faudra cocher sa case dans la page HTML pour qu’elle soit affich\u00e9e.<\/li>\n
le rendu des fen\u00eatres popup avec les attributs des entit\u00e9s: cette option ne sera appliqu\u00e9e que dans le cas o\u00f9 vous cocherez l’option Show popups on hover<\/strong> <\/em>dans le panneau de r\u00e9glages g\u00e9n\u00e9raux du plugin.<\/li>\n<\/ul>\n
La gestion des groupes ne fonctionne pas toujours. Si vous avez group\u00e9 des couches et que vous ne les voyez pas dans ce panneau, d\u00e9groupez les couches dans votre projet.<\/p>\n
Les trois options propos\u00e9es pour la mise en forme des infobulles donnent les r\u00e9sultats suivants:<\/p>\n
$\"mise$ <\/a>Le panneau de r\u00e9glages g\u00e9n\u00e9raux<\/h4>\n
$\"panneau$ <\/a>R\u00e9glages de l’exportation des donn\u00e9es<\/h5>\n
Vous pouvez exporter le r\u00e9sultat, soit dans un r\u00e9pertoire de votre machine, soit sur un site ftp de votre serveur. Selon le cas, cliquez sur le bouton … pour d\u00e9finir , soit le r\u00e9pertoire, soit les param\u00e8tres de connexion.<\/p>\n
La Mapping library location vous permet de charger la biblioth\u00e8que OpenLayers ou Leaflet dans le r\u00e9pertoire qui sera cr\u00e9\u00e9, ou bien de mettre une ligne d’appel de ces biblioth\u00e8ques en ligne. La premi\u00e8re option est plus volumineuse mais plus s\u00fbre quant \u00e0 son fonctionnement.<\/p>\n
L’option Minify GeoJson files<\/strong><\/em> \u00e9limine les espaces inutiles des fichiers GeoJson. Si vos donn\u00e9es sont volumineuses, c’est un moyen de r\u00e9duire leur taille.<\/p>\n
L’autre moyen de r\u00e9duire la taille des donn\u00e9es est de jouer sur le niveau de d\u00e9tail des g\u00e9om\u00e9tries. L’option Precision<\/strong> <\/em>permet de g\u00e9n\u00e9raliser les g\u00e9om\u00e9tries de type ligne et polygone. L’option maintain<\/strong> <\/em>ne change pas les g\u00e9om\u00e9tries. Les valeurs de 1 \u00e0 15 d\u00e9terminent le degr\u00e9 de g\u00e9n\u00e9ralisation apport\u00e9 aux g\u00e9om\u00e9trises, avant leur export. La valeur 1 correspond \u00e0 la plus forte g\u00e9n\u00e9ralisation, la valeur 15 \u00e0 la plus l\u00e9g\u00e8re.<\/p>\n
R\u00e9glages de l’\u00e9chelle et du zoom.<\/h5>\n
Extent<\/strong> <\/em>vous permet de d\u00e9finir l’\u00e9tendue de la carte au moment de son affichage. Canevas extent<\/strong><\/em> prend l’\u00e9tendue de la vue actuelle de votre projet QGis. Fit to layers extent<\/strong><\/em> affichera l’\u00e9tendue de la carte correspondant \u00e0 l’\u00e9tendue de la couche la plus grande. Ceci est calcul\u00e9 seulement sur les couches locales, qu’elles soient vecteur ou raster, pas sur les couches \u00e9ventuelle issues de connexions WFS ou WMS.<\/p>\n
Max et min zoom level<\/strong> <\/em>permettent de d\u00e9finir la fourchette de zoom autoris\u00e9e pour la carte.<\/p>\n
Restrict to extent<\/strong><\/em>, si coch\u00e9e, emp\u00eache de sortir du cadre d\u00e9fini de la carte.<\/p>\n
R\u00e9glages de l’apparence<\/h5>\n
\n
Add address search<\/strong><\/em> ajoute un champ qui permet de rentrer une adresse et de positionner la carte sur celle-ci, en utilisant le geocodage d’adresses.<\/li>\n
Add layers list<\/strong><\/em> ajoute la barre de l\u00e9gende des couches.<\/li>\n
Geolocate<\/strong> <\/em>user place un bouton qui permet, en cliquant dessus, de centrer la carte sur la position de l’utilisateur. Attention, avec Chrome cette option ne marche que si votre carte est h\u00e9berg\u00e9e en HTTPS.<\/li>\n
Highlight on hover<\/strong> <\/em>met les entit\u00e9s en surbrillance quand la souris passe dessus.<\/li>\n
Layer search<\/strong><\/em> permet de configurer un champ de recherche sur un attribut d’une des couches. Une fois entr\u00e9 une valeur dans ce champ, si la valeur est retrouv\u00e9e dans la table attributaire, la carte est centr\u00e9e sur l’entit\u00e9<\/li>\n
Match project CRS<\/strong><\/em> d\u00e9fini le syst\u00e8me de coordonn\u00e9es de la carte en sortie. Si la case est coch\u00e9e, le syst\u00e8me utilis\u00e9 par la carte sera le m\u00eame que celui du projet QGis. Par d\u00e9faut, si la case n’est pas coch\u00e9e, c’est le syst\u00e8me sph\u00e9rique Mercator (EPSG:3857<\/a>) qui sera appliqu\u00e9.<\/li>\n
Add measure tool<\/strong> <\/em>ajoute un outil de mesure sur la carte r\u00e9sultante.<\/li>\n
Show popups on hover,<\/strong><\/em> si coch\u00e9e, affiche une infobulle avec les attributs<\/li>\n
Template<\/strong><\/em> permet de choisir le mod\u00e8le de carte en sortie. L’option full-screen cr\u00e9era une carte qui aura la taille de l’\u00e9cran de l’utilisateur, canevas-size cr\u00e9era une carte de la m\u00eame taile que votre fen\u00eatre cartographique dans votre projet QGis. Vous pouvez ajouter d’autres mod\u00e8les dans le r\u00e9pertoire user\/nom\/.qgis2\/qgis2web\/templates.<\/li>\n<\/ul>\n
Le panneau de r\u00e9glage du fond de carte<\/h4>\n
$\"choix$ <\/a>Ce panneau vous permet de d\u00e9finir un ou plusieurs fonds de carte. Vous pouvez faire une s\u00e9lection multiple en appuyant sur la touche CTRL et en cliquant sur un \u00e9l\u00e9ment de la liste. Le r\u00e9sultat sur la carte produite sera un bloc dans la l\u00e9gende permettant d’activer le fond de carte souhait\u00e9.<\/p>\n
$\"d\u00e9finition$ <\/a>Pr\u00e9paration du projet QGis.<\/h2>\n
Une partie du rendu de la carte finale doit \u00eatre pr\u00e9par\u00e9 directement dans votre projet QGis.<\/p>\n
Dans l’onglet Projet->Propri\u00e9t\u00e9s du projet->G\u00e9n\u00e9ral<\/strong> vous avez trois propri\u00e9t\u00e9s de la carte \u00e0 configurer: le titre du projet, la couleur de surlignage et la couleur de fond.<\/p>\n
$\"propri\u00e9t\u00e9s$ <\/a>Le titre n’appara\u00eetra que si vous s\u00e9lectionnez Leaflet comme biblioth\u00e8que<\/p>\n
$\"titre$ <\/a>Dans Propri\u00e9t\u00e9s de la couche-> G\u00e9n\u00e9ral<\/strong> vous pouvez modifier le texte du nom de la couche, celui qui appara\u00eetra dans la barre de l\u00e9gende de votre carte, pour le rendre plus compr\u00e9hensible, ainsi que d\u00e9finir les \u00e9chelles entre lesquelles la couche sera affich\u00e9e.<\/p>\n
$\"options$ <\/a>Dans propri\u00e9t\u00e9s de la couche->Style<\/strong> vous pouvez d\u00e9finir le style de votre couche parmi symbole unique, cat\u00e9goris\u00e9 et gradu\u00e9. D’apr\u00e8s les concepteurs du plugin le style 2.5D devrait aussi fonctionner, mais moi je n’ai pas r\u00e9ussi…A suivre.<\/p>\n
Dans propri\u00e9t\u00e9s de la couche->champs<\/strong> vous pouvez d\u00e9finir le nom qui sera affich\u00e9 pour chaque champ, en remplissant la colonne Alias.<\/p>\n
$\"mise$ <\/a>Le champ Outil d’Edition<\/em> contr\u00f4le ce qui va appara\u00eetre dans les infobulles si vous s\u00e9lectionnez le r\u00e9glage Show popups on hover<\/strong><\/em>. Si vous cliquez sur la valeur d’une case de l’Outil d’Edition<\/em> vous aurez la fen\u00eatre suivante:<\/p>\n
$\"mise$ <\/a>Vous pouvez choisir parmi trois options (les autres n’ont aucun effet sur la carte g\u00e9n\u00e9r\u00e9e):<\/p>\n
\n
Cach\u00e9e: le champ n’appara\u00eetra pas dans l’infobulle<\/li>\n
Edition de texte: l’option par d\u00e9faut, affiche la valeur du champ attributaire dans l’infobulle<\/li>\n
Photo: si votre champ contient un lien vers une image, l’image sera incluse dans l’infobulle.<\/li>\n<\/ul>\n
Un exemple de la derni\u00e8re option est montr\u00e9 ici:<\/p>\n
$\"inclusion$ <\/a>Pour finir, l\u2019\u00e9tiquetage de votre projet QGis sera export\u00e9 sur la carte r\u00e9sultante, avec quelques limitations:<\/p>\n
\n
Les expressions pour les \u00e9tiquettes ne sont pas support\u00e9es,<\/li>\n
les buffers autour des \u00e9tiquettes ne sont export\u00e9s qu’avec OpenLayers 3,<\/li>\n
Les fonds et les bordures ne sont export\u00e9s qu’avec Leaflet<\/li>\n
L’export indique la police de caract\u00e8res utilis\u00e9e, mais ne les inclue pas dans le r\u00e9pertoire export\u00e9. Si l’utilisateur n’a pas la police utilis\u00e9e, l’\u00e9tiquette n’appara\u00eetra pas.<\/li>\n<\/ul>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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. Le plugin QSGis2Web fournit un moyen…<\/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":[152,62],"tags":[418,419,412,413,279,58,410],"class_list":["post-4253","post","type-post","status-publish","format-standard","hentry","category-outils_divers","category-qgis-2","tag-carte-interactive","tag-html","tag-leaflet","tag-openlayers","tag-plugin","tag-qgis","tag-qgis2web"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-16B","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/4253","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=4253"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/4253\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=4253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=4253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=4253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}