百度地图API开发二——实现缓冲区效果

1、目标：实现百度地图缓冲区

2、总体思路：利用开源JSTS、openlayers：先把百度overlay转换成openlayers feature，利用JSTS 转换成jsts geometry，然后进行缓冲构建，再转换成openlayers geometry，最后再构建成百度polygon。

3、主要代码如下：

/***生成折线缓冲区
**@param {Polyline} overlay 折线overlay
*@return {Polygon} 多边形缓冲区
***/
polylineBuffer: function (overlay) {
var coordinates = overlay.getPath();
var coordlist = [];
for (var i = 0; i < coordinates.length; i++) {
var coordinate = coordinates[i];
var coord = worldBd09ToWorldWgs84([[coordinate.lng, coordinate.lat]])[0];//百度地图坐标系转wgs84坐标系
coordlist.push(coord);
}
var geojson = { //构造geojson
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
coordinates: coordlist,
type: "LineString"
}
}
]
};
var format = new ol.format.GeoJSON();
var features = format.readFeatures(geojson, { featureProjection: 'EPSG:4326' });
var parser = new jsts.io.olParser();
var feature = features[0];
var geometry = feature.getGeometry();
// 先把ol geometry坐标系转为3857
geometry = geometry.clone().transform('EPSG:4326', 'EPSG:3857');
//把openlayers geomtry 转换为JSTS geometry
var jstsGeom = parser.read(geometry);
var radius = $('#road_radius').val();
var bufferUnit = $("#road_radius_select").val();//缓冲单位
if (bufferUnit == "kilometer") {
radius = radius * 1000;
}
if (Number(radius) == 0 || radius.length == 0) {
videosearch.fitView([overlay]);
return;
}
// 创建一个buffer geometry
var buffered = jstsGeom.buffer(Number(radius) + 60);

// 把JSTS geometry转换为openlayers geometry
var geometry2 = parser.write(buffered);
//再次把坐标系转换为4326
geometry2 = geometry2.clone().transform('EPSG:3857', 'EPSG:4326');
var coordinates = geometry2.getCoordinates();
//构造百度polygon path
var paths = []
for (var j = 0; j < coordinates[0].length; j++) {
var coordinate = coordinates[0][j];
coordinate = worldWgs84ToBD09ofPoints([coordinate])[0];//wgs84坐标系转百度09坐标系
var coord = new BMap.Point(coordinate[0], coordinate[1]);
paths.push(coord);
}
paths.pop();//去掉最后一个点，破坏掉圆环
var bpolygon = new BMap.Polygon(paths, {
strokeColor: "red", //边线颜色。
fillColor: "blue", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 1, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.3, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
});
videosearch.map.addOverlay(bpolygon);
videosearch.fitView([bpolygon]);//放大到当前视野
return bpolygon;
},