VUE-baidu-map 显示多个多边形的同时绘制一个多边形

效果如下:

<style lang="less" scoped>

    .mapbox{

        width: 100%;

        height: 680px;

    }

</style>

<template>

<div>

     <Form :model="formItem" :label-width="100" style="margin:20px 10px 10px 10px">

      <Row :gutter="16">  

        <Col :span="8"><FormItem label="网格名称">

            <Input  placeholder="Enter something..." ></Input>

            

        </FormItem>

        </Col>

         <Col :span="8"><FormItem label="网格颜色">

            <Select v-model="polygonPath.color">

                <Option value="green">绿色</Option>

                <Option value="red">红色</Option>

                <Option value="blue">蓝色</Option>

                 <Option value="yellow">黄色</Option>

                 <Option value="#FA7921">橙色</Option>

            </Select>

            

        </FormItem>

        </Col>

         <Col :span="8"><FormItem label="负责人">

             <Input  placeholder="Enter something..." ></Input>

            

        </FormItem>

        </Col>

      </Row>

      </Form>

<div class="mapbox">

     

       <baidu-map

            :center="center"

            :zoom="zoom"

            :map-click="false"

            @mousemove="syncPolygon"

            @ready="handler"

            style="height:100%"

            @click="paintPolygon"

            @rightclick="newPolygon"

             :mapStyle="mapStyle"

        >

        <bm-polygon

          :path="path"

          v-for="(path,index) in polygonPath.mPath.concat(polygonPath.paths)" 

          

          :key="path.toString()"

          :stroke-color="allcolor[index]"

          :fill-color="allcolor[index]"

          

          :fill-opacity="0.5"

          :stroke-opacity="0.2"

          :stroke-weight="3"

          @click="alertpath"

        />

        <bm-control>

          <button  @click="toggle('polygonPath')">{{ polygonPath.editing ? '停止绘制(单击右键结束绘制)' : '开始绘制' }}</button>

         

        </bm-control>

      </baidu-map>

    </div>

          <Row type="flex" justify="center" style="margin-top: 16px;">

          <Button type="primary" @click="handleSubmit()" :disabled="isSubmitDisabled">提交</Button>

          <Button type="default" @click="handleReset" style="margin: 0 16px">重置</Button>

          <Button type="default" @click="closeMe()">返回</Button>

        </Row>

</div>

  

</template>

<script>

import mapstyle from "./map.json";

export default {

    props:['pathss','lat','lng','scales','is_Show'],

    name:'',

    data() {

        return {

              mapStyle: {

            styleJson: mapstyle,

    },

             center: { lng: 118.780659, lat: 32.04566 },

            zoom: 17,

           

            polygonPath: {

                editing: false,

                //始终显示的多边形

                mColor:['red','yellow',],

                 mPath:[

                    [

                    {lat: '32.04781',lng: '118.781423'},

                    {lat: '32.047336',lng: '118.785806'},

                    {lat: '32.044413',lng: '118.782303'},

                    {lat: '32.044423',lng: '118.792203'},

                   ],

                   [

                    {lat: '32.04781',lng: '118.681423'},

                    {lat: '32.147336',lng: '118.885806'},

                    {lat: '32.144413',lng: '118.681303'},

                   ],

                ],

                //绘制的多边

                color:[],

                paths: [

                    

                ] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数

            },

            //中心点

           

            // 缩放大小

            scale:15,

        

    

        }

    },

    created(){

        

        

    },

    mounted() {

        this.isShow=this.is_Show

        this.polygonPath.paths.push(this.pathss)

        if(this.lat!=''&&this.lng!=''){

            this.clat=this.lat

            this.clng=this.lng

        }

        if(this.scales!=''){

            this.scale=this.scales

        }

    },

    methods: {

        handler ({ BMap, map }) {

            console.log(BMap, map)

            map.enableScrollWheelZoom()

            let a=new BMap.Point(this.clng,this.clat)

            map.centerAndZoom(a, this.scale)

        },

        getClickInfo (e) {

            console.log(e.point.lng)

            console.log(e.point.lat)

        },

        // 开启多边形绘制

        toggle (name) {

            console.log(this.polygonPath.paths);

            this[name].editing = !this[name].editing

            // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空

            if (this.polygonPath.paths && this.polygonPath.editing) {

            this.polygonPath.paths= []

            }

            console.log(this.polygonPath.paths)

        },

        // 鼠标移动时

        syncPolygon (e) {

            if (!this.polygonPath.editing) {

                return

            }

            const { paths } = this.polygonPath

            console.log({ paths });

            if (!paths.length) {

                return

            }

            const path = paths[paths.length - 1]

            if (!path.length) {

                return

            }

            if (path.length === 1) {

                path.push(e.point)

            }

            this.$set(path, path.length - 1, e.point)

        },

        // 鼠标左键点击时往路径里push一个点

        newPolygon () {

            if (!this.polygonPath.editing) {

                return

            }

            // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形

            this['polygonPath'].editing = !this['polygonPath'].editing

            const { paths } = this.polygonPath

            if (!paths.length) {

                paths.push([])

            }

            const path = paths[paths.length - 1]

            path.pop()

            if (path.length) {

                paths.push([])

            }

            //右击结束

            console.log(this.polygonPath)

            console.log('右击结束')

        },

        // 鼠标右键多边形绘制完成

        paintPolygon (e) {

            if (!this.polygonPath.editing) {

                return

            }

            const { paths } = this.polygonPath

            !paths.length && paths.push([])

            paths[paths.length - 1].push(e.point)

        },

        alertpath (e) {

            console.log(e.currentTarget.so)

            //获取绘制的经纬度

            console.log(this.polygonPath.paths[0])

        },

    },

    computed: {

        //固定形状与新增形状的颜色

        allcolor() {

          return this.polygonPath.mColor.concat( this.polygonPath.color)

        }

    },

}

</script>