如何基于openlayers绘制点、线、面各类要素缓冲区
对于如何绘制点线面,openlayers官方文档已给出了详细例子:
要素绘制与编辑demo
然而官方demo对于如何绘制缓冲区未详细说明。本人基于turf库上述官方demo基础上实现了缓冲区绘制功能,适用于各类要素,代码如下:
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer.js';
import { GeoJSON } from 'ol/format';
import * as turf from "@turf/turf";
draw.on('drawend', function (event) {
//添加绘制要素
const vectorSource = new VectorSource();
vectorSource.addFeature(event.feature);
//读取缓冲区半径
const radiusInput = document.querySelector('#nameInput') as HTMLInputElement;
let radius:number=parseFloat(radiusInput.value) ;
//turf缓冲区分析 openlayers默认墨卡托投影
const features = vectorSource.getFeatures();
const turfLines = (new GeoJSON()).writeFeaturesObject(features, {
featureProjection: 'EPSG:3857'
});
var buffered = turf.buffer(turfLines, radius, { units: 'meters' });
let _bufferedFeature = (new GeoJSON()).readFeatures(buffered, {
featureProjection: 'EPSG:3857'
});
//将结果存入Source
_bufferedFeature.forEach(function(feature) {
vectorSource.addFeature(feature);
});
const vectorLayer = new VectorLayer({
source: vectorSource,
style: style,
});
vectorLayer.set('name', 'temp');
map.addLayer(vectorLayer);
});
效果图: