Discussion :

[saxrub]

Bonjour

L'exemple https://openlayers.org/en/latest/exa...tor-layer.html permet d'ajouter une couche vecteur à partir d'un fichier json.

J'utilise openlayers 6.8.1 et les plugins Openlayers 3.1.0

Lors de l'exécution de ma page, j'obtiens le message

Uncaught ReferenceError: VectorLayer is not defined

lors de l'exécution de

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
const vectorLayer = new VectorLayer({
  source: new VectorSource({
    url: 'lagunes.geojson',
    format: new GeoJSON(),
  }),
  style: function (feature) {
    style.getText().setText(feature.get('name'));
    return style;
  },
});

Je présume que les imports visibles dans l'exemple doivent être ajoutés dans ma page, mais comment ?

[NJNDEV]

Dans le template ou HTML:

Code HTML :

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

1
2
3
4
5
6
<script>
...
 //Canal_principal_STPZ.kml STPZ Historique
 var urlKML_STPZ=<?php echo('"'.get_theme_file_uri('/KML/Canal_Principal_STPZ.kml').'"'); ?>; 
...
</script>

Dans le JS

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
//AJOUT Couche St Tropez Historique
	var layerKML_STPZ = new ol.layer.Vector({
		source: new ol.source.Vector({
				url: urlKML_STPZ,
				format: new ol.format.KML({
						// applique les styles du fichier KML
						extractStyles: true,
						showPointNames: true,
					})
					//essai style
					// fin essai Style
			})
			//	opacity: 0.75,
	});

[saxrub]

Salut
Merci pour cette piste intéressante qui fonctionne bien pour des KML !

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
const vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'KML_tmp/052813BB-9A8B-7F08-D33A-4DBEF46F6E5C.kml',
    format: new ol.format.KML(),
  }),
  style: function (feature) {
    style.getText().setText(feature.get('name'));
    return style;
  },
});

Par contre, si je mets un contexte geoJson,

Code JavaScript :

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

1
2
3
4
5
6
const vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'lagunes.geojson',
    format: new ol.format.GeoJSON(),
  })
});

Obtiens l'erreur

Erreur d’analyse XML : mal formé
Emplacement : https://wnat.fr/lagunes.geojson
Numéro de ligne 1, Colonne 1 :

Notez que le fichier lagunes.geojson sort directement de QGis.

[saxrub]

Salut
Personne n'a eu à intégrer des fichiers geojson ?

[NJNDEV]

essaie avec un convertisseur de ce type pour voir
https://anyconv.com/fr/convertisseur-de-geojson-en-kml/

[NJNDEV]

Réponse du convertisseur / XML viewer , problème d'accolade?
Erreur d’analyse XML : mal formé
Emplacement : blob:moz-extension://9042d810-855f-45b2-8bdd-84bf951c6efd/3249bdd4-6148-46ab-a7bb-b0ceff129535
Numéro de ligne 1, Colonne 1 :
{
^

[saxrub]

Salut
Merci pour ta suggestion de transformation mais elle ne répond pas à mon besoin.
De plus, pour valider les structures json, j'utilise https://jsonformatter.curiousconcept.com/ qui valide tout le fichier !
Je vais jeter un oeil sur ce que tu signales comme problème (l'accolade).
Note aussi que j'ai essayé avec un autre fichier geojson (pièce jointe) récupéré dans un exemple Openlayers.
A suivre

[saxrub]

J'ai trouvé !

En regardant l'erreur que tu signales, j'ai pensé à "et si ça venait du navigateur" (j'utilise FF) ?
Un essai avec Chrome (avec le fichier régions) est donc été fait et le geojson a été affiché bien que l'erreur soit toujours affichée.

Pour poursuivre, j'ai ajouté mes lagunes mais pour cela, j'ai renommé la variable vectorlayer utilisée dans

Code JavaScript :

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

1
2
3
4
5
6
const vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'lagunes.geojson',
    format: new ol.format.GeoJSON(),
  })
});

par

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
var regions = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: './regions.geojson',
    format: new ol.format.GeoJSON(),
  })
});
 
 
var lagunes = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: './lagunes.geojson',
    format: new ol.format.GeoJSON(),
  })
});

et ça fonctionne dans FF et Chrome, les deux couches s'affichent.

Je vais refaire un essai avec la version -3 et regarder s'il n'y a pas un problème

[NJNDEV]

Si j'ai bien compris c'est la syntaxe de l'URL qui était incorrecte:
url: 'lagunes.geojson', => url: './lagunes.geojson',.
Bon W-E.

[saxrub]

Non, en fait depuis le début, c'est un problème de temps de réponse, le fichier geojson faisant 21mo, le temps qu'il soit "digéré" par mon adsl de campagne est long.
Au bout de 30s, le geojson est affiché.