[英]Openlayers 6 GeoJSON Simplify 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();
});
});
代码示例正在运行。 我的价值是小到对地图产生影响。 所以我使用 100 及更高版本。
问候马可
您可以在加载功能时更新它们
vectorSource.on('addfeature', function(event) {
event.feature.setGeometry(event.feature.getGeometry().simplify(0.01));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.