上篇写到辅助工具，由于官方提供js写的方法，我们简单用vue来实现
1.引入需要的文件
<link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
<script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
2.html 四个图标为精灵图片 需要点击的时候修改样式
<ul class="drawing-panel" v-if="pageType == 1 || pageType == 2">
<li
class="bmap-btn"
id="marker"
:style="{ backgroundPositionY: activeIndex == 4 ? '-52px' : '0px' }"
@click="addDiviceMarker"
></li>
<li
class="bmap-btn bmap-polyline"
:style="{ backgroundPositionY: activeIndex == 0 ? '-52px' : '0px' }"
id="polyline"
@click="toolDraw('polyline', 0)"
></li>
<li
class="bmap-btn bmap-rectangle"
:style="{ backgroundPositionY: activeIndex == 1 ? '-52px' : '0px' }"
id="rectangle"
@click="toolDraw('rectangle', 1)"
></li>
<li
class="bmap-btn bmap-polygon"
:style="{ backgroundPositionY: activeIndex == 2 ? '-52px' : '0px' }"
id="polygon"
@click="toolDraw('polygon', 2)"
></li>
<li
class="bmap-btn bmap-circle"
:style="{ backgroundPositionY: activeIndex == 3 ? '-52px' : '0px' }"
id="circle"
@click="toolDraw('circle', 3)"
></li>
</ul>
3.点击事件
toolDraw(type, index) {
this.activeIndex = index;
switch (type) {
case "polyline": {
var drawingType = BMAP_DRAWING_POLYLINE;
break;
}
case "rectangle": {
var drawingType = BMAP_DRAWING_RECTANGLE;
break;
}
case "polygon": {
var drawingType = BMAP_DRAWING_POLYGON;
break;
}
case "circle": {
var drawingType = BMAP_DRAWING_CIRCLE;
break;
}
}
// 实例化鼠标绘制工具
var drawingManager = new BMapGLLib.DrawingManager(this.map, {
enableCalculate: true, // 绘制是否进行测距测面
enableSorption: true, // 是否开启边界吸附功能
sorptiondistance: 20, // 边界吸附距离
enableGpc: true, // 是否开启延边裁剪功能
circleOptions: styleOptions, // 圆的样式
polylineOptions: styleOptions, // 线的样式
polygonOptions: styleOptions, //多边形
rectangleOptions: styleOptions, //矩形
labelOptions: labelOptions, //label
});
// 进行绘制
if (
drawingManager._isOpen &&
drawingManager.getDrawingMode() === drawingType
) {
drawingManager.close();
} else {
drawingManager.setDrawingMode(drawingType);
drawingManager.open();
}
// 绘制完成后获取相关的信息(面积等
let that = this;
drawingManager.addEventListener("overlaycomplete", function (e) {
e.overlay.points.forEach((point) => {
let obj = {
name: "",
longitude: point.latLng.lng + "",
latitude: point.latLng.lat + "",
projectid: "170",
};
that.polylineObj.list.push(JSON.stringify(obj));
});
that.polylineObj.userid = that.userid;
console.log(that.polylineObj);
let param = that.jsToFormData(that.polylineObj);
insertline(param).then((res) => {
console.log(res);
});
console.log(e);
});
},
