mapbox-gl 如何实现平角/方角缓冲区

gis分享者

已于 2024-07-26 10:24:51 修改

阅读量788

点赞数 45

分类专栏：精品文章标签： mapbox-gl 平角缓冲区

于 2024-07-23 15:12:43 首次发布

本文链接：https://blog.csdn.net/qq_28419035/article/details/140636819

版权

精品专栏收录该内容

33 篇文章 0 订阅

订阅专栏

房间生成墙的时候我需要平角缓冲区，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>