如何基于openlayers绘制点、线、面各类要素缓冲区

如何基于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);
      });

效果图：