vue百度地图电子围栏
vue+百度地图实现电子围栏
·
一、index.html引入
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=GnexjLGB8o2AEgCrsKjquXTjTCeXVkgM"></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>
二、所需页面使用
<template>
<div class="area" v-drag v-if="Area">
<div style="height: 40px;">
<div
style="
font-size: 16px;
font-family: 'PingFang SC';
font-style: normal;
font-weight: 500;
line-height: 22px;
color: #ffffff;
float: left;
margin-left: 16px;
margin-top: 20px;
height: 22px;
"
>
新增警戒区
</div>
<div
style="
float: right;
width: 3%;
height: 3%;
color: #fff;
cursor: pointer;
margin-top: 20px;
margin-right: 26px;
"
@click="close"
>
<Icon custom="i-icon i-icon-shop_fill" type="md-close" size="24"/>
</div>
</div>
<div class="fillColor">
<div style="width: 100%; height: 70px;">
<span>填充:</span>
<ColorPicker @on-change="changeColor1" alpha v-model="warnRegionList.fillColor" recommend/>
<span>边框:</span>
<ColorPicker @on-change="changeColor2" alpha v-model="warnRegionList.borderColor" recommend/>
</div>
<div style=" width: 100%; height: 50px;">
<span>名称:</span>
<Input maxlength="10" v-model="warnRegionList.warnRegionName" placeholder="请输入名称"
style="width: 320px;"></Input>
</div>
<div>
<span style="margin-left: 46px;">经纬度:</span>
<Input v-model="warnRegionList.latAndLon" disabled type="textarea" :rows="6" style="width: 320px;"></Input>
</div>
<div style="margin-left: 175px;margin-top: 50px;">
<Button style="background: #ECECEC; color: #333333" @click="cancel">取消</Button>
<Button type="primary" style="margin-left: 30px;" @click="savejwd()">确定</Button>
</div>
</div>
</div>
</template>
export default {
data() {
return{
p:{},
Area:false,//警戒区编辑时出现的弹窗
color1: '',//填充色
color2: '',//边框色
jwd: [],//编辑围栏拿到的经纬度数组
latlng: [],//拿到数组里的经纬度数据
warnRegionList:
{
borderColor: "",//边框色
bridgeId: '',
fillColor: "",//填充色
// isDelete: true,
latAndLon: "",//经纬度
transparency: 0,//透明度
updateOpId: 0,
updateTime: "",
warnRegionId: '',
warnRegionName: ""//警戒区名称
},
styleOptions: {
strokeColor: '', //边线颜色。
fillColor: '', //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
},
}
},
methods:{
/**
* 电子围栏编辑点击打开
*/
drawFencing() {
this.Area = true;
this.draw()
},
draw() {
let that = this;
var labelOptions = {
borderRadius: '2px',
background: '#FFFBCC',
border: '1px solid #E1E1E1',
color: '#703A04',
fontSize: '12px',
letterSpacing: '0',
padding: '5px'
};
//实例化鼠标绘制工具
var drawingManager = new BMapGLLib.DrawingManager(this.map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMapGL.Size(25, 5), //偏离值
},
enableCalculate: true, // 绘制是否进行测距测面
circleOptions: this.styleOptions, //圆的样式
polylineOptions: this.styleOptions, //线的样式
polygonOptions: this.styleOptions, //多边形的样式
rectangleOptions: this.styleOptions //矩形的样式
});
//获取区域经纬度
var overlaycomplete = function (e) {
that.jwd.push(e.overlay.points);
that.jwd[0].forEach((item) => {
that.latlng.push(item.latLng)
})
that.warnRegionList.latAndLon = JSON.stringify(that.latlng)
let a = document.getElementsByClassName('BMapGLLib_Drawing BMap_noprint anchorTL')
//遍历删除电子围栏的标识
for (let i = 0; i < a.length; i++) {
a[i].attributes[1].nodeValue = ""
}
};
// 添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
},
//关闭电子围栏保存数据的窗口
cancel() {
this.Area = false;
this.warnRegionList.fillColor = '';
this.warnRegionList.borderColor = '';
this.warnRegionList.warnRegionName = '';
this.warnRegionList.latAndLon = '';
this.styleOptions.strokeColor = '';
this.styleOptions.fillColor = '';
let a = document.getElementsByClassName('BMapGLLib_Drawing BMap_noprint anchorTL')
//遍历删除电子围栏的标识 就是画电子围栏的按钮 防止每次编辑时画框框的按钮被覆盖掉
for (let i = 0; i < a.length; i++) {
a[i].attributes[1].nodeValue = ""
}
this.$Message.info('取消编辑!')
},
//保存经纬度
savejwd() {
let a = document.getElementsByClassName('BMapGLLib_Drawing BMap_noprint anchorTL')
// console.log(a)
//遍历删除电子围栏的标识 删除电子围栏按钮 防止每次编辑时画框框的按钮被覆盖掉
for (let i = 0; i < a.length; i++) {
a[i].attributes[1].nodeValue = ""
}
let data = JSON.parse(JSON.stringify(this.warnRegionList));
saveOrUpdateWarnRegionBatchAPI(data).then((res) => {
if (res.success) {
this.$Message.info('保存成功!');
this.latAndLon = JSON.parse(res.result.latAndLon);
}
})
this.warnRegionList.fillColor = '';
this.warnRegionList.borderColor = '';
this.warnRegionList.warnRegionName = '';
this.warnRegionList.latAndLon = '';
this.styleOptions.strokeColor = '';
this.styleOptions.fillColor = '';
this.Area = false;
this.latlng = [];
this.jwd = []
},
/**
* 已知经纬度画区域
*/
//获取所有警戒区
getAllWarnRegion() {
getAllWarnRegionAPI().then((res) => {
if (res.success) {
let polArry = [];
let that = this;
res.result.forEach(item => {
item.latAndLon = JSON.parse(JSON.stringify(item.latAndLon))
let jsonArray = eval(item.latAndLon);
jsonArray.forEach((i) => {
that.p = new BMapGL.Point(i.lng, i.lat);
polArry.push(that.p);
})
that.styleOptions.fillColor = item.fillColor;
that.styleOptions.strokeStyle = item.strokeStyle;
that.polygon = new BMapGL.Polygon(polArry, that.styleOptions);
that.map.addOverlay(this.polygon);
polArry = []
});
}
})
},
//清除图层 每次删除一个电子围栏时清除地图上所有图层，在调用获取所有区域画出电子围栏，可以调用this.getAllWarnRegion()
clear() {
this.map.clearOverlays()
},
},
mounted(){
this.getAllWarnRegion();
}
}
百度地图电子围栏自带五个画图的框，我只保留一个
/deep/ .BMapGLLib_Drawing .BMapGLLib_polyline {
display: none !important;
}
/deep/ .BMapGLLib_Drawing_panel {
margin-left: 912px !important;
margin-top: 90px !important;
}
/deep/ .BMapGLLib_Drawing .BMapGLLib_marker {
display: none !important;
}
/deep/ .BMapGLLib_Drawing .BMapGLLib_circle {
display: none !important;
}
/deep/ .BMapGLLib_Drawing .BMapGLLib_rectangle {
display: none !important;
}
剩一个
成果展示
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)