房间生成墙的时候我需要平角缓冲区,turf 生成的缓冲区为圆角,无法生成平角缓冲区,为解决此问题,我们可以结合jsts框架生成平角缓冲区。
下图为turf生成的平角缓冲区
mapbox-gl 集合jsts框架生成平角缓冲区样例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsts-线-平角缓冲区</title>
<script src="lib/jquery-3.4.1.js"></script>
<link href="lib/mapbox-gl/mapbox-gl.css" rel="stylesheet">
<script src="lib/mapbox-gl/mapbox-gl.js"></script>
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/plugins/mapbox-gl-utils/0.39.0/mapbox-gl-utils.js"></script>
<script src='lib/plugins/turf/6.3.0/turf.min.js'></script>
<!--<script src='https://lib.baomitu.com/jsts/1.6.2/jsts.min.js'></script>-->
<script src='lib/plugins/jsts/jsts.min.js'></script>
</head>
<style>
html, body {
height: 100%;
margin: 0px;
}
li, ul {
list-style: none;
}
#map {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="map">
</div>
</body>
<script type="text/javascript">
mapboxgl.accessToken = '****';
var map = new mapboxgl.Map({
container: 'map',
zoom: 12,
minZoom: 4,
center: [113.53033743016164, 34.81470384732482],
style: 'mapbox://styles/mapbox/light-v11'
})
U.init(map)
const line = turf.lineString([
[113.52484724378377, 34.82807637568719], //中长末有弧度
[113.53969111255441, 34.818349111077715],
[113.53505640118996, 34.80933920954946],
[113.52687054416015, 34.80889004156351]
])
var distance = 0.0005
geoInput = {
type: 'LineString',
coordinates: line.geometry.coordinates
};
var geoReader = new jsts.io.GeoJSONReader()
geoWriter = new jsts.io.GeoJSONWriter()
let mybuffer = jsts.operation.buffer
let buffetParam = new jsts.operation.buffer.BufferParameters()
// 设置连接点和终点样式,关键代码
buffetParam.setEndCapStyle(2)
buffetParam.setJoinStyle(2)
let geoInputRead = geoReader.read(geoInput)
mybuffer.BufferParameters = buffetParam
var geom = geoWriter.write(geoReader.read(geoInput))
let myBufferOp = mybuffer.BufferOp
myBufferOp._bufParams = buffetParam
var bufferOp = myBufferOp.bufferOp(geoInputRead, distance, buffetParam)
var geoBuffer = geoWriter.write(bufferOp)
let Polys = []
map.on('load', () => {
Polys.push({
geometry: geoBuffer,
'type': 'Feature'
})
map.U.addGeoJSON('buffer', {
'type': 'FeatureCollection',
'features': Polys
})
map.U.addFill('buffer', 'buffer', {
'fill-color': 'blue'
})
map.U.addGeoJSON('route', {
'type': 'FeatureCollection',
'features': [line]
})
map.U.addLine('route', 'route', {
'line-color': 'red',
'line-width': 1,
'line-opacity': 1,
// 'line-dasharray': [4, 2],
'line-join': 'round',
'line-cap': 'round'
})
})
</script>
</html>
生成的平角缓冲区如下图
希望对您有帮助,创作不易,谢谢支持~