Openlayers 6 GeoJSON 简化 LineString

Question

我尝试简化我的 GeoJson 数据，因为在我的线串数据中，有许多来自同一个地方的轨迹点，但具有 GPS 的容差。所以我想使用内置函数来简化数据。

我的代码基于 GeoJSON 示例表单 Openlayers。

我能够提取特征的几何图形，但我可以将新几何图形放回特征并将其添加到图层中。具有原始日期的矢量和源图层工作正常。对于测试，我想显示两个功能，原始轨道和简化轨道。如果不是我想生成一个新层，有没有办法调整几何图形。

这是我的代码：

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

代码示例正在运行。我的价值太小了，无法对地图产生影响。所以我使用的是 100 或更高。

问候马可

Answer 2

您可以在加载功能时更新它们

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