Discussion :

[ubunoe]

Bonjour,
je voudrais faire un éditeur de trace GPX (original, non ?) en utilisant ol.control.LayerImport pour importer une trace GPX.
http://ignf.github.io/geoportal-exte...yerImport.html
Je pensais ensuite sélectionner cette trace par un click avec ol.interaction.select :
https://openlayers.org/en/v6.15.1/ap...ct-Select.html
puis la modifier avec ol.interaction.modify :
https://openlayers.org/en/v6.15.1/ap...fy-Modify.html
Je bloque déjà (!) sur select qui n'a pas l'air de fonctionner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function () {
  const map = new ol.Map({
    target: "map",
    layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
    view: new ol.View({
      center: [706667.2595047799,5398400.591633956],
      zoom: 12,
    }),
  });
  const importControl = new ol.control.LayerImport({layerTypes: ["GPX"]});
  map.addControl(importControl);
  const selInter = new ol.interaction.Select({
    hitTolerance: 15,
  });
  map.addInteraction(selInter);
  selInter.on('select', function (e) {console.log(JSON.stringify(e));});
};

Des pistes ?

Cordialement,
Pierre.

[ubunoe]

En fouillant un peu avec la console firefox :

• importControl.getName() me donne le nom de la trace importée (nom du fichier - l'extension ou nom donné dans la boîte de dialogue)
• importControl définit gpResultLayerId sur le layer contenant le dessin, d'où pour récupérer de layer :
  map.getLayers().forEach(function (layer) {if (layer.gpResultLayerId !== undefined) {console.log(layer.gpResultLayerId);}});
  affiche "layerimport:GPX" dans la console firefox
• Une fois que j'ai ce layer .getSource().getFeatures()[0].getGeometry().getLineString() me donne bien les points de ma trace gpx

mais select ne donne toujours rien !

[xavlight]

Salut Pierre,

Voilà une idée pour que tu avances dans ton projet, qui reste tout de même assez complexe.
J'ai utilisé l'extension IGN OL avec le drawing, qui permet de dessiner des croquis, les modifier et en supprimer.

Voilà ce que ça donne avec un exemple en jsfiddle.
J'ajoute les features GPX au layer de Drawing.
Tu peux également en ajouter directement avec l'outils annoter la carte ol.control.Drawing.

https://jsfiddle.net/xavlight/re0pxzqc/

Extrait de code pour l'ajout de l'outils 'annoter la carte' et détection d'event add

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var drawArea = new ol.control.Drawing({
	collapsed : true,
	draggable : true,
	defaultStyles : {},
	cursorStyle : {},
	tools : {
		points : true,
		lines : true,
		polygons :true,
		holes : false,
		text : false,
		remove : true,
		display : true,
		tooltip : true,
		export : false,
		measure : true
	}
});
map.addControl(drawArea);
 
map.getLayers().on("add", function (e) {
	var addElement = e.element;
	var addElementFeatures = addElement.getSource().getFeatures();
 
	if (addElement.gpResultLayerId == "drawing") return;
 
	/* Uniquement pour sélectionner l'import GPX
	var translate = new ol.interaction.Select({
		features: new ol.Collection(addElementFeatures)
	});
	map.addInteraction(translate);
	*/
 
	if (addElement.getSource() && addElement.getSource().getFeatures().length) {
		//Cas avec déjà des croquis ajoutés par Drawing
		if (drawArea.layer) {
			var srcDraw = drawArea.layer.getSource();
			srcDraw.addFeatures(addElementFeatures); //On ajoute l'import 
		} else {
			//Cas sans croquis encore tracé
			drawArea.setLayer(addElement); //On ajoute l'élément
		}
	}
})

Je te laisse tester.

A+
Xav

[ubunoe]

Merci beaucoup Xav, c'est super
Je vais partir de ça... à suivre j'espère !

Bye