Openlayers 6 GeoJSON 简化 LineString

Question

I try to simplify my GeoJson data because in my linestring data are many points of track from the same place but with the tolerance of the GPS. So i want to use the build in function to simplify the data.

My code based on the GeoJSON example form Openlayers.

I am able to extract the geometry of the feature, but i can's put the new geometry back into a feature and add this to the layer. The vector and source layer with the original date are working fine. For testing i want to display both of the features, original track and simplifyed track. Is there a way to adjust the geometry in place if not i want to generate a new layer.

Here my code:

import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import Circle from 'ol/geom/Circle';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import Geometry from 'ol/geom/Geometry';
import { defaults as defaultInteractions, Modify, Select } from 'ol/interaction';


$(document).on('turbolinks:load', function() {




    var image = new CircleStyle({
        radius: 5,
        fill: null,
        stroke: new Stroke({ color: 'red', width: 1 })
    });

    var styles = {
        'Point': new Style({
            image: image
        }),
        'LineString': new Style({
            stroke: new Stroke({
                color: 'green',
                width: 1
            })
        }),
        'MultiLineString': new Style({
            stroke: new Stroke({
                color: 'green',
                width: 1,
            })
        }),
        'MultiPoint': new Style({
            image: image
        }),
        'MultiPolygon': new Style({
            stroke: new Stroke({
                color: 'yellow',
                width: 1
            }),
            fill: new Fill({
                color: 'rgba(255, 255, 0, 0.1)'
            })
        }),
        'Polygon': new Style({
            stroke: new Stroke({
                color: 'blue',
                lineDash: [4],
                width: 3
            }),
            fill: new Fill({
                color: 'rgba(0, 0, 255, 0.1)'
            })
        }),
        'GeometryCollection': new Style({
            stroke: new Stroke({
                color: 'magenta',
                width: 2
            }),
            fill: new Fill({
                color: 'magenta'
            }),
            image: new CircleStyle({
                radius: 10,
                fill: null,
                stroke: new Stroke({
                    color: 'magenta'
                })
            })
        }),
        'Circle': new Style({
            stroke: new Stroke({
                color: 'red',
                width: 2
            }),
            fill: new Fill({
                color: 'rgba(255,0,0,0.2)'
            })
        })
    };

    var styleFunction = function(feature) {
        return styles[feature.getGeometry().getType()];
    };



    var vectorSource = new VectorSource({
        format: new GeoJSON(),
        url: 'v1/track?journey={"last"}'
    })

    var vectorLayer = new VectorLayer({
        source: vectorSource,
        style: styleFunction
    })

    var select = new Select({
        wrapX: false
    });

    var modify = new Modify({
        features: select.getFeatures()
    });

    var map = new Map({
        interactions: defaultInteractions().extend([select, modify]),
        layers: [
            new TileLayer({
                source: new OSM()
            })
        ],
        target: 'map',
        view: new View({
            center: [0, 0],
            zoom: 2
        })
    });

    console.log(vectorLayer);
    //map.addLayer(vectorLayer);

    $.getJSON('v1/track?journey={"last"}', function(data) {
        var track = (new GeoJSON()).readFeature(data);
        var simpleGeo = track.getGeometry().simplify(0.01);
        track.setGeometry(simpleGeo);
        //console.log(simpleGeo);

        var simpleSource = new GeoJSON(simpleGeo);

        var simpleLayer = new VectorLayer({
            source: simpleSource,
            style: styleFunction
        })

        console.log(simpleLayer);
        map.addLayer(simpleLayer);
        map.render();
    });

});

Answer 1

The code example is working. My value was to small to have an effect on the map. So i am using 100 and higher.

Regards Marco

Answer 2

You could update the features as they are loaded

vectorSource.on('addfeature', function(event) {
  event.feature.setGeometry(event.feature.getGeometry().simplify(0.01));
});