js绘制环形缓冲区- JavaScript JSTS Buffer polyline

本文主要是介绍js绘制环形缓冲区- JavaScript JSTS Buffer polyline，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一，JS缓冲区绘制
参考链接：
https://coderwall.com/p/zb_zdw/buffered-polyline
https://coderwall.com/p/-7eojg/jsts-buffered-polyline-in-route-service-google-maps-v3
https://bjornharrtell.github.io/jsts/doc/api/jsts.operation.buffer.BufferOp.html
需引用第三方库：

getScript("/static/plugin/jsts/javascript.util.min.js"); 
getScript("/static/plugin/jsts/jsts.min.js");

主要参考代码段：

var distance = 10;
geoInput = {type："LineString",coordinates：overviewPathGeo
}; 
var geoReader = new jsts.io.GeoJSONReader();
geoWriter = new jsts.io.GeoJSONWriter(); 
var geometry = geoReader.read(geoInput).buffer(distance);
var geoBuffer = geoWriter.write(geometry);

根据输入的geoInput多段线，计算后返回缓冲区geoBuffer；以一个矩形为例，根据具体代码调试，可看到返回geoBuffer包含多个坐标数组；

geoBuffer.coordinates[0]表示外环，若只绘制外环，显示效果为：

geoBuffer.coordinates[1]表示内环，若只绘制内环，显示效果为：

若采用循环，可实现环形绘制：

if (geoBuffer.type !== 'MultiPolygon') {for(i=0;i<geoBuffer.coordinates.length;i++){geoBuffer.coordinates[i] = geoBuffer.coordinates[i].map(obj._unproject, obj);}obj._geoBuffer.addData(geoBuffer);
}

内外环会自动进行异同分析，绘制效果为：

这篇关于js绘制环形缓冲区- JavaScript JSTS Buffer polyline的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---