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:英里
缺点:缓存出来的面两端都是圆角,无法设置成为平角,如果你需要平角的线段那么这个方法将不是你的选择
- 根据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里面添加插件,你也没有办法使用
- 根据postgis st_buffer 获取缓存面,通过设置Fill,从而达到需要的效果
函数说明
SELECT ST_Buffer(
ST_GeomFromText(
'LINESTRING(50 50,150 150,150 50)'
), 10, 'endcap=square join=round');
缺点:这需要后台配合