Le portail francophone de la géomatique

open source

PERSONS >= 5000000

STATE_NAME like '%ing%'

PERSONS between 5000000 and 10000000

Intersects(the_geom,Point(-90 40))

Within(the_geom,Polygon((-100 30,-100 45,-80 45,-80 30,-100 30)))

CONTAINS(the_geom,LINESTRING(-73.9 43.5,-77.76 42.56))

http://localhost:8080/geoserver/topp/wms?service=WMS&version=1.1.0&request=GetMap&layers=topp:states&bbox=-124.73142200000001,24.955967,-66.969849,49.371735&width=768&height=330&srs=EPSG:4326&format=application/openlayers&CQL_FILTER=BBOX(the_geom,-110,41,-95,45)

Uh huh. It's CyberGIS all over again.
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON.js';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import VectorLayer from 'ol/layer/Vector';

const GEOSERVER_BASE_URL = 'http://localhost:8600/geoserver/dev';

// create geoserver generic vector features layer
const featureSource = new VectorSource({
  format: new GeoJSON(),
  url: function (extent) {
    return (
      GEOSERVER_BASE_URL + '/ows?service=WFS&' +
      'version=1.0.0&request=GetFeature&typeName=dev%3Ageneric&maxFeatures=50&' + 
      'outputFormat=application%2Fjson&srsname=EPSG:3857&' +
      'bbox=' +
      extent.join(',') +
      ',EPSG:3857'
    );
  },
  strategy: bboxStrategy,
});

const featureLayer = new VectorLayer({
  source: featureSource,
  style: {
    'stroke-width': 0.75,
    'stroke-color': 'white',
    'fill-color': 'rgba(100,100,100,0.25)',
  },
});

// react
import React, {  useEffect, useRef } from 'react';
import Map from 'ol/Map'

function MapWrapper(props) {

  // refs are used instead of state to allow integration with 3rd party map onclick callback;
  //  these are assigned at the end of the onload hook
  //  [https:]   const mapRef = useRef();
  const mapElement = useRef();
  const featuresLayerRef = useRef();

  // other logic removed for brevity

  // react onload hook
  useEffect( () => {

    // create map
    const map = new Map({
      // config removed for brevity
    })

    // save map and featureLary references into React refs
    featuresLayerRef.current = featureLayer;
    mapRef.current = map

  },[])

  return (      
    <div>
      <div ref={mapElement} className="map-container"></div>
    </div>
  ) 

}

export default MapWrapper

import WFS from 'ol/format/WFS';
import GML from 'ol/format/GML32';

const GEOSERVER_BASE_URL = 'http://localhost:8600/geoserver/dev';

// map click handler - uses state and refs available in closure
const handleMapClick = async (event) => {

  // get clicked feature from wfs layer
  // TODO: currently only handles a single feature
  const clickedCoord = mapRef.current.getCoordinateFromPixel(event.pixel);
  const clickedFeatures = featuresLayerRef.current.getSource().getFeaturesAtCoordinate(clickedCoord);
  if (!clickedFeatures.length) return; // exit callback if no features clicked
  const feature = clickedFeatures[0];

  // parse feature properties
  const featureData = JSON.parse(feature.getProperties()['data']);

  // iterate prop to test write-back
  if (featureData.iteration) {
    ++featureData.iteration;
  } else featureData.iteration = 1;

  // set property data back to feature
  feature.setProperties({ data: JSON.stringify(featureData) });
  console.log('clicked updated feature data', feature.getProperties())

  // prepare feature for WFS update transaction
  //  [https:]   const wfsFormatter = new WFS();
  const gmlFormatter = new GML({
    featureNS: GEOSERVER_BASE_URL,
    featureType: 'generic',
    srsName: 'EPSG:3857' // srs projection of map view
  });
  var xs = new XMLSerializer();
  const node = wfsFormatter.writeTransaction(null, [feature], null, gmlFormatter);
  var payload = xs.serializeToString(node);

  // execute POST
  await fetch(GEOSERVER_BASE_URL + '/wfs', {
    headers: new Headers({
      'Authorization': 'Basic ' + Buffer.from('admin:myawesomegeoserver').toString('base64'),
      'Content-Type': 'text/xml'
    }),
    method: 'POST',
    body: payload
  });

  // clear wfs layer features to force reload from backend to ensure latest properties
  //  are available
  featuresLayerRef.current.getSource().refresh();

  // display updated feature data on map
  setFeatureData(JSON.stringify(featureData));
}

	Whole file	Selected columns
CSV	27.9 s	13.1 s
Geopackage	2min 12s	20.2 s
GeoParquet	7.2 s	4.1 s

