无需引入额外插件
data内
data() {
return {
map: null, //地图层
drawlayer:null,//绘图层
};
},
mounted内
//申明绘图层
this.drawlayer = new this.$utils.map.$L.FeatureGroup();
var polyline = this.$utils.map.$L.polyline([[30.82959, 120.92698], [30.82959, 120.92798]], {
//线颜色
color: 'blue'
}).addTo( this.drawlayer);
//绘制矩形
L.rectangle([[30.82993, 120.92559], [30.82959, 120.92698]], {
//颜色
color: "red"
}).addTo( this.drawlayer);
//添加绘制图层
this.map.addLayer( this.drawlayer);
methhod内
//随机颜色
getRandomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ',' + g + ',' + b + ")";
},
//修改多边形颜色
setPolygonStyle(){
var color = this.getRandomColor();
//修改样式
this.drawlayer.getLayers()[1].setStyle({ color: color });
},
//修改线条颜色
setLineStyle() {
//获取颜色
var color = this.getRandomColor();
//修改样式
this.drawlayer.getLayers()[0].setStyle({ color: color });
}