mapbox-gl 实现房间面生成墙（借助jsts）

news2024/12/27 11:48:21

文章目录

一、前言
二、面生成墙方法示例

一、前言

当我们从室外放大到室内展示室内图层时，我们可能只有房间面的数据，这时要展示房间墙数据，就需要借助工具对房间面进行缓冲，但是数据变动时，我们还要再次进行一下缓冲区生成操作。下面是借助jsts纯前端方式实现面缓冲，快速房间面生成墙，面数据变动时，调取方法即可获取墙数据。
在这里插入图片描述

二、面生成墙方法示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面生成墙</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 = 'pk.eyJ1IjoibWF4aWFvZmVpIiwiYSI6ImNrNDluNGl1dzA2a2YzdHBjbWZjZms3eHIifQ.c2QLQt5ZrUbOavbZUdRXMA';
  var map = new mapboxgl.Map({
    container: 'map',
    zoom: 12,
    minZoom: 4,
    center: [113.53033743016164, 34.81470384732482],
    style: 'mapbox://styles/mapbox/light-v11',
    antialias: true
  })
  U.init(map)
  const line = turf.lineString([
    [113.52687054416015, 34.82807637568719], //中长末有弧度
    [113.53969111255441, 34.828349111077715],
    [113.53965640118996, 34.80933920954946],
    [113.52687054416015, 34.80889004156351],
    [113.52687054416015, 34.82807637568719]
  ])
  let isbh = turf.booleanClockwise(line)
  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(jsts.operation.buffer.BufferParameters.CAP_SQUARE)
  buffetParam.setJoinStyle(jsts.operation.buffer.BufferParameters.JOIN_MITRE)
  // 生成单边缓冲区，末端不闭合
  // buffetParam.setSingleSided(true)
  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.addGeoJSON('buffer', intersection)
    map.U.addFill('buffer', 'buffer', {
      'fill-color': 'blue'
    })

    let nbgeometry = JSON.parse(JSON.stringify(geoBuffer))
    nbgeometry.coordinates = _.slice(nbgeometry.coordinates, 1, 2)
    // 内环为房间
    map.U.addGeoJSON('buffer-nb', {
      'type': 'FeatureCollection',
      'features': [{
        geometry: nbgeometry,
        'type': 'Feature'
      }]
    })
    // map.U.addGeoJSON('buffer', intersection)
    map.U.addFill('buffer-nb', 'buffer-nb', {
      'fill-color': 'red'
    })

    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>