id	name	filter_field
1	one	group_a,group_b
2	two	group_b
3	three	group_b,all
4	four	all

id	name	filter_field
1	one	group_a,group_b
2	two	group_b
3	three	group_b,all
4	four	all

Communauté	Ressources	L'emploi	Le marché	L'association	Fils RSS
Forum Blogs Wiki Planet Sites amis	Agenda Biblio Fiches AMO-CNIG Paris PCGIS Téléchargements	Offres d'emploi Banque de CV Formations Démarche Métiers	Geo-Entreprises Geo-Communiqué Appels d'offres	L'association Qui sommes-nous ? Nous aider Bienfaiteurs Partenaires Historique Statuts	Tout le site Job Géomatique Services GeoBlogs ...	Faire un don Mentions légales

Le portail francophone de la géomatique

Canaux

Planet OSGeo

Publié: 6 December 2024, 1:00am CET

Publié: 5 December 2024, 1:00pm CET

Publié: 5 December 2024, 11:00am CET

Publié: 5 December 2024, 9:55am CET

Publié: 4 December 2024, 1:00pm CET

Publié: 4 December 2024, 11:00am CET

Publié: 4 December 2024, 1:00am CET

Pièce jointe: [télécharger]

Publié: 3 December 2024, 7:18pm CET

Publié: 3 December 2024, 10:00am CET

Publié: 3 December 2024, 1:00am CET

Pièce jointe: [télécharger]

Publié: 2 December 2024, 11:00am CET

Publié: 1 December 2024, 11:59pm CET

Publié: 1 December 2024, 10:00am CET

Publié: 30 November 2024, 11:00am CET

Pièce jointe: [télécharger]

Publié: 29 November 2024, 11:00am CET

Publié: 28 November 2024, 11:00am CET

Pièce jointe: [télécharger]

Publié: 27 November 2024, 2:37pm CET

Publié: 27 November 2024, 10:00am CET

Publié: 26 November 2024, 11:00am CET

Publié: 25 November 2024, 11:00am CET

Publié: 24 November 2024, 3:21pm CET

Publié: 24 November 2024, 11:00am CET

Publié: 23 November 2024, 10:23pm CET

Publié: 23 November 2024, 11:00am CET

Publié: 22 November 2024, 11:00am CET

Publié: 21 November 2024, 11:00am CET

Pièce jointe: [télécharger]

Publié: 20 November 2024, 11:00am CET

Publié: 19 November 2024, 10:05pm CET

Publié: 19 November 2024, 8:53pm CET

Publié: 19 November 2024, 8:51pm CET

Publié: 19 November 2024, 11:09am CET

Publié: 19 November 2024, 11:00am CET

Publié: 18 November 2024, 11:00am CET

Publié: 18 November 2024, 3:16am CET

Publié: 18 November 2024, 1:00am CET

Publié: 17 November 2024, 1:57pm CET

Publié: 17 November 2024, 11:00am CET

Publié: 16 November 2024, 1:20pm CET

Publié: 16 November 2024, 11:00am CET

Publié: 15 November 2024, 8:36pm CET

Publié: 15 November 2024, 11:00am CET

Publié: 14 November 2024, 2:10pm CET

Publié: 14 November 2024, 11:25am CET

Publié: 14 November 2024, 10:00am CET

Pièce jointe: [télécharger]

Publié: 13 November 2024, 10:00am CET

Publié: 13 November 2024, 3:16am CET

Publié: 12 November 2024, 2:46pm CET

Publié: 12 November 2024, 10:00am CET

Publié: 12 November 2024, 1:00am CET

Publié: 12 November 2024, 1:00am CET

Pièce jointe: [télécharger]

Publié: 11 November 2024, 10:00am CET

Publié: 11 November 2024, 1:00am CET

Publié: 10 November 2024, 10:00am CET

Publié: 9 November 2024, 5:54pm CET

Publié: 9 November 2024, 10:00am CET

Publié: 9 November 2024, 5:03am CET

Publié: 8 November 2024, 12:00pm CET

Publié: 8 November 2024, 10:00am CET

Publié: 8 November 2024, 4:54am CET

Publié: 8 November 2024, 4:23am CET

Publié: 7 November 2024, 10:00am CET

Publié: 6 November 2024, 5:35pm CET

Publié: 6 November 2024, 10:00am CET

Publié: 30 October 2024, 1:00pm CET

Publié: 30 October 2024, 12:21pm CET

Publié: 30 October 2024, 10:00am CET

Pièce jointe: [télécharger]

Publié: 29 October 2024, 1:00pm CET

Publié: 29 October 2024, 10:00am CET

Pièce jointe: [télécharger]