参考
实现步骤
index.html引入百度API
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=百度密钥"></script>
<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>
vue实现相关代码
效果图
<template>
<div>
<div id="container"></div>
<ul class="drawing-panel">
<li class="bmap-btn bmap-marker" id="marker" @click="draw('marker')"></li>
<li class="bmap-btn bmap-polyline" id="polyline" @click="draw('polyline')"></li>
<li class="bmap-btn bmap-rectangle" id="rectangle" @click="draw('rectangle')"></li>
<li class="bmap-btn bmap-polygon" id="polygon" @click="draw('polygon')"></li>
<li class="bmap-btn bmap-circle" id="circle" @click="draw('circle')"></li>
</ul>
</div>
</template>
<script>
import {
Message,
MessageBox,
Notification
} from 'element-ui'
export default {
name: 'baiduMap',
data: function() {
return {
map: '',
drawingManager: null,
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.map = new BMapGL.Map("container", {
enableMapClick: false
}); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var styleOptions = {
strokeColor: '#5E87DB', // 边线颜色
fillColor: '#5E87DB', // 填充颜色。当参数为空时,圆形没有填充颜色
strokeWeight: 2, // 边线宽度,以像素为单位
strokeOpacity: 1, // 边线透明度,取值范围0-1
fillOpacity: 0.2 // 填充透明度,取值范围0-1
};
var labelOptions = {
borderRadius: '2px',
background: '#FFFBCC',
border: '1px solid #E1E1E1',
color: '#703A04',
fontSize: '12px',
letterSpacing: '0',
padding: '5px'
};
// 实例化鼠标绘制工具
this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
// isOpen: true, // 是否开启绘制模式
enableCalculate: false, // 绘制是否进行测距测面
enableSorption: true, // 是否开启边界吸附功能
sorptiondistance: 20, // 边界吸附距离
circleOptions: styleOptions, // 圆的样式
polylineOptions: styleOptions, // 线的样式
polygonOptions: styleOptions, // 多边形的样式
rectangleOptions: styleOptions, // 矩形的样式
labelOptions: labelOptions, // label样式
});
var thi = this;
this.drawingManager.addEventListener('polygoncomplete', function(e, overlay) {
console.info('polygoncomplete', e.getPath())
thi.drawingManager.close();
});
this.drawingManager.addEventListener('polylinecomplete', function(e, overlay) {
console.info('polylinecomplete', e.getPath())
thi.drawingManager.close();
});
this.drawingManager.addEventListener('rectanglecomplete', function(e, overlay) {
console.info('rectanglecomplete', e.getPath())
thi.drawingManager.close();
});
this.drawingManager.addEventListener('circlecomplete', function(e, overlay) {
console.info('circlecomplete', e.getPath())
thi.drawingManager.close();
});
this.drawingManager.addEventListener('markercomplete', function(e, overlay) {
console.info('markercomplete', e.getPosition())
thi.drawingManager.close();
});
},
draw(e) {
switch (e) {
case 'marker': {
var drawingType = BMAP_DRAWING_MARKER;
break;
}
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;
}
}
let overlays = this.map.getOverlays(); // 获取所有覆盖物(标记点)
for (let i = 0; i < overlays.length; i++) {
this.map.removeOverlay(overlays[i]); // 如果有,则移除该覆盖物
}
// 进行绘制
if (this.drawingManager._isOpen && this.drawingManager.getDrawingMode() === drawingType) {
this.drawingManager.close();
} else {
this.drawingManager.setDrawingMode(drawingType);
this.drawingManager.open();
}
},
}
};
</script>
<style scoped>
.head {
margin-left: 200px;
width: 100px;
}
.baiduMap {
width: 100%;
height: 800px;
margin: 0 auto;
overflow: hidden;
}
.ivu-form-item {
display: inline-block;
width: 40%;
}
.bm-view>div {
width: 100%;
height: 700px !important;
}
::v-deep .anchorBL {
display: none !important;
}
body,
html,
#container {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
ul li {
list-style: none;
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: .75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: .25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.drawing-panel {
z-index: 999;
position: fixed;
bottom: 3.5rem;
margin-left: 2.5rem;
padding: 0;
border-radius: .25rem;
height: 47px;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.bmap-btn {
border-right: 1px solid #d2d2d2;
float: left;
width: 64px;
height: 100%;
background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
cursor: pointer;
}
.drawing-panel .bmap-marker {
background-position: -65px 0;
}
.drawing-panel .bmap-polyline {
background-position: -195px 0;
}
.drawing-panel .bmap-rectangle {
background-position: -325px 0;
}
.drawing-panel .bmap-polygon {
background-position: -260px 0;
}
.drawing-panel .bmap-circle {
background-position: -130px 0;
}
</style>
小结
这里做了个简单实现示例,限制一次标记一种图形 并监听完成事件,从而获取数据坐标点。