<template>
<div class="map">
<div id="container" style="width: 100%; height: 100%;"></div>
<ul class="drawing-panel">
<!-- <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 "./utils/drawingmanagermin.js"
export default {
data() {
return {
styleOptions: {
strokeColor: "#5E87DB", // 边线颜色
fillColor: "#5E87DB", // 填充颜色。当参数为空时,圆形没有填充颜色
strokeWeight: 2, // 边线宽度,以像素为单位
strokeOpacity: 1, // 边线透明度,取值范围0-1
fillOpacity: 0.2, // 填充透明度,取值范围0-1
},
labelOptions: {
borderRadius: "2px",
background: "#FFFBCC",
border: "1px solid #E1E1E1",
color: "#703A04",
fontSize: "12px",
letterSpacing: "0",
padding: "5px",
},
drawingManager: null,
drawingType:'',
}
},
mounted() {
this.$nextTick(() => {
this.initMap()
})
},
methods: {
initMap() {
var map = new window.BMapGL.Map("container", { enableMapClick: false }); // 创建Map实例
//初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMapGL.Point(113.53048914548623, 22.132325057549032), 15)
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
var navi3DCtrl = new BMapGL.NavigationControl3D(); // 添加3D控件
map.addControl(navi3DCtrl);
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
// 此项设置为初始化地图倾斜角度,不设置该项初始化时地图为2d
map.setTilt(50)
map.setMapStyleV2({ styleJson: stylejson });
this.drawingManager = new BMapGLLib.DrawingManager(map, {
// isOpen: true, // 是否开启绘制模式
enableCalculate: false, // 绘制是否进行测距测面
enableSorption: true, // 是否开启边界吸附功能
sorptiondistance: 20, // 边界吸附距离
circleOptions: this.styleOptions, // 圆的样式
polylineOptions: this.styleOptions, // 线的样式
polygonOptions: this.styleOptions, // 多边形的样式
rectangleOptions: this.styleOptions, // 矩形的样式
labelOptions: this.labelOptions, // label样式
});
},
draw(str) {
var arr = document.getElementsByClassName("bmap-btn");
for (var i = 0; i < arr.length; i++) {
arr[i].style.backgroundPositionY = "0";
}
document.getElementById(str).style.backgroundPositionY = "-52px";
// 进行绘制
if ( this.drawingManager._isOpen && this.drawingManager.getDrawingMode() === str ) {
this.drawingManager.close();
} else {
this.drawingManager.setDrawingMode(str);
this.drawingManager.open();
}
}
}
}
</script>
<style lang="scss" scoped>
@import url('./utils/DrawingManager.min.css');
#map_container {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
.map {
width: 100%;
height: 100%;
}
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
.BMap_mask {
z-index: 999;
}
/* ```` */
ul li {
list-style: none;
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: 0.75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: 0.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;
right: 3.5rem;
top: 2.5rem;
// margin-left: 2.5rem;
padding-left: 0;
border-radius: 0.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-rectangle {
background-position: -325px 0;
}
.drawing-panel .bmap-polygon {
background-position: -260px 0;
}
.drawing-panel .bmap-circle {
background-position: -130px 0;
}
</style>
这个地方需要引入两个源码文件,自己去全选复制后放到对应文件内就行了。
http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css
http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js