Outil de dessin (mviewer#914)

* Init mviewer draw tool New js file 'draw.js', New xml file 'draw.xml', add some change on different file like 'mviewer.js', 'index.html' and 'mviewer.css' Mise à jour de l'outil (Fenêtre, repère et polygone unique, suppression mode dessin...) Modification du style de la fenêtre create and style median point * Correction of the style of each feature * Add a new value to the drawing window * Ajout de l'export au format GeoJSON * Change tooltip management set possible geometry type in configuration for lineString add snapping beetween first and last point to create a polygon if wanted set the possibility to draw one feature by one feature or serveral at the same time * snap with bbox strategy, pretty, fix info * Fix customlayer example * use snappingLayerUrl and snappingLimitZoom * Tools and Draw tool doc * correction after test * change snap level * revert modification on export * change tooltip position * update mviewer after meeting I18n for message and button Add tolerance for snapping Add help message in panel Add delete on right click when drawing * Prettier * draw : line, stroke colors params * draw : line, stroke colors params * Change HTML string array to templateString * Fix tooltip and input string sync on feature selct * Fix : deleting commas after each div button of buttonOptions * Fix syntaxe * Fix modify on reactivate tool * Lint file * Update window style of drawtool * doc snapTolerance param --------- Co-authored-by: raphael-dsc <[email protected]> Co-authored-by: Pierre Jégo <[email protected]> Co-authored-by: Agath21 <[email protected]>
jdev-org · Oct 11, 2024 · 6074d47 · 6074d47
1 parent 0489c35
commit 6074d47
Show file tree

Hide file tree

Showing 11 changed files with 1,416 additions and 389 deletions.
diff --git a/css/mviewer.css b/css/mviewer.css
@@ -811,6 +811,13 @@ ul#layers-container {
   top: 160px;
 }
 
+#drawoptions {
+  position: fixed;
+  right: 70px;
+  float: right;
+  top: 270px;
+}
+
 .layerdisplay-title span {
   padding-right: 5px;
 }
@@ -2033,6 +2040,69 @@ div#login-box {
   border: none;
 }
 
