vue引入百度地图 地图控件和绘图工具（电子围栏）
一、参考文档
1、官方文档：http://lbsyun.baidu.com/index.php?title=jspopular/guide/show
2、百度地图JavaScript API v2.0类参考：（方法很细）
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a6b0
二、代码：
1、HTML代码
重置
圆半径(m)：
圆面积(m²)： (m²)
多边形面积(m²)：
2、JS代码
引入百度地图链接和秘钥
3、JS代码
import '@/assets/js/bmap/DrawingManager_min.js'
import '@/assets/js/bmap/DrawingManager_min.css'
export default {
data(){
return{
mapObj: null, //地图
drawingManager:null, //鼠标绘图工具
overlays:[],//清除底层图案
show:false,
circle:null,//圆形
radius:'', //半径
circlecenter:[],//圆心坐标
circleArea:'', //面积
polygon:null, //多边形
polygonPath:[],//获取多边形点坐标
polygonArea:'', //面积
}
},
created(){
this.loadBMapScript();
},
mounted(){
this.initMap();
//初始化加载绘图工具
window.setTimeout(()=>{
this.showDraw()
}, 100);
},
methods:{
//加载在线文件
loadBMapScript () {
let script = document.createElement('script');
script.src = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js';
document.body.appendChild(script);
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css';
document.body.appendChild(link);
},
//初始化地图
initMap: function () {
let self = this;
let map = utils.bmap.initMap('bmap-box');
// 创建点坐标
let point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
//鱼骨图
map.addControl(new BMap.NavigationControl());
//创建信息窗口
//let infoWindow = new BMap.InfoWindow();
//map.openInfoWindow(infoWindow);
//添加地图类型控件（右上角）
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]})
);
self.mapObj = map;
},
//显示绘制工具
showDraw(){
let self = this;
self.show=true;
self.clearAll();
//画图样式
let styleOptions = {
strokeColor:"#f00", //边线颜色。
fillColor:"#fff", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 1, //边线的宽度，以像素为单位。
strokeOpacity: 1, //边线透明度，取值范围0 - 1。
fillOpacity: 0.85, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
};
//生成鼠标绘制工具
self.drawingManager = new BMapLib.DrawingManager(self.mapObj , {
isOpen: false,
enableDrawingTool:true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT,
offset: new BMap.Size(5, 50),
/*drawingModes:[
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_CIRCLE
]*/
},
//图形默认样式
circleOptions: styleOptions,
polylineOptions: styleOptions,
polygonOptions: styleOptions,
rectangleOptions: styleOptions
});
//判断图案类型
let overlaycomplete = function(e){
//清除底层图案
self.mapObj.clearOverlays();
//判断画图的类型
if(e.drawingMode=='circle'){
self.clearData();
self.radius=e.overlay.getRadius();//圆半径
self.circlecenter=e.overlay.getCenter(); //圆心坐标
self.circleArea = 3.14*(self.radius*self.radius)
self.drawingManager.close();
//增加圆
self.circle = new BMap.Circle(self.circlecenter,self.radius,
{strokeColor:"red", strokeWeight:1, strokeOpacity:0.85});
self.mapObj.clearOverlays();
self.mapObj.addOverlay(self.circle);
//编辑圆
self.circle.enableEditing();
self.circle.addEventListener("lineupdate",function(e){
self.circlecenter=e.target.point; //圆心
self.radius=e.target.ya; //半径
self.circleArea = 3.14*(self.radius*self.radius); //面积
});
}else if(e.drawingMode=='polygon'||e.drawingMode=='rectangle'){
//画多边形
self.clearData();
self.polygonPath=e.overlay.getPath(); //获取多边形路径点
self.drawingManager.close();
self.mapObj.clearOverlays();
//增加多边形，
self.polygon = new BMap.Polygon(self.polygonPath,
{strokeColor:"red", strokeWeight:1, strokeOpacity:0.85});
self.mapObj.clearOverlays();
self.mapObj.addOverlay(self.polygon);
//编辑多边形
self.polygon.enableEditing();
self.polygon.addEventListener("lineupdate",function(e){
self.polygonArea = ""; //面积
//alert(e.target.Nc[0].tb.lng);
console.log(e.target.Nc[0].tb.lng)
});
}else if(e.drawingMode=='marker'){
//显示mark点
self.clearData();
self.drawingManager.close();
self.mapObj.clearOverlays();
let point=e.overlay.point;
let marker = new BMap.Marker(point);// 创建标注
self.mapObj.clearOverlays();
self.mapObj.addOverlay(marker);
marker.enableDragging();
}else if(e.drawingMode=='polyline'){
self.clearData();
self.drawingManager.close();
self.mapObj.clearOverlays();
let polyPath = e.overlay.getPath();
let polyline= new BMap.Polyline(polyPath,{strokeColor:"red", strokeWeight:1, strokeOpacity:0.85})
self.mapObj.clearOverlays();
self.mapObj.addOverlay(polyline);
polyline.enableEditing()
}
};
//监听画图方法
self.drawingManager.addEventListener('overlaycomplete', overlaycomplete);
},
//清空坐标点
clearData(){
let self=this;
self.radius=''; //半径
self.circleArea='';
self.polygonArea="";
},
//重置方法
clearAll(){
let self=this;
self.clearData();
self.mapObj.clearOverlays();
for(let i = 0; i < self.overlays.length; i++){
self.mapObj.clearOverlays(self.overlays[i]);
}
self.overlays.length = 0;
},
}
}
三、注意事项
1、初始化鼠标绘制工具，一直报错，这段代码放在mounted(){}方法里，没办法用了延迟加载
//初始化加载绘图工具
window.setTimeout(()=>{
this.showDraw()
}, 100);
2、需要注意的是drawingToolOptions可选参数里面的drawingModes，工具栏上可以选择出现的绘制模式,将需要显示的DrawingType以数组型形式传入，如[BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE] 将只显示画点和画圆的选项，总共有以下五个常量，可根据自己情况选择是否添加显示
BMAP_DRAWING_MARKER 画点
BMAP_DRAWING_CIRCLE 画圆
BMAP_DRAWING_POLYLINE 画线
BMAP_DRAWING_POLYGON 画多边形
BMAP_DRAWING_RECTANGLE 画矩形
//生成鼠标绘制工具
self.drawingManager = new BMapLib.DrawingManager(self.mapObj , {
isOpen: false,
enableDrawingTool:true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT,
offset: new BMap.Size(5, 50),
// 在这里配置你需要的画图工具
/*drawingModes:[
BMAP_DRAWING_POLYGON,
BMAP_DRAWING_CIRCLE
]*/
},
//图形默认样式
circleOptions: styleOptions,
polylineOptions: styleOptions,
polygonOptions: styleOptions,
rectangleOptions: styleOptions
});
3、加载外联的js和css，需要把这两个文件下载到本地，两种方式都加上
import '@/assets/js/bmap/DrawingManager_min.js'
import '@/assets/js/bmap/DrawingManager_min.css'
loadBMapScript () {
let script = document.createElement('script');
script.src = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js';
document.body.appendChild(script);
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css';
document.body.appendChild(link);
},
4、画圆形
首先、清除地图上的图形；在添加
self.mapObj.clearOverlays();
self.mapObj.addOverlay(self.circle);
获取圆心坐标和半径（e.overlay.getRadius()）
self.radius=e.overlay.getRadius();//圆半径
self.circlecenter=e.overlay.getCenter(); //圆心坐标
self.circleArea = 3.14*(self.radius*self.radius) //圆的面积
self.drawingManager.close(); //关闭绘图工具
编辑圆
//编辑圆
self.circle.enableEditing(); // 开启圆形编辑器
self.circle.addEventListener("lineupdate",function(e){ //监听编辑圆形的事件
self.circlecenter=e.target.point; //圆心
self.radius=e.target.ya; //半径
self.circleArea = 3.14*(self.radius*self.radius); //面积
});
其他类型的编辑工具，类似方法，同上，一定要多看文档。