vue引入百度地图，并绘制点线面
- vue引入百度地图
- vue在百度地图中渲染点，线，面
- vue在百度地图中手动绘制点，线，面
vue引入百度地图
1.首先在public文件夹下得index.html文件中的head里面通过src引入百度api文件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
<link href="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
<script type="text/javascript" src="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
<script type="text/javascript" src="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js"></script>
2.在需要用到百度地图的页面准备一个container容器，用来初始化地图
<div class="container" id="container" ref="containers">
3.在js里面写入初始化代码函数，并在mounted函数中进行回调
methods:{
//初始化地图方法
createBDmap() {
var map = new BMapGL.Map("container", { enableMapClick: false }); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
map.centerAndZoom(new BMapGL.Point(114.xxx, 34.xxx), 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
this.map = map
},
}
mounted(){
//页面渲染时回调执行
this.createBDmap()
}
vue在百度地图中渲染点，线，面
1.添加一个点
addMarker(data) { //date表示传进来的数据，包括坐标、图标、文字等信息
let _this = this
// this.addLabel(data)
data.markBaiduLocation = _this.filterPoint(data.markBaiduLocation) //自定义方法，对坐标进行过滤，弄成百度需要的格式。
var myIcon = new BMapGL.Icon(data.iconUrl, new BMapGL.Size(25, 25)); //定义点位图标的样式大小，url地址，如不设置自动使用默认百度点样式
var point = new BMapGL.Point(data.markBaiduLocation[0].markLongitude, data.markBaiduLocation[0].markLatitude);
var marker = new BMapGL.Marker(point, {
icon: myIcon
});
_this.map.addOverlay(marker); //添加点到地图上
_this.addLabel(data.markBaiduLocation[0], data.title) //添加点的文字标注
marker.addEventListener("click", function () { //为点添加点击事件的监听
//在这里写入点击后进行的操作
})
},
2.添加一条线
addLine(data) { //date表示传进来的数据，包括坐标、图标、文字等信息
let _this = this
data.markBaiduLocation = _this.filterPoint(data.markBaiduLocation) //与上述一样，对其坐标点进行过滤操作。（原数据字符格式，转化后为数组格式）
var lineArray = [] // 线的点的集合
data.markBaiduLocation.forEach(item => {
lineArray.push(new BMapGL.Point(item.markLongitude, item.markLatitude))
})
var polyline = new BMapGL.Polyline(lineArray, {
strokeColor: "blue", //线条颜色
strokeWeight: 6, //线条宽度
strokeOpacity: 0.5, //边框透明度
// strokeTexture: { // width/height 需要是2的n次方
// url: data.iconUrl,
// width: 16,
// height: 64
// },
});
_this.map.addOverlay(polyline) //将绘制好的折线添加到地图上
_this.addLabel(data.markBaiduLocation[1], data.title) //添加文字标注
polyline.addEventListener("click", function () {//为线添加点击事件的监听
//在这里写入点击后进行的操作
})
}
3.添加一个多边形
addGon(data) {
let _this = this
let array = [] //计算中心点方法需要的数组
data.markBaiduLocation = _this.filterPoint(data.markBaiduLocation)
var lineArray = [] // 面的点的集合
data.markBaiduLocation.forEach(item => {
lineArray.push(new BMapGL.Point(item.markLongitude, item.markLatitude))
})
data.markBaiduLocation.forEach((item) => {
array.push([item.markLatitude, item.markLongitude])
})
let latArray = _this.mapGetCenter(array) //计算出中心点,用来将文字标注放置中心
var polygon = new BMapGL.Polygon(lineArray, {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.3,
// strokeTexture: { // width/height 需要是2的n次方
// url: data.iconUrl,
// width: 16,
// height: 64
// },
});
_this.map.addOverlay(polygon) //将绘制好的添加到地图上
_this.addLabel01(latArray, data.title) //添加文字标注
polygon.addEventListener("click", function () {//为线添加点击事件的监听
//在这里写入点击后进行的操作
})
},
4.添加文字标注
addLabel(data, title) {
var _this = this
let x = title.length * 10 / 2 + 5 //计算文字偏移量（这个可有可无，看具体情况，小小的美化罢了）
var point = new BMapGL.Point(data.markLongitude, data.markLatitude);
var content = title
var label = new BMapGL.Label(content, { // 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(-x, 15) // 设置标注的偏移量
})
_this.map.addOverlay(label) //添加到地图上
label.setStyle({ // 设置label的样式
color: '#000',
fontSize: '14px',
fontWeight: '600',
border: '0'
})
},
vue在百度地图中手动绘制点，线，面
1.创建绘制工具
draw(e) { //传入绘制类型，eg:marker，polyline，polygon
var _this = this
//设置绘制工具样式
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样式
});
switch (e) {
case 'marker': {
_this.drawingType = BMAP_DRAWING_MARKER;
break;
}
case 'polyline': {
_this.drawingType = BMAP_DRAWING_POLYLINE;
break;
}
case 'polygon': {
_this.drawingType = BMAP_DRAWING_POLYGON;
break;
}
}
// 进行绘制
if (_this.drawingManager._isOpen && _this.drawingManager.getDrawingMode() === drawingType) {
_this.drawingManager.close();
} else {
_this.drawingManager.setDrawingMode(_this.drawingType);
_this.drawingManager.open();
}
},
2.监听绘制事件
// 监听绘制完成事件
_this.drawingManager.addEventListener('overlaycomplete', function (e) {
_this.drawingManager.close() // 成功后关闭绘制工具
let type = e.drawingMode
if (e.drawingMode === 'marker') {
//写入操作
} else if (e.drawingMode === 'polyline') {
//写入操作
} else if (e.drawingMode === 'polygon') {
//写入操作
}
}
以上内容就是在vue中添加点线面的所有方法，以及手动绘制的一些操作，如果还有疑惑的小伙伴，请移步至百度地图api中进行查看