+/***********************************
+------------- WINDOW INFO DRAW TOOLS
+***********************************/
+
+#drawingPanelInfo {
+	max-width: 280px;
+	min-width: 230px;
+	padding: 1em;
+	border-radius: .5em;
+	position: fixed;
+	top: 65px;
+	right: 55px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	background-color: #fff;
+	box-shadow: 2px 2px 10px rgb(0 0 0 / 37%);
+}
+
+.drawingPanel__header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: nowrap;
+	flex-direction: row;
+}
+
+.drawingPanel__body {
+	margin: .5em 0;
+}
+
+#drawingPanelInfoLabel {
+	padding: 3px 5px;
+}
+
+#drawingPanelHelp:not(:empty) {
+	margin: .5em 0;
+	font-size: .95em;
+	line-height: 1.2;
+	background-color: #8080801f;
+	color: #868686;
+	padding: .5em .5em .5em 2.4em;
+	border-radius: .3em;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='rgba(134,134,134,1)'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z'%3E%3C/path%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: center left 5px;
+}
+
+.drawTooltip {
+	background-color: #fff;
+	border: 1px solid;
+	border-color: #393939;
+	padding: 5px 10px;
+	border-radius: 4px;
+	font-size: 12px;
+	color: black;
+	box-shadow: 2px 2px 10px rgb(0 0 0 / 37%);
+	white-space: nowrap;
+}
+
+input.drawTooltip {
+	width: 80%;
+}
 
 .datepicker table tbody tr td.disabled {
   color: rgba(119,119,119,0.2);

diff --git a/demo/draw/customlayers/parcelles.js b/demo/draw/customlayers/parcelles.js
@@ -0,0 +1,24 @@
+{
+  mviewer.customLayers.parcelles = {};
+  mviewer.customLayers.parcelles.layer = new ol.layer.Vector({
+    source: new ol.source.Vector({
+      url: (extent) => {
+        const baseUrl =
+          "https://www.geo2france.fr/geoserver/pci/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=pci%3Ageo_parcelle_2023&outputFormat=application%2Fjson";
+        return `${baseUrl}&bbox=${extent}`;
+      },
+      format: new ol.format.GeoJSON(),
+      strategy: ol.loadingstrategy.bbox,
+    }),
+    style: new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: "rgba(46,83,103,0.6)",
+        width: 1,
+      }),
+      fill: new ol.style.Fill({
+        color: "rgba(0, 0, 0, 0)",
+      }),
+    }),
+  });
+  mviewer.customLayers.parcelles.handle = false;
+}
diff --git a/demo/draw/draw.xml b/demo/draw/draw.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<config>
+    <application lang="fr" title="Mviewer" mouseposition="false" logo="" help="mviewer_help.html" drawtools="true" measuretools="true" mapprint="true" exportpng="true" style="css/themes/wet_asphalt.css" togglealllayersfromtheme="true"/>
+    <tools>
+		<draw geometryTypes="Polygon" help="true" pointFill="rgba(255, 255, 255, 0.4)" pointStroke="#131c94" lineStroke="#6342f5" snapLimitZoom="17" snapTolerance="10" snapLayerUrl="https://www.geo2france.fr/geoserver/pci/ows?service=WFS&amp;version=1.0.0&amp;request=GetFeature&amp;typeName=pci%3Ageo_parcelle_2023&amp;outputFormat=application%2Fjson"/>
+	</tools>
+	<mapoptions maxzoom="19" projection="EPSG:3857" center="255919,6427622" zoom="16" projextent="-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244" />
+
+    <baselayers style="gallery">
+        <baselayer  type="WMTS" id="ortho" label="Photo aérienne IGN" title="GéoPortail" maxscale="1000" thumbgallery="img/basemap/ortho.jpg"
+            url="https://data.geopf.fr/wmts" layers="ORTHOIMAGERY.ORTHOPHOTOS" format="image/jpeg" visible="false" fromcapacity="false"
+            attribution="&lt;a href='https://geoservices.ign.fr/services-geoplateforme-diffusion' target='_blank'>&lt;img src='img/basemap/geoservices.png'>&lt;/a>" style="normal" matrixset="PM" maxzoom="22"/>
+        <baselayer  type="WMS" id="osm" label="OpenStreetMap" title="Plan OSM Géobretagne" thumbgallery="img/basemap/osm.png"
+            url="https://tile.geobretagne.fr/osm/service" layers="osm:grey" format="image/png" visible="true"
+            attribution="GéoBretagne. Données : les contributeurs d'&lt;a href='https://www.openstreetmap.org/' target='_blank'>OpenStreetMap &lt;/a>,  &lt;a href='https://www.openstreetmap.org/copyright' target='_blank'>ODbL &lt;/a>" />
+		<baselayer  type="WMS" id="cadastre" label="Cadastre" title="Plan cadastrapp" thumbgallery="img/basemap/osm.png"
+            url="https://www.geo2france.fr/geoserver/pci/ows" layers="pci:cadastre" format="image/png" visible="true"
+            attribution="GéoBretagne. Données : les contributeurs d'&lt;a href='https://www.openstreetmap.org/' target='_blank'>OpenStreetMap &lt;/a>,  &lt;a href='https://www.openstreetmap.org/copyright' target='_blank'>ODbL &lt;/a>" />
+
+	</baselayers>     
+    <proxy url=""/>
+    <!-- <olscompletion url="https://api-adresse.data.gouv.fr/search/" type="ban" attribution="La recherche d'adresse est un service proposé par la BAN"/> -->
+    <olscompletion url="https://data.geopf.fr/geocodage/completion" type="ign" attribution="IGN"/>
+
+    <searchparameters bbox="false" localities="true" features="false" />   
+
+    <themes> 
+        <theme name="Cadastre"  collapsed="false" id="habitant" icon="fas fa-users">
+		    <layer id="geo_parcelle_2023" name="geo_parcelle_2023"  visible="true" tiled="true"
+                queryable="false" 
+                infoformat="application/vnd.ogc.gml" featurecount="20"
+                url="https://www.geo2france.fr/geoserver/pci/wms"
+                attribution="PCI Géo2France"
+            >
+			</layer>
+		</theme>         
+    </themes>
+</config>
diff --git a/demo/draw/draw2.xml b/demo/draw/draw2.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<config>
+    <application lang="fr" title="Mviewer" mouseposition="false" logo="" help="mviewer_help.html" drawtools="true" measuretools="true" mapprint="true" exportpng="true" style="css/themes/wet_asphalt.css" togglealllayersfromtheme="true"/>
+    <tools>
+		<draw help="true" geometryStroke="#2e5367" singleDraw="true" nbPixelsToClosePolygon="10"/>
+	</tools>
+	<mapoptions maxzoom="19" projection="EPSG:3857" center="255919,6427622" zoom="16" projextent="-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244" />
+
+    <baselayers style="gallery">
+        <baselayer  type="WMTS" id="ortho" label="Photo aérienne IGN" title="GéoPortail" maxscale="1000" thumbgallery="img/basemap/ortho.jpg"
+            url="https://data.geopf.fr/wmts" layers="ORTHOIMAGERY.ORTHOPHOTOS" format="image/jpeg" visible="false" fromcapacity="false"
+            attribution="&lt;a href='https://geoservices.ign.fr/services-geoplateforme-diffusion' target='_blank'>&lt;img src='img/basemap/geoservices.png'>&lt;/a>" style="normal" matrixset="PM" maxzoom="22"/>
+        <baselayer  type="WMS" id="osm" label="OpenStreetMap" title="Plan OSM Géobretagne" thumbgallery="img/basemap/osm.png"
+            url="https://tile.geobretagne.fr/osm/service" layers="osm:grey" format="image/png" visible="true"
+            attribution="GéoBretagne. Données : les contributeurs d'&lt;a href='https://www.openstreetmap.org/' target='_blank'>OpenStreetMap &lt;/a>,  &lt;a href='https://www.openstreetmap.org/copyright' target='_blank'>ODbL &lt;/a>" />
+		<baselayer  type="WMS" id="cadastre" label="Cadastre" title="Plan cadastrapp" thumbgallery="img/basemap/osm.png"
+            url="https://www.geo2france.fr/geoserver/pci/ows" layers="pci:cadastre" format="image/png" visible="true"
+            attribution="GéoBretagne. Données : les contributeurs d'&lt;a href='https://www.openstreetmap.org/' target='_blank'>OpenStreetMap &lt;/a>,  &lt;a href='https://www.openstreetmap.org/copyright' target='_blank'>ODbL &lt;/a>" />
+
+	</baselayers>     
+    <proxy url=""/>
+    <!-- <olscompletion url="https://api-adresse.data.gouv.fr/search/" type="ban" attribution="La recherche d'adresse est un service proposé par la BAN"/> -->
+    <olscompletion url="https://data.geopf.fr/geocodage/completion" type="ign" attribution="IGN"/>
+
+    <searchparameters bbox="false" localities="true" features="false" />   
+
+    <themes> 
+        <theme name="Cadastre"  collapsed="false" id="habitant" icon="fas fa-users">
+			<layer id="geo_parcelle_2023 " name="Parcelle"  visible="true" tiled="false"
+				searchable="false" queryable="true"
+				url="https://www.geo2france.fr/geoserver/pci/ows">
+			</layer>
+		</theme>         
+    </themes>
+</config>
diff --git a/docs/doc_tech/config_tools.rst b/docs/doc_tech/config_tools.rst
@@ -0,0 +1,67 @@
+.. Authors :
+.. mviewer team
+
+.. _tools:
+
+Présentation
+============
+
+Cette page vous servira à comprendre comment utiliser les outils disponibles.
+Les outils sont intégrées dans le coeur mviewer et utilisés selon la configuration du XML. Le fichier est chargé dans tous les cas.
+
+La différence avec les extensions est qu'une extension (et ses fichiers) est chargée au besoin et selon qu'elle est utilisée ou non dans la configuration XML.
+
+Les outils concerne ici : 
+
+- l'outil de dessin
+
+D'autres outils viendront compléter cette liste.
+
+Les outils sont localisés dans la balise <tools> de la configuration XML.
+
+.. code-block:: xml
+       :linenos:
+
+        <application>
+            <tools>
+                ... outils
+            </tools>
+
+            ....reste de la configuration XML
+        </application>
+
+Les outils sont présentés dans les sections qui suivent. 
+
+Outil de dessin
+---------------
+
+L'outil de dessin permet de : 
+
+- dessiner un point
+- dessiner un polygon
+- dessiner une ligne
+- donner un nom à une forme
+- exporter le dessin en GeoJSON
+- afficher des informations de mesure
+- dessiner selon une couche d'accroche WFS (snapping)
+
+Pour activer l'outil, vous devez le rajouter dans la balise ``<tools>`` :
+
+.. code-block:: xml
+       :linenos:
+
+        <tools>
+            <draw geometryTypes="Polygon" snapLayerId="geom_parcelle_2023" ... />
+        </tools>
+
+** Paramètres **
+
+* ``geometryTypes`` : (string) - List des géométries à dessiner.
+* ``snapLayerId`` : (string) - Un ID de couche WFS déjà utilisé dans la configuration XML (e.g custom layer)
+* ``snapLayerUrl`` : (string) - URL complète d'une couche WFS (le format doit être en ``application/json`` )
+* ``snapLimitZoom`` : (int) - Limite l'activation du snapping par niveau de zoom. Cela permet de limiter le chargement d'entités WFS. Le snapping sera actif si le zoom de la carte est supérieur à cette valeur.
+* ``help`` : (boolean) - Utilsier l'aide
+* ``nbPixelsToClosePolygon`` : (int) - Distance en pixels pour fermer automatiquement la forme et créer un polygone.
+* ``singleDraw`` : (boolen) - True pour dessiner uniquement une forme à la fois.
+* ``snapTolerance`` : (int) - Tolérence du snapping en pixel (c.fg pixelTolerance ol > v8.0)
+
diff --git a/docs/index.rst b/docs/index.rst
@@ -76,7 +76,8 @@ Cette partie est dédiée aux personnes qui ont vocation à déployer et configu
    doc_tech/config_customlayer.rst
    doc_tech/config_customcontrol.rst
    doc_tech/config_customcomponent.rst
-   doc_tech/config_styles.rst   
+   doc_tech/config_styles.rst
+   doc_tech/config_tools.rst
    doc_tech/config_environmentvar.rst
 
 Documentation dévelopeur

diff --git a/index.html b/index.html
@@ -914,6 +914,7 @@ <h4 class="modal-title" i18n="featureinfo.modal.title">Informations</h4>
     <script type="text/javascript" src="js/configuration.js"></script>
     <script type="text/javascript" src="js/zoom.js"></script>
     <script type="text/javascript" src="js/measure.js"></script>
+    <script type="text/javascript" src="js/draw.js"></script>
     <script type="text/javascript" src="js/addlayers.js"></script>
     <script type="text/javascript" src="js/info.js"></script>
     <script type="text/javascript" src="js/search.js"></script>