leaflet变换 多边形和线条颜色的方法

1,621 阅读1分钟

无需引入额外插件

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 });
        }