Openlayers 6 Geo JSON Упрощение LineString - PullRequest
Новая
       101

Openlayers 6 Geo JSON Упрощение LineString

0 голосов
/ 30 января 2020

Я пытаюсь упростить свои данные Geo Json, потому что в моих данных линейных линий много точек трека с одного места, но с допуском GPS. Поэтому я хочу использовать встроенную функцию для упрощения данных.

Мой код основан на примере Geo JSON из Openlayers.

Я могу извлечь геометрию объекта, но могу вставить новую геометрию обратно в объект и добавить ее к слою. Вектор и исходный слой с исходной датой работают нормально. Для тестирования я хочу отобразить обе функции, оригинальный трек и упрощенный трек. Есть ли способ настроить геометрию на месте, если нет, я хочу создать новый слой.

enter image description here

Вот мой код: 

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();
    });

});

Ответы [ 2 ]

0 голосов
/ 04 февраля 2020

Пример кода работает. Мое значение было маленьким, чтобы иметь влияние на карту. Поэтому я использую 100 и выше.

С уважением, Марко

0 голосов
/ 30 января 2020

Вы можете обновить функции по мере их загрузки 

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