点击图表某行在地图中弹出对应弹窗（使用vuex）

1.给图表加点击事件

//点击事件（得到点击行的id）
clickGridItem(row){
    action.updateSelectPondingId(row.id);
},

2.store.js文件

export let state = Vue.observable({
    selectPondingId: null,
})

const mutation = {
    setSelectPondingId: (value) => {
        state.selectPondingId = value;
    }
}

export const action = {
    updateSelectPondingId: mutation.setSelectPondingId,
}

3.地图

import { state, action } from '../../store';
<script>
    export default {
        computed: {
            selectPondingId: ()=> state.selectPondingId,
        },
        watch: {
            //点击表格控制弹窗
			selectPondingId(fid){
                //先判断该图层地图上是勾选
				if( !this.chooseLayers.includes('disease') ){
					action.updateChooseType([...this.chooseType, 'disease']);
					action.updateChooseLayers([...this.chooseLayers, 'disease']);
				}
                //this.diseasejson为所有弹窗数据，通过fid筛选点击的那条弹窗数据
				this.diseasejson.map(item=>{
					if(item.serviceCode==fid){
                        //执行addWarningPopup()方法打开弹窗
						this.addWarningPopup(item);
					}
				})
			},
        },
        methods: {
            //弹窗
			addWarningPopup(properties){
				let lnglat=properties.coordinate.split(',')
				const map = this.$refs.map.getMap();
					map.getCanvas().style.cursor = "pointer";
					let content =  
					`<div class="bridge-tooltip" style="width:380px">
						<p style="line-height: 40px;text-indent: 22px;font-size:16px;color:#333;font-weight:bold;border-bottom:1px solid #e5e5e5; margin-bottom:10px !important">病害编号：${properties.serviceCode}</p>
						<div style="margin-bottom: 6px;padding:0 20px;">
							<p style="line-height: 26px;font-size:12px;color:#999">
								病害类型：<span style="margin-right: 20px;color:#333">${properties.diseaseType}</span>
								<br>
								病害状态：<span style="margin-right: 20px;color:#0072ff">${properties.state}</span>
								<br>
								具体位置：<span style="margin-right: 20px;color:#333">${properties.diseaseLocation}</span>
								<br>
								病害来源：<span style="margin-right: 20px;color:#333">${properties.diseaseSource}</span>
								<br>
								养护标段：<span style="margin-right: 20px;color:#333">${properties.maintenanceSection}</span>
								<br>
								养护单位：<span style="margin-right: 20px;color:#333">${properties.maintenanceCompany}</span>
							</p>
						<div>
					</div>`;
					this.clickPopup.setHTML(content).setLngLat([lnglat[0]*1,lnglat[1]*1]).addTo(map);
					this.$nextTick(()=>{
					this.map.flyTo({
						center: [lnglat[0]*1,lnglat[1]*1],
						speed: 2,
						zoom: 15,
						easing(t) {
							return t
						}
					});
				});
			}
        }
    }
</script>

效果图