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);
}

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

转载自：https://blog.csdn.net/Tina224243/article/details/81317534