openlayers 中LineString显示填充色效果

openlayer中加载LineString 显示天填充色，但是Style.Fill 对LineString 没有效果，所以想达到自己的目标需要另外想办法：

1、通过设置Stroke 来实现

通过设置多个Stroke样式设置，设置Stroke线条宽度，第一个粗，最后的细，达到有填充色的效果。

 styles.push(new Style({
            stroke: new Stroke({
                color: 'red',
                width: 12,
                lineCap: 'square',
            }),
        }));
        styles.push(new Style({
            stroke: new Stroke({
                color: 'green',
                width: 4,

            }),
        }))；
        return styles;

缺陷：如果中心有需要有透明度渐变色这些问题，就无法实现，因为透明度透必定是上一个样式的颜色

2、通过改变图形，将图形变为Polygon来实现

1. 利用turf 中的buffer方法获取Polygon，通过设置Fill，从而达到需要的效果

var line = turf.LineString([[-90.548630, 14.616599],[-90.748630, 14.816599]]);
var buffered = turf.buffer(point, 500, {units: 'meters'});

注意：units参数值，meters:米，kilometers:千米，miles:英里
缺点：缓存出来的面两端都是圆角，无法设置成为平角，如果你需要平角的线段那么这个方法将不是你的选择

2. 根据geoserver wps 获取缓存面，通过设置Fill,从而达到需要的效果

 function getbufferbyline(linef, buffersize, round) {
            if (linef == undefined || linef == null) return;
            var linewkt = new ol.format.WKT().writeFeature(linef);
            if (buffersize == undefined || buffersize == null) buffersize = 10;
            if (round == undefined || round == null) round = 10;
            var bufferxml = getbuffxml(new ol.format.WKT().writeFeature(linef), buffersize, round);
            $.ajax({
                type: "POST",
                url: geoserver + "geoserver/orchard/ows",
                contentType: "application/xml",
                data: bufferxml,
                async: true,
                success: function (o) {
                    if (o.coordinates != null) {
                        coordians = o.coordinates[0];
                    }
                },
                error: function (s) {
                }
            });
        };
        function getbuffxml(wkt, buffersize, round) {
            var bufferxml = '<?xml version="1.0" encoding="UTF-8"?><wps:Execute version="1.0.0" service="WPS" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.opengis.net/wps/1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:wps="http://www.opengis.net/wps/1.0.0" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wcs="http://www.opengis.net/wcs/1.1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xsi:schemaLocation="http://www.opengis.net/wps/1.0.0 http://schemas.opengis.net/wps/1.0.0/wpsAll.xsd">';
            bufferxml += ' <ows:Identifier>geo:buffer</ows:Identifier>';
            bufferxml += '<wps:DataInputs>';
            bufferxml += '<wps:Input>';
            bufferxml += '<ows:Identifier>geom</ows:Identifier>';
            bufferxml += '<wps:Data><wps:ComplexData mimeType="text/xml; subtype=gml/3.1.1"><![CDATA[' + wkt + ']]></wps:ComplexData></wps:Data>';
            bufferxml += '</wps:Input>';
            bufferxml += '<wps:Input>';
            bufferxml += '<ows:Identifier>distance</ows:Identifier>';
            bufferxml += '<wps:Data><wps:LiteralData>' + buffersize + '</wps:LiteralData></wps:Data>';
            bufferxml += '</wps:Input>';
            bufferxml += '<wps:Input>';
            bufferxml += '<ows:Identifier>capStyle</ows:Identifier>';
            bufferxml += '<wps:Data><wps:LiteralData>Flat</wps:LiteralData></wps:Data>';
            bufferxml += ' </wps:Input>';
            bufferxml += '</wps:DataInputs>';
            bufferxml += '<wps:ResponseForm>';
            bufferxml += '<wps:RawDataOutput mimeType="application/json"><ows:Identifier>result</ows:Identifier></wps:RawDataOutput>';
            bufferxml += '</wps:ResponseForm>';
            bufferxml += '</wps:Execute>';
            return bufferxml;
        }

缺点：geoserver 必须要添加WPS 插件，如果没有就无法实现，所以如果你无法决定你的geoserver里面添加插件，你也没有办法使用

3. 根据postgis st_buffer 获取缓存面，通过设置Fill,从而达到需要的效果
   函数说明

SELECT ST_Buffer(
 ST_GeomFromText(
  'LINESTRING(50 50,150 150,150 50)'
 ), 10, 'endcap=square join=round');

缺点：这需要后台配合