最近有个需求，要求在高德地图上能够自由的绘制区块，然后这个区块能够自由的控制边框、透明度、背景色等，绘制完毕之后保存起来，然后在另一个页面进行重新绘制并且添加上对于的点击事件。 代码记录 本例中有两个vue组件代码，第一个组件仅保存相关操作，第二个组件用于操作地图。 index-map.vue用于保存操作
<template> <div class="index-map"> <div class="func-line"> <div> <p>绘制多边形操作</p> <p> <span> 选择边框颜色： <el-color-picker v-model="polyType.borderColor" size="mini"></el-color-picker> </span> <span> 选择背景颜色： <el-color-picker v-model="polyType.fillColor" size="mini"></el-color-picker> </span> </p> <p> <span> 背景透明度： <el-slider v-model="polyType.fillOpacity" :step="10" show-stops size="mini" style="width:200px;display:inline-block;vertical-align: middle;" ></el-slider> <span>{{polyType.fillOpacity + '%'}}</span> </span> </p> <p> <el-button @click="drawPolygon">开始绘制</el-button> <el-button @click="clearPolygon">清空当前绘制</el-button> <el-button @click="closeDrawPolygon">结束绘制并保存</el-button> <span style="font-size:10px;">小提示：右键取消</span> </p> </div> <div> <p>用保存的数据重新绘制多边形并添加事件</p> <el-button @click="resetDraw">重新绘制</el-button> </div> </div> <div class="map-select-box"> <SelectMap ref="SelectMap"></SelectMap> </div> </div> </template> <script> import SelectMap from "./select-map"; export default { data() { return { // 多边形绘制颜色选择 polyType: { borderColor: "", fillOpacity: 0, fillColor: "" } }; }, components: { SelectMap }, methods: { // 绘制多边形 drawPolygon() { this.$refs["SelectMap"].polyType = this.polyType; this.$refs["SelectMap"].drawPolygon(); }, // 清空绘制 clearPolygon() { this.$refs["SelectMap"].clearPolygon(); }, // 结束绘制 closeDrawPolygon() { this.$refs["SelectMap"].closeDrawPolygon(); }, // 重绘多边形内容并添加事件 resetDraw(){ this.$refs["SelectMap"].resetDraw(); } } }; </script> <style lang="scss" scoped> .index-map { width: 100%; overflow: hidden; padding: 0; .func-line { width: 100%; margin-bottom: 20px; > div { border: 1px solid #ebebeb; padding: 10px; } } .map-select-box { height: 520px; width: 100%; } } </style>效果： select-map.vue用于在地图绘制内容，并且添加相关事件
<template> <div class="select-map"> <div id="select-map"></div> <el-dialog title="提示" :visible.sync="dialogVisible"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, map: {}, //保存地图对象 mouseTool: {}, // 鼠标多边形绘制工具 polyType: { borderColor: "", fillOpacity: 0.5, fillColor: "" }, polygonList: [], savePolygon: [] }; }, methods: { // 限制地图显示范围 setLimit() { var bounds = this.map.getBounds(); this.map.setLimitBounds(bounds); }, // 绘制多边形 drawPolygon() { let that = this; this.mouseTool = new AMap.MouseTool(this.map); this.mouseTool.polygon({ strokeColor: this.polyType.borderColor, fillColor: this.polyType.fillColor, fillOpacity: parseFloat(this.polyType.fillOpacity / 100) //同Polygon的Option设置 }); //监听draw事件可获取画好的覆盖物 this.polygonList = []; this.mouseTool.on("draw", function(e) { that.polygonList.push(e.obj); console.log("绘制的多边形", that.polygonList); }); }, // 清空地图上绘制的多边形 clearPolygon() { this.map.remove(this.polygonList); this.polygonList = []; }, // 结束绘制多边形 closeDrawPolygon() { this.mouseTool.close(); let savePolygon = []; for (let i = 0; i < this.polygonList.length; i++) { console.log(this.polygonList[i].getOptions()); let op = this.polygonList[i].getOptions(); let routePath = []; op.path.forEach(item => { routePath.push([item.lng, item.lat]); }); let savearr = { path: routePath, strokeColor: op.strokeColor, strokeOpacity: op.strokeOpacity, fillOpacity: op.fillOpacity, fillColor: op.fillColor, zIndex: op.zIndex }; this.savePolygon.push(savearr); } let save = JSON.stringify(this.savePolygon); console.log("savePolygon", save); sessionStorage.setItem("savePolygon", save); }, // 创建地图 createMap() { let that = this; this.$nextTick(() => { //地图加载 that.map = new AMap.Map("select-map", { zooms: [14, 20], zoom: 14, layers: [new AMap.TileLayer.Satellite()], center: [118.771825, 32.215699] }); // 地图上打印当前的鼠标点击点位 that.map.on("click", function(e) { console.log(e.lnglat.getLng() + "," + e.lnglat.getLat()); }); // 限制地图使用范围 this.setLimit(); }); }, // 用保存的数据重新绘制多边形并添加事件 resetDraw() { let that = this; let savePolygon = JSON.parse(sessionStorage.getItem("savePolygon")); console.log("重绘多边形数据", savePolygon); for (let i = 0; i < savePolygon.length; i++) { var polygon = new AMap.Polygon(savePolygon[i]); polygon.on("click", function(e) { console.log("点击了" + i + "个内容",e); that.dialogVisible = true; }); this.map.add(polygon); } } }, mounted() { this.createMap(); } }; </script> <style lang="scss" scoped> .select-map { width: 100%; height: 100%; #select-map { width: 100%; height: 100%; } } </style>效果： 整个内容总共用到了高德地图的AMap.Map、AMap.MouseTool、mouseTool.polygon、AMap.Polygon 仅做个人代码记录便于以后参考使用
