Comment ajouter une source dans la couche GeoJSON à l'aide d'OpenLayers

Question

J'essaie d'ajouter une couche GeoJSON en utilisant OpenLayers qui se trouve dans la base de données PostgreSQL. Lorsque j'exécute une requête en tant que

sélectionnez ST_AsGeoJson (ST_Transform (geom, 900913)) comme code de ferme à partir de farmdatadd où areatbl = 26

Je reçois plusieurs rangées de MultiPolygon sur lesquelles je veux ajouter en tant que couche sur la carte. Mais seul le premier tableau de calque est ajouté et le reste n'apparaît pas.

Mon code est:

function addGEOJSONLayer(geojson) {
            var vectorSource = new ol.source.Vector({
                  features: new ol.format.GeoJSON().readFeatures(JSON.parse(geojson[0])),
             });
            if(geojson.length > 1) {
            console.log("here");
                for(var k = 1; k < geojson.length; k++) {
                console.log(k);
                    vectorSource.addFeature(new ol.Feature(new ol.format.GeoJSON().readFeatures(JSON.parse(geojson[k]))));
                }
            }
             
            var vectorLayer = new ol.layer.Vector({
                  source: vectorSource,
                  style: styleFeature
            });
            var ext = vectorLayer.getSource().getExtent();
            map.getView().fit(ext, map.getSize());
            map.addLayer(vectorLayer);
        }

J'ai fait la même chose dans l'ancienne version d'Openlayer que:

if (jsonString != "") {
        //var holdingFeature = JSON.parse(jsonString);
        var holdingFeature = jsonString;
        console.log(holdingFeature);
        console.log(holdingFeature.length);
        for (var i = 0; i < holdingFeature.length; i++) { 
            console.log(holdingFeature[i]);
            vector_layer_feature.addFeatures(geojson_format.read(holdingFeature[i]));
        }
    }
    for (var j = 0; j < vector_layer_feature.features.length; j++) {
        vector_layer_feature.features[j].style = { fillColor: "#4169E1", fillOpacity: 0.5 };
    }
    map.zoomToExtent(vector_layer_feature.getDataExtent());
    vector_layer_feature.refresh({ force: true });

Aucune suggestion?

Answer 1

Il n'est pas clair si l' geojsonargument passé est un tableau de lignes TEXTreprésentant chacune une géométrie. Ceci est supposé dans votre fonction. Avez-vous déjà consulté le "here"journal de la console?

Comme mentionné dans les commentaires, mieux vaut récupérer un FeatureCollection (as JSONB) directement dans la base de données [*]:

SELECT JSONB_BUILD_OBJECT(
         'type',     'FeatureCollection',
         'features', JSONB_AGG(ST_AsGeoJSON(fc.*, 'geom_900913')::JSONB)
       )
FROM   (
  SELECT *,
         ST_Transform(geom, 900913) AS geom_900913
  FROM   farmdatadd
  -- WHERE  ST_IsValid(ST_Transform(geom, 900913))
) AS fc
;

et analysez-le avec

var vectorSource = new ol.source.Vector({
  features: new ol.format.GeoJSON().readFeatures(featureCollection, { featureProjection: 'EPSG:900913' }),
});

Note pédante: selon la spécification GeoJSON , les géométries doivent être stockées dans EPSG:4326; vous pouvez spécifier un dataProjectiondans OpenLayers (à différents endroits avec une priorité différente) lors de la définition d'une source vectorielle.

---

[*] Voici unST_AsFeatureCollection emballage personnalisé soigné sous la forme d'un ensemble d' agrégats définis par l'utilisateur (en mouvement) , retournant JSONB.

Usage:

SELECT ST_AsFeatureCollection(t.*, 'geom') FILTER(WHERE ST_IsValid(t.geom))
FROM   <table_expression> AS t
;

Description dans les commentaires. Avertissement: je les ai faits.

Answer 2

En plus de récupérer directement la collection d'entités de Postgres lui-même, si vous avez un tableau de Polygon / MultiPolygon, vous pouvez le faire -

ol.proj.proj4.register(proj4);// This line is optional and required if you have different source projection, here you are registering proj4 js for projection.

const polygon = new ol.Feature({
        geometry: new ol.geom.MultiPolygon(feature.geometry.coordinates),
        exampleKey: exampleValue
});

 const src = 'EPSG:27700' //optional
 const dest = 'EPSG:3857' // optional
 polygon.getGeometry().transform(src, dest) // optional
 vectorSource.addFeature(polygon) // adding polygon to the existing source

ici, la fonctionnalité est une fonctionnalité geojson, vous devez donc ajouter le code ci-dessus dans la boucle et simplement passer les coordonnées comme je l'ai mentionné ci-dessus.

Violon: https://jsfiddle.net/amsanket22/19ztaerq/20/

Si vous avez une projection différente, vous pouvez utiliser proj4 comme je l'ai montré. Assurez-vous également que vous avez ajouté du style pour votre multi-polygone.