<template> <div style="position: relative"> <div class="search-wrapper pos"> <el-input v-model="searchinput" class="searchinput" placeholder="请输入内容" size="mini" style="width: 150px" ref="input" ></el-input> </div> <div id="drawArea" :style="{height: this.height + 'px'}" ></div> </div> </template> <script> import { EditorMap } from "@/utils/mapClass/getPath.js"; export default { name: "draw-area", props:{ value: { type: Array, default: ()=>[], }, height:{ type: Number, default: 500 } }, data(){ return{ gaoMap: null, mouseTool: null, overlays: null, firstClick: 0, nowMouseTarget: null, isClickPolygonFlag: false, opts:{ fillColor:'#00b0ff', strokeColor:'#80d8ff' }, searchinput: "" } }, mounted(){ this.initMap(); this.$nextTick(() => { const input = this.$refs.input.$refs.input; this.gaoMap.positionSearch(input); }); }, methods:{ //地图初始化 initMap(){ const path = eval(this.$store.state.user.systemSetting.map_center); this.gaoMap = new EditorMap("drawArea", {center:path}, this); this.initMapEvent(); if(this.value.length > 0){ this.loadArea(); }else{ this.initMouseEvent(); } }, initMapEvent(){ let that = this; this.gaoMap.map.on("click", () => { if(that.nowMouseTarget && !that.isClickPolygonFlag){ that.$confirm("是否重新绘制区域", { type: "warning" }) .then(() => { that.$emit("input", []); that.mouseTool && that.mouseTool.close(); that.nowMouseTarget.polygonEditor && that.nowMouseTarget.polygonEditor.close(); that.gaoMap.map.remove(that.nowMouseTarget); that.mouseTool && that.mouseTool.polygon(that.opts); if(!that.mouseTool){ that.initMouseEvent(); } that.isClickPolygonFlag = true; }).catch(() => {}); } }); }, //初始化鼠标事件 initMouseEvent(){ let that = this; this.gaoMap.map.plugin(["AMap.MouseTool"], () => { that.mouseTool = new AMap.MouseTool(this.gaoMap.map); that.mouseTool.polygon(that.opts); that.mouseTool.on('draw',function(e){ that.nowMouseTarget = e.obj; that.$emit("input", that.nowMouseTarget._opts.path); that.isClickPolygonFlag = false; if(that.nowMouseTarget._opts.path.length > 2){ that.mouseTool.close(); that.isClickPolygonFlag = true; } that.firstClick = 0; e.obj.on('click',function () { that.isClickPolygonFlag = true; that.firstClick++; if(that.firstClick < 2){ that.gaoMap.map.plugin(["AMap.PolygonEditor"],(n) => { const polygonEditor = new AMap.PolygonEditor(that.gaoMap.map,e.obj); that.nowMouseTarget.polygonEditor = polygonEditor; polygonEditor.on("removenode", (e) => { that.$emit("input", e.target._opts.path); that.isClickPolygonFlag = true; if(that.nowMouseTarget._opts.path.length == 0){ setTimeout(() => { that.mouseTool.polygon(that.opts); }, 230); } }); polygonEditor.on("adjust",(e) =>{ that.$emit("input", e.target._opts.path); }) polygonEditor.on("addnode",(e) =>{ that.$emit("input", e.target._opts.path); }) polygonEditor.open(); }); } }); e.obj.on("mouseout", (e) => { that.isClickPolygonFlag = false; }) //右键关闭区域编辑 e.obj.on("rightclick",() => { that.firstClick = 0; that.nowMouseTarget.polygonEditor.close(); }) }) }); }, //区域回显 loadArea(){ const polygon = new AMap.Polygon({ map:this.gaoMap.map, path: this.value, fillColor:'#00b0ff', strokeColor:'#80d8ff' }); this.nowMouseTarget = polygon; this.firstClick = 0; polygon.on("click",(e) =>{ this.isClickPolygonFlag = true; this.firstClick++; if(this.firstClick < 2){ this.gaoMap.map.plugin(["AMap.PolygonEditor"],()=> { this.nowMouseTarget.polygonEditor = new AMap.PolygonEditor(this.gaoMap.map,e.target); this.nowMouseTarget.polygonEditor.on("removenode", (e) => { this.isClickPolygonFlag = true; this.$emit("input", e.target._opts.path); }); this.nowMouseTarget.polygonEditor.on("adjust",(e) =>{ this.$emit("input", e.target._opts.path); }) this.nowMouseTarget.polygonEditor.on("addnode",(e) =>{ this.$emit("input", e.target._opts.path); }) this.nowMouseTarget.polygonEditor.open(); }) } }); polygon.on("mouseout", (e) => { this.isClickPolygonFlag = false; }) polygon.on("rightclick",() => { this.firstClick = 0; this.nowMouseTarget.polygonEditor && this.nowMouseTarget.polygonEditor.close(); }); this.gaoMap.setCenter(this.value[0]); this.gaoMap.map.setZoom(12) } } } </script> <style scoped lang="scss"> .search-wrapper { left: 30px; } .positionBtn { right: 30px; } .pos { position: absolute; top: 20px; left: 20px; z-index: 20; } #drawArea { width: 100%; border: 1px solid; } </style>