[GIS] Editing PostGIS topology in web browser

javascriptleafletopenlayers-2postgis

I am trying to conceptualize the best process for editing topology from PostGIS in a web browser. Ideally what I would like to accomplish is the loading of a topology (imagine the lower 48 states of the US), adjusting the borders, and updating a PostGIS table with the changes. I am fairly comfortable with the delivery, representation, and uploading of the geometry, but I am a bit stuck on the editing part.

Although it seems like OpenLayers 3 supports topology editing (despite this answer), it does not seem to enforce any rules (for example, it allows the user to drag a boundary to overlap another polygon), nor does it seem like OpenLayers supports exporting vector layers as a GeoJSON, though I'm sure it's possible to write that functionality. Likewise, Leaflet offers the excellent Leaflet.draw plugin along with GeoJSON export functionality, but does not offer the ability to edit a topology.

Unless I'm missing something, it seems like my best bet at this point is to write a tool that allows for the topological editing of polygons, most likely for Leaflet because I am more comfortable with it. I imagine the process would be something like:

Click on a boundary
Find all features that have a geometry at this location
Create a vertex at this location in all found feature geometries
While dragging, update all features that share this vertex
When done dragging, make sure that no segments of the altered geometries intersect other features

Ideally it would function very similarly to the OpenLayers example above, but would also enforce some rules and make exporting easy.

Does this sound like a reasonable process?

Am I missing anything?

Do you have any specific suggestions for any part of the process, i.e. any existing tools that accomplish these pieces of functionality?

Best Answer

I ended up writing a Leaflet plugin, Leaflet.draw.topology, to accomplish this task. The only thing not implemented in the plugin is geometry validation, though in the future it certainly could be. It is currently handled server side with PostGIS.

Related Solutions

[GIS] How to create spider diagrams (hub lines) in PostGIS

Assuming that your database schema looks like this:

table customer:                     table shops:
customer_id | shop_id | the_geom    shop_id | the_geom
--------------------------------    ------------------
       1000 |     100 |    ...          100 |    ...
       1001 |     100 |    ...          101 |    ...
       1002 |     101 |    ...

The following statement should create a "spider diagram" for shop 100:

SELECT c.customer_id, c.shop_id, ST_MakeLine(c.the_geom,s.the_geom)
FROM customer as c JOIN shops as s
     ON c.shop_id = s.shop_id
WHERE shop_id = 100

Doc: http://postgis.net/docs/ST_MakeLine.html

[GIS] OpenLayers Combines Rules and StyleMap/SelectFeature

My answer is a bit late, but it might help others. I just had the same problem and I managed to find a solution.

Here is an image of the result:

This is my code:

var style1 = new OpenLayers.Style();

var risk1 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "1"
  }),
  symbolizer: {
    fillColor: "#00FF00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk2 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "2"
  }),
  symbolizer: {
    fillColor: "#7FFF00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk3 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "3"
  }),
  symbolizer: {
    fillColor: "#FFFF00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk4 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "4"
  }),
  symbolizer: {
    fillColor: "#FC7F00",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

var risk5 = new OpenLayers.Rule({
  filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "r_voie_fai",
    value: "5"
  }),
  symbolizer: {
    fillColor: "#FA0000",
    fillOpacity: 0.6,
    strokeColor: "#000000",
    strokeWidth: 1,
    strokeDashstyle: "solid"}
});

style1.addRules([risk1, risk2, risk3, risk4, risk5]);

var onselect = new OpenLayers.Style({
  'fillColor':'blue',
  'fillOpacity':0.9,
  'strokeColor':'black',
  'strokeWidth':4,
  'strokeDashstyle': "solid"
});


var StyleMap = new OpenLayers.StyleMap({'default': style1,'select': onselect});

The «property» value will be your attribute and the «value» is the value of the attribute on which wou will want to do your classification.

Then the variable «StyleMap» will be the styleMap of your WFS layer.

  crime = new OpenLayers.Layer.Vector("crime",
    {
      styleMap: StyleMap,
      rendererOptions: {zIndexing: true},
      protocol : new OpenLayers.Protocol.WFS({
        version:       "1.1.0",
        url:           "http://localhost:8080/geoserver/Risk/wms",
        srsName:       "EPSG:900913",
        featureType:   "crime"
      }),
      strategies: [new OpenLayers.Strategy.BBOX({
        // only load features for the visible extent
        ratio: 1,
        // fetch features after every resolution change
        resFactor: 1
      })]
    }
  );

Best Answer

Related Solutions

[GIS] How to create spider diagrams (hub lines) in PostGIS

[GIS] OpenLayers Combines Rules and StyleMap/SelectFeature

Related Question