共计 7249 个字符，预计需要花费 19 分钟才能阅读完成。
成果展现：
性能点：
- 搜寻地点定位
- 绘制多边形（可删除、二次编辑形态）
- 定位到已绘制好的图形
- 一键革除所有图形
- 确认保留图形数据
因为做的我的项目很多都会波及到一些地位的记录或者我的项目范畴的记录，所以常常须要做相似的性能，个别我都是应用百度地图的鼠标绘制工具，这里做个记录，也心愿能帮到有须要的敌人们~
第一步必定是引入百度地图，这一部分下次有工夫专门写一篇。
我的项目需要：是点击按钮后进入到绘制我的项目范畴的页面。
<!-- 我的项目弹窗 -->
<el-dialog
:title="dialogType_Project ==='edit'?' 批改我的项目 ':' 新建我的项目 '":visible.sync="dialogVisible_Project"width="600px":close-on-press-escape="false":close-on-click-modal="false":show-close="false"class="dialog-box"
>
<el-form
ref="createForm_Project"
:model="createForm_Project"
label-width="120px"
>
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="createForm_Project.projectName" clearable></el-input>
</el-form-item>
<el-form-item label="我的项目计划范畴" prop="projectBoundary">
<el-button :type="overlays.length?'success':'primary'"@click="setMap()"size="small">
<!-- 抉择我的项目计划范畴 -->
<span>{{overlays.length?'查看我的项目计划范畴':'绘制我的项目计划范畴'}}</span>
</el-button>
<!-- <el-input v-model="createForm_Project.projectBoundary" clearable></el-input> -->
</el-form-item>
<el-form-item>
<el-button type="primary" @click="confirmCreate"> 提交 </el-button>
<el-button @click="handleClose"> 勾销 </el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 我的项目计划范畴弹窗 -->
<el-dialog
:visible.sync="boundaryMapVisible"
:fullscreen="true"
width="600px"
:close-on-click-modal="false"
class="dialog-box"
title="绘制我的项目计划范畴"
>
<el-form ref="boundaryForm" :model="boundaryForm">
<el-row class="searchform">
<el-col :span="5" id="r-result">
<el-form-item>
<el-input v-model.trim="address_detail" placeholder="请输出地点形容关键字" clearable id="suggestId">
<el-button slot="append" icon="el-icon-search" @click="setPlace"></el-button>
</el-input>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</el-form-item>
</el-col>
<el-col :span="7" :offset="1">
<!-- <el-button @click="overlaysLength" type="primary"> 定位 </el-button> -->
<el-button @click="clearAll" type="danger"> 革除 </el-button>
<el-button type="success" @click="closeMap()"> 确定 </el-button>
</el-col>
</el-row>
</el-form>
<div class="mymap-box">
<div id="mymap" ></div>
<!-- 地图容器 -->
</div>
</el-dialog>JS 局部
export default {data(){
return{
// 我的项目
dialogType_Project:'add',
dialogVisible_Project:false,
createForm_Project:{
projectName:'',
projectBoundary:[], // 我的项目计划范畴},
// 我的项目计划范畴
boundaryMapVisible:false,
address_detail: null,
serachMarker: null,
editMarker: null,
removeMarker: null,
boundaryForm:{},
mymap:null,
overlays:[],}
},
methods:{
// 我的项目编辑 =》我的项目计划范畴
/** 地图弹窗 */
setMap() {
this.address_detail = "";
this.boundaryMapVisible = true;
// 在这里应用 $nextTick 初始化地图插件即可
if (this.mymap == null) {this.$nextTick(async () => {this.mapInit();
this.showOverlays();});
} else {// this.mymap.clearOverlays()
this.showOverlays()
if (this.serachMarker) {this.mymap.removeOverlay(this.serachMarker);
}
this.overlaysLength();}
},
/** 地图初始化（加载百度地图）*/
mapInit() {
const that = this;
that.mymap = this.$mapUtils.bdMapInnit("mymap");
// 实例化鼠标绘制工具
let drawingManager = new BMapLib.DrawingManager(that.mymap, {
isOpen: false, // 是否开启绘制模式
enableDrawingTool: true, // 是否显示工具栏
drawingMode: BMAP_DRAWING_POLYGON, // 绘制模式 多边形
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, // 地位
offset: new BMap.Size(100, 5), // 偏离值
drawingModes: [BMAP_DRAWING_POLYGON // 仅反对多边形]
},
polygonOptions: this.$polygonStyleOptions // 设置多边形的款式
});
// 增加鼠标绘制工具监听事件，用于获取绘制后果
drawingManager.addEventListener("overlaycomplete", function(e) {let points = e.overlay.getPath();
// 创立右键菜单
let markerMenu = new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem("删除", removeMarker.bind(e.overlay))
);
markerMenu.addItem(new BMap.MenuItem("编辑", editMarker.bind(e.overlay))
);
e.overlay.addContextMenu(markerMenu);
e.overlay.disableMassClear();
// 将多边形保留到数组
that.overlays.push(e.overlay);
});
// 修复画多边形过程中如果正点‘手指’后呈现的 bug
document.getElementsByClassName("BMapLib_Drawing_panel")[0].childNodes[0].onclick = function(e) {
// that.overlays.map(v=>{// v.disableMassClear()
// })
that.mymap.clearOverlays();};
// 创立双击事件
that.mymap.addEventListener("dblclick", function(e) {that.mymap.disableDoubleClickZoom();
if (that.overlays.length != 0) {for (let j = 0; j < that.overlays.length; j++) {that.overlays[j].disableEditing();}
}
});
// 删除多边形
let removeMarker = function(e, ee, marker) {that.mymap.removeOverlay(marker);
for (let i = 0; i < that.overlays.length; i++) {if (that.overlays[i] == marker) {that.overlays.splice(i, 1);
}
}
};
that.removeMarker = removeMarker;
// 编辑多边形
let editMarker = function(e, ee, marker) {marker.enableEditing();
};
that.editMarker = editMarker;
// 依照路名智能查问路线
// 建设一个主动实现的对象
var ac = new BMap.Autocomplete({
input: "suggestId",
location: that.mymap
});
},
// 查问关键字搜寻
setPlace() {
const that = this;
that.mymap.removeOverlay(that.serachMarker);
// 智能搜寻
var local = new BMap.LocalSearch(that.mymap, {onSearchComplete: () => {
// 获取第一个智能搜寻的后果
let userlocation = local.getResults().getPoi(0).point;
that.mymap.centerAndZoom(userlocation, 18);
// 增加标注
that.serachMarker = new BMap.Marker(userlocation);
that.mymap.addOverlay(that.serachMarker);
}
});
local.search(that.address_detail);
},
/** 定位到绘制区域 */
overlaysLength() {if (this.overlays.length > 0) {this.$mapUtils.polygonsLocationMap(this.overlays, this.mymap);
} else {// this.$mapUtils.polygonsLocationMap([this.regionPolygon], this.mymap);
}
},
/** 革除所有绘制的多边形 */
clearAll() {for (let i = 0; i < this.overlays.length; i++) {this.mymap.removeOverlay(this.overlays[i]);
}
this.overlays = [];
this.createForm_Project.projectBoundary = [];},
/** 保留地图 */
saveMap() {
const that = this;
let arr = [];
if (that.overlays.length == 0) {return [];
} else {for (let j = 0; j < that.overlays.length; j++) {that.overlays[j].disableEditing();
let s = [];
let overlays = that.overlays[j].getPath();
for (let i = 0; i < overlays.length; i++) {s.push([overlays[i].lng, overlays[i].lat]);
}
s.push([overlays[0].lng, overlays[0].lat]); // 造成闭环
arr.push(s);
}
let roadArea = arr;
return roadArea;
}
},
/** 刷新 overlays 数据 */
showOverlays() {this.overlaysLength();
// 加载 overlayers 到地图上
for (let i = 0; i < this.overlays.length; i++) {this.mymap.addOverlay(this.overlays[i]);
// 创立右键菜单
let markerMenu1 = new BMap.ContextMenu();
markerMenu1.addItem(new BMap.MenuItem("删除", this.removeMarker.bind(this.overlays[i]))
);
markerMenu1.addItem(new BMap.MenuItem("编辑", this.editMarker.bind(this.overlays[i]))
);
this.overlays[i].addContextMenu(markerMenu1);
}
},
// 敞开地图弹窗
closeMap(){
this.boundaryMapVisible=false
for (let i = 0; i < this.overlays.length; i++) {this.mymap.removeOverlay(this.overlays[i]);
}
},
// 在获取我的项目信息时，对获取到的我的项目范畴点位数据进行解决，不便回显已绘制地区
pointsArr2Overlays(data) {// let myOverlay = [];
let overlays = [];
if (data && data != "") {let pointsArr = JSON.parse(data);
// console.log(pointsArr);
if (pointsArr && pointsArr.length > 0) {pointsArr.forEach((item, i) => {// console.log(item)
let myOverlay = [];
item.forEach((arr, j) => {let point = new BMap.Point(arr[0], arr[1]);
myOverlay.push(point);
});
let myPolygon = new BMap.Polygon(
myOverlay,
this.$polygonStyleOptions
);
myPolygon.disableMassClear();
// // 将加载的多边形保留到数组外面
overlays.push(myPolygon);
});
}
return overlays;
} else {return overlays;}
},
// 编辑我的项目（外层弹窗）editForm(id){programEval.getProjectInfo(id).then((data) => {this.createForm_Project = JSON.parse(JSON.stringify(data.data));
// 解决我的项目范畴数据
this.overlays = this.pointsArr2Overlays(this.createForm_Project.projectBoundary);
});
this.dialogVisible_Project = true;
},
},
mounted(){}
}CSS 局部
<style scoped lang="scss">
.searchform {
height: 52px;
z-index: 3500;
width: 100%;
min-width: 1390px;
}
.mymap-box {
min-width: 1400px;
position: absolute;
top: 70px;
bottom: 30px;
left: 25px;
right: 25px;
/* 地图款式 */
#mymap {
position: absolute;
top: 60px;
bottom: 0px;
width: 100%;
border: 1px solid #1b86b9;
/* height: 100%; */
overflow: hidden;
z-index: 1;
}
/* 地图后果查问 */
#result {
border-left: 1px dotted #999;
background: #fff;
/* height: 100%; */
width: 400px;
position: absolute;
top: 65px;
left: 20px;
font-size: 12px;
}
}
</style>正文完