|
最近有个需求，要求在高德地图上能够自由的绘制区块，然后这个区块能够自由的控制边框、透明度、背景色等，绘制完毕之后保存起来，然后在另一个页面进行重新绘制并且添加上对于的点击事件。 代码记录 本例中有两个vue组件代码，第一个组件仅保存相关操作，第二个组件用于操作地图。 index-map.vue用于保存操作
绘制多边形操作
选择边框颜色：
选择背景颜色：
背景透明度：
{{polyType.fillOpacity + '%'}}
开始绘制
清空当前绘制
结束绘制并保存
小提示：右键取消
用保存的数据重新绘制多边形并添加事件
重新绘制
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();
}
}
};
.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%;
}
}
效果：  select-map.vue用于在地图绘制内容，并且添加相关事件
这是一段信息
取 消
确 定
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 {
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 |