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

文章目录

一、前言

一、前言

当我们从室外放大到室内展示室内图层时，我们可能只有房间面的数据，这时要展示房间墙数据，就需要借助工具对房间面进行缓冲，但是数据变动时，我们还要再次进行一下缓冲区生成操作。下面是借助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.0005geoInput = {type: 'LineString',coordinates: line.geometry.coordinates};var geoReader = new jsts.io.GeoJSONReader()geoWriter = new jsts.io.GeoJSONWriter()let mybuffer = jsts.operation.bufferlet 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 = buffetParamvar geom = geoWriter.write(geoReader.read(geoInput))let myBufferOp = mybuffer.BufferOpmyBufferOp._bufParams = buffetParamvar 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>