WedX - журнал о программировании и компьютерных науках

Openlayers 6 GeoJSON Упростить LineString

Я пытаюсь упростить свои данные 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();
    });

});

Ответы:


1

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

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

04.02.2020

2

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

vectorSource.on('addfeature', function(event) {
  event.feature.setGeometry(event.feature.getGeometry().simplify(0.01));
});
30.01.2020
  • Привет, Майк, спасибо за быстрый ответ. Я поместил EventListener в свой пример кода, но ничего не изменилось. Я вижу, что запускается событие on, но геометрия не упрощается. Я помещаю код после den vectorSource и перед vectorLayer. 30.01.2020
  • Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]