Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Printemps des cartes 2024

#1 Mon 07 January 2019 17:06

Alain_75077
Juste Inscrit !
Date d'inscription: 29 Nov 2018
Messages: 7

Problème d'affichage GEOjson sur une carte OpenLayers

Bonjour à tous,

Je veux afficher ma donnée en geojson sur ma carte OpenLayer mais mon geojson ne s'affiche pas et ma carte aussi. J'ai une api (en node.js) qui permets de récupérer la donnée qui est inscris dans ma base de donnée. J'ai un fichier script.js qui permets l'affichage de ma carte, récupérer la donnée envoyer par l'API et l'afficher sur la carte.

Dans script.js :

Je crée une source qui contiens le format de ma donnée :

Code:

 var source = new VectorSource({
    format: new GeoJSON(),

     features: []
  });

Je crée un nouveau vectorLayer qui contiens le style du GEOjson :

Code:

var foncier2 = new VectorLayer({
source:source,
style: function (feature, res) {
  property = feature.get("nature");
  return new  Style({
    stroke: new Stroke({
      color: [40, 40, 40, 1],
      width: 0.3
    }),
    fill: new Fill({
      color: couleur(property)
    })
  })
},
});

Je requête sur mon API pour recevoir et traiter la donnée à l'aide d'une fonction callback :

Code:

function loadJSON(callback) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            console.log(this.responseText);
            callback(this.responseText);
          }
        };
        xhr.open("GET", "adressIP:port/endpoint", true);
        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(null);

Puis je crée une fonction qui transforme ma donnée en json puis en GEOjson:

Code:

var myData = JSON.parse(data);

var geojsonObject = {
 "type": "FeatureCollection",
 "crs": { "type": "name", "properties": { "name": "EPSG:4326" }},
 "features": [
   {
     "type": "Feature",
     "geometry": {
       "type": "Polygon",
       "coordinates":myData[2].geom
     }
   }
 ]};

Pour finir j'affiche mon GEOjson sur la carte :

Code:

foncier2.getSource().clear();
foncier2.getSource().addFeatures(foncier2.getSource().getFormat().readFeatures(geojsonObject, {
  dataProjection: 'EPSG:4326',
  defaultFeatureProjection: 'EPSG:3857',
}));
foncier2.getSource().refresh();
foncier2.getSource().changed();
map.getView().fit(foncier2.getSource().getExtent());

Malheureusement ma carte ne s'affiche pas, je ne peux donc pas visualiser mon GEOjson. De plus, je n'ai aucune erreur dans ma console.

PS : Je travaille avec la version 5 d'OpenLayers
J'arrive à récupérer la donnée et à la visualiser à l'aide de ma console , elle ressemble à ceci : https://i.stack.imgur.com/8frt1.png

Hors ligne

 

Pied de page des forums

Powered by FluxBB