dangerMap.vue

<template>
    <div class="gis" style="padding: 0px;">
        <div id="mapbox">
            <div style="position:absolute;left:-30px;top:10px">
                <button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button>
                <button @click="Mutil.tianSlB()" class="map-botton">全景地图</button>
            </div>

            <div v-show="isShowVideo" v-drag
                 style="display: none;position:absolute;left:1000px;top:10px;z-index: 30;padding: 5px; background-color: rgba(2, 40, 90, 0.8);width: 400px;height: 255px;border-radius: 5px;border: 1px solid #000;">
                <!--<div style="width: 100%;height: 30px;">-->
                    <!--<span style="float: left;color: #fff;font-size: 1rem;">{{deviceVideo.deviceName}}</span>-->
                    <!--<span @click="closeVideo" style="float: right;margin-right: 10px;font-size: 1.5rem;color: #fff;"-->
                          <!--class="el-icon-close"></span>-->
                <!--</div>-->
                <div id="div_video"></div>
            </div>
        </div>
        <div style="">

            <div class="markBox">

                <div @click="mapma" class="markbox-div" ref="material" style="margin-top: 10px;">
                    <div class="markbox-click" ref="maimg" style="width: 30%;height: 100%;float: left;text-align: right;">
                        <img width="30px" src="@/assets/mark/tongxin.png" />
                    </div>
                    <div class="markbox-span" ref="zma" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                        <span>通信保障机构<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum0}}</span></span>
                    </div>

                </div>
                <div @click="mapma1" class="markbox-div" ref="material1">
                    <div class="markbox-click" ref="maimg1" style="width: 30%;height: 100%;float: left;text-align: right;">
                        <img width="30px" src="@/assets/mark/wuzi.png" />
                    </div>
                    <div class="markbox-span" ref="zma1" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                        <span>救援物资<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum1}}</span></span>
                    </div>
                </div>
                <div @click="mapma2" class="markbox-div" ref="material2">
                    <div class="markbox-click" ref="maimg2" style="width: 30%;height: 100%;float: left;text-align: right;">
                        <img width="30px" src="@/assets/mark/zhuanjia.png" />
                    </div>
                    <div class="markbox-span" ref="zma2" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                        <span>专家资源<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum2}}</span></span>
                    </div>
                </div>
                <div @click="mapma3" class="markbox-div" ref="material3">
                    <div class="markbox-click" ref="maimg3" style="width: 30%;height: 100%;float: left;text-align: right;">
                        <img width="30px" src="@/assets/mark/jiuyuan.png" />
                    </div>
                    <div class="markbox-span" ref="zma3" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                        <span>救援队伍<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum3}}</span></span>
                    </div>
                </div>
                <div @click="mapma4" class="markbox-div" ref="material4">
                    <div class="markbox-click" ref="maimg4" style="width: 30%;height: 100%;float: left;text-align: right;">
                        <img width="30px" src="@/assets/mark/binan.png" />
                    </div>
                    <div class="markbox-span" ref="zma4" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                        <span>避难场所<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum4}}</span></span>
                    </div>
                </div>
                <div @click="mapma5" class="markbox-div" ref="material5">
                    <div class="markbox-click" ref="maimg5" style="width: 30%;height: 100%;float: left;text-align: right;">
                        <img width="30px" src="@/assets/mark/fanghu.png" />
                    </div>
                    <div class="markbox-span" ref="zma5" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                        <span>防护目标<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum5}}</span></span>
                    </div>
                </div>
                <div @click="mapma6" class="markbox-div" ref="material6">
                    <div class="markbox-click" ref="maimg6" style="width: 30%;height: 100%;float: left;text-align: right;">
                        <img width="30px" src="@/assets/mark/yiliao.png" />
                    </div>
                    <div class="markbox-span" ref="zma6" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
                        <span>医疗卫生单位<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum6}}</span></span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script lang="ts">
    import {
        Component,
        Vue,
        Provide
    } from "vue-property-decorator";
    import METHOD from "@/utils/methods";
    import "@/utils/directive.js";
    import {
        Icon
    } from "element-ui";
    import "@/utils/VamapLoad.ts";
    import DrawTool from "@/components/drawTool.vue";
    import Search from "@/components/search.vue";
    import Mutil from "@/utils/mapUtil.js";
    import METHOD from "@/utils/methods";
    import QyMaptwo from './qyMaptwo.vue';
    import vueDrag from 'vue-dragging'
    import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
    Vue.use(vueDrag)
    @Component({
        components: {
            DrawTool,
            Search,
            QyMaptwo
        },
    })
    export default class GIS extends Vue {


        @Provide() Mutil: any;
        @Provide() mapLoadDone = false;
        @Provide() MAP: any;
        @Provide() isShowVideo: boolean = false;
        @Provide() player: any;
        @Provide() mapOption = {
            plugin: [{
                pName: "MapType",
                defaultType: 1,
            },
                {
                    pName: "ToolBar",
                },
            ],
            center: [115, 28],
            zoom: 10,
            events: {},
        };
        @Provide() searchData: any = {
            type: "0",
        };
        /* 地图 */
        @Provide() markers: any = [];
        @Provide() markers0: any = [];
        @Provide() markers1: any = [];
        @Provide() markers2: any = [];
        @Provide() markers3: any = [];
        @Provide() markers4: any = [];
        @Provide() markers5: any = [];
        @Provide() markers6: any = [];
        @Provide() mapData: any = [];
        @Provide() windowsArr: any = [];
        @Provide() windowsArr0: any = [];
        @Provide() windowsArr1: any = [];
        @Provide() windowsArr2: any = [];
        @Provide() windowsArr3: any = [];
        @Provide() windowsArr4: any = [];
        @Provide() windowsArr5: any = [];
        @Provide() windowsArr6: any = [];
        @Provide() DataNum0: any = 0;
        @Provide() DataNum1: any = 0;
        @Provide() DataNum2: any = 0;
        @Provide() DataNum3: any = 0;
        @Provide() DataNum4: any = 0;
        @Provide() DataNum5: any = 0;
        @Provide() DataNum6: any = 0;
        @Provide() currentWindow: any = "";
        // @Provide() searchOption: any = {
        //     city: "石家庄",
        //     citylimit: true,
        // };
        @Provide() PAGE: any = {
            page: 1,
            size: 1000
        };
        @Provide() materialData: any = [];
        @Provide() lastVideoPlayId: any = "";
        @Provide() markersB: any = [];
        @Provide() dialogVisible1: Boolean = false;
        @Provide() dialogVisible2: Boolean = false;
        @Provide() toolobj: any;
        @Provide() mouseTool: any; //测量工具
        @Provide() toolVisble: boolean = false;
        @Provide() tjNumberObj: any = {};
        @Provide() deviceVideo: any = {};
        @Provide() qiyeVisble: boolean = true;
        @Provide() wxyVisble: boolean = true;
        @Provide() shipinVisble: boolean = true;
        @Provide() maVisble: boolean = true;
        @Provide() ma1Visble: boolean = true;
        @Provide() ma2Visble: boolean = true;
        @Provide() ma3Visble: boolean = true;
        @Provide() ma4Visble: boolean = true;
        @Provide() ma5Visble: boolean = true;
        @Provide() ma6Visble: boolean = true;
        @Provide() weihaiVisble: boolean = true;
        @Provide() yinhuanVisble: boolean = true;
        @Provide() treecheckedObj: any = {};
        @Provide() goods: any = {};
        @Provide() trouble: any = {};

        getMaterial(){
            let that = this;
            var param = Object.assign({}, that.PAGE, );
            METHOD.axiosPost(
                that,
                `/material/materialInfoList`,
                param,
                function (res: any) {
                    that.materialData = res.data;
                    if (res.code == 0&& res.data.pageData.length > 0) {
                        that.matermapData = res.data.pageData;
                        var matermapData0 =[];
                        var matermapData1 =[];
                        var matermapData2 =[];
                        var matermapData3 =[];
                        var matermapData4 =[];
                        var matermapData5 =[];
                        var matermapData6 =[];

                        let latSum = 0;
                        let lngSum = 0;
                        that.matermapData.forEach((ele: any, index: any) => {
                            if(ele.materialType=="救援物资"){
                                that.addMaterialMark1(ele, index);
                                matermapData1.push(ele)
                            }else if(ele.materialType=="专家资源"){
                                that.addMaterialMark2(ele, index);
                                matermapData2.push(ele)
                            }else if(ele.materialType=="救援队伍"){
                                that.addMaterialMark3(ele, index);
                                matermapData3.push(ele)
                            }else if(ele.materialType=="避难场所"){
                                that.addMaterialMark4(ele, index);
                                matermapData4.push(ele)
                            }else if(ele.materialType=="防护目标"){
                                that.addMaterialMark5(ele, index);
                                matermapData5.push(ele)
                            }else if(ele.materialType=="医疗卫生单位"){
                                that.addMaterialMark6(ele, index);
                                matermapData6.push(ele)
                            }else {
                                that.addMaterialMark(ele, index);
                                matermapData0.push(ele)
                            }
                            //that.addMark(ele,index);
                            lngSum += ele.longitude;
                            latSum += ele.latitude;
                        });
                        that.matermapData0 = matermapData0;
                        that.matermapData1 = matermapData1;
                        that.matermapData2 = matermapData2;
                        that.matermapData3 = matermapData3;
                        that.matermapData4 = matermapData4;
                        that.matermapData5 = matermapData5;
                        that.matermapData6 = matermapData6;
                        that.DataNum0 = matermapData0.length;
                        that.DataNum1 = matermapData1.length;
                        that.DataNum2 = matermapData2.length;
                        that.DataNum3 = matermapData3.length;
                        that.DataNum4 = matermapData4.length;
                        that.DataNum5 = matermapData5.length;
                        that.DataNum6 = matermapData6.length;
                        let center = [
                            lngSum / that.matermapData.length,
                            latSum / that.matermapData.length,
                        ];
                        that.Mutil.setViewF({
                            center: center
                        })
                    }
                }
            );
        }
        getMaterialWindow(id: string) {
            let that = this;
            (window as any).checkDetail = function (param: string) {
                that.$router.push({
                    path: "/EnDetail",
                    query: {
                        enterpriseId: param
                    }
                });
            };

            let obj = that.materialData.pageData[id-1],
                html =
                    `<div class="windowDg"><h3>应急资源详细信息</h3>` +
                    `<p><span>资源名称:</span>${obj.materialName}</p>` +
                    `<p><span>资源类型:</span>${obj.materialType}</p>` +
                    `<p><span>数量:</span>${obj.num}</p>` +
                    `<p><span>地址:</span>${obj.address}</p>` +
                    `<p><span>联系人:</span>${obj.contacts}</p>` +
                    `<p><span>联系方式:</span>${obj.phone}</p>` +
                    `</div>`;
            that.Mutil.addPopup(html, obj.id, obj.longitude, obj.latitude)

        }

        //关闭视频方法
        closeVideo() {
            if (this.lastVideoPlayId != "") {
                this.player.stop('http://27.128.189.137:18000/flv/hls/' + this.lastVideoPlayId + '.flv', 1);
            }
            this.isShowVideo = false;
        }
        addMaterialMark(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/tongxin1.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="25">`,
                label: {
                    content: obj.materialName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr0.forEach((ele: any) => {
                            // console.log(ele,"ele")
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            // console.log(ele,"ele")
                            that.currentWindow = that.windowsArr0[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'material',
                obj.materialName,
                icon,
                [obj.longitude, obj.latitude],
                0.4,
                index+1
            );
            this.Mutil.visibleMarks(false, "material");
        }
        addMaterialMark1(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/wuzi1.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="25">`,
                label: {
                    content: obj.materialName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr1.forEach((ele: any) => {
                            // console.log(ele,"ele")
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            // console.log(ele,"ele")
                            that.currentWindow = that.windowsArr1[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'material1',
                obj.materialName,
                icon,
                [obj.longitude, obj.latitude],
                0.4,
                index+1
            );
            this.Mutil.visibleMarks(false, "material1");
        }
        addMaterialMark2(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/zhuanjia1.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="25">`,
                label: {
                    content: obj.materialName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr2.forEach((ele: any) => {
                            // console.log(ele,"ele")
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            // console.log(ele,"ele")
                            that.currentWindow = that.windowsArr2[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'material2',
                obj.materialName,
                icon,
                [obj.longitude, obj.latitude],
                0.4,
                index+1
            );
            this.Mutil.visibleMarks(false, "material2");
        }
        addMaterialMark3(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/jiuyuan1.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="25">`,
                label: {
                    content: obj.materialName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr3.forEach((ele: any) => {
                            // console.log(ele,"ele")
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            // console.log(ele,"ele")
                            that.currentWindow = that.windowsArr3[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'material3',
                obj.materialName,
                icon,
                [obj.longitude, obj.latitude],
                0.4,
                index+1
            );
            this.Mutil.visibleMarks(false, "material3");
        }
        addMaterialMark4(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/binan1.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="25">`,
                label: {
                    content: obj.materialName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr4.forEach((ele: any) => {
                            // console.log(ele,"ele")
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            // console.log(ele,"ele")
                            that.currentWindow = that.windowsArr4[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'material4',
                obj.materialName,
                icon,
                [obj.longitude, obj.latitude],
                0.4,
                index+1
            );
            this.Mutil.visibleMarks(false, "material4");
        }
        addMaterialMark5(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/fanghu1.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="25">`,
                label: {
                    content: obj.materialName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr5.forEach((ele: any) => {
                            // console.log(ele,"ele")
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            // console.log(ele,"ele")
                            that.currentWindow = that.windowsArr5[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'material5',
                obj.materialName,
                icon,
                [obj.longitude, obj.latitude],
                0.4,
                index+1
            );
            this.Mutil.visibleMarks(false, "material5");
        }
        addMaterialMark6(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/yiliao1.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="25">`,
                label: {
                    content: obj.materialName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr6.forEach((ele: any) => {
                            // console.log(ele,"ele")
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            // console.log(ele,"ele")
                            that.currentWindow = that.windowsArr6[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'material6',
                obj.materialName,
                icon,
                [obj.longitude, obj.latitude],
                0.4,
                index+1
            );
            this.Mutil.visibleMarks(false, "material6");
        }
        addMark(obj: any, index: any) {
            let icon,
                that = this;
            icon = require("@/assets/mark/markmapqy.png");
            let option = {
                position: [Number(obj.longitude), Number(obj.latitude)],
                content: ` <img src="${icon}" width="25">`,
                label: {
                    content: obj.unitName,
                    offset: [28, -7]
                },
                offset: [-13, -2],
                events: {
                    click: (e: any) => {
                        that.windowsArr.forEach((ele: any) => {
                            // console.log(ele,"ele")
                            ele.visible = false;
                        });
                        that.$nextTick(() => {
                            // console.log(ele,"ele")
                            that.currentWindow = that.windowsArr[index];
                            that.currentWindow.visible = true;
                        });
                    },
                },
                visible: true,
            };
            that.Mutil.addMarkerToMap(
                'qiye',
                obj.unitName,
                icon,
                [obj.longitude, obj.latitude],
                0.4,
                obj.enterpriseId
            );
        }
        change(v: any) {
            let that = this;
            that.matermapData.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers0[index].visible = true;
                } else {
                    that.markers0[index].visible = false;
                }
            });
            that.matermapData1.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers1[index].visible = true;
                } else {
                    that.markers1[index].visible = false;
                }
            });
            that.matermapData2.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers2[index].visible = true;
                } else {
                    that.markers2[index].visible = false;
                }
            });
            that.matermapData3.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers3[index].visible = true;
                } else {
                    that.markers3[index].visible = false;
                }
            });
            that.matermapData4.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers4[index].visible = true;
                } else {
                    that.markers4[index].visible = false;
                }
            });
            that.matermapData5.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers5[index].visible = true;
                } else {
                    that.markers5[index].visible = false;
                }
            });
            that.matermapData6.forEach((ele: any, index: any) => {
                if (ele.dataType == v || v == 0) {
                    that.markers6[index].visible = true;
                } else {
                    that.markers6[index].visible = false;
                }
            });
        }

        /* 搜索 */
        getMaterialinfo(maid: any) {
            let that = this;
            that.getMaterialWindow(maid);
        }
        created() {
            //this.getMaterial();
        }
        cancel(){
            this.goods={};
            this.trouble={};
            this.dialogVisible1 = false;
            this.dialogVisible2 = false;
        }
        async mounted() {

            let that = this;

            that.player = new WasmPlayer(null, "div_video", null);
            that.mapLoadDone = true;
            that.Mutil = new Mutil("mapbox");
            that.MAP = that.Mutil.MAP;
            await this.Mutil.getBoundaries("行唐")
            that.Mutil.mapSelectBind((evt: any) => {
                //这是地图marker点击回调监听
                /*if (evt.selected[0].get('type') === 'qiye') {
                    that.Mutil.closeAllOverlays();
                    let id = evt.selected[0].get('did');
                    if (id) that.getPopcon(id);
                } */
                    that.Mutil.closeAllOverlays();
                    let id = evt.selected[0].get('did');
                    if (id) that.getMaterialinfo(id);

            })

            this.getStatiData();
            this.getMaterial();

        }

        mapma(){
            if (this.maVisble) {
                this.Mutil.visibleMarks(true, "material");
                this.maVisble = false;
                this.$refs.material.style.background = "#24BBC7";
                this.$refs.zma.lastChild.style.color = "#013056";
            } else {
                this.Mutil.visibleMarks(false, "material");
                this.maVisble = true;
                this.$refs.material.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zma.lastChild.style.color = "#fff";
            }

        }
        mapma1(){
            if (this.ma1Visble) {
                this.Mutil.visibleMarks(true, "material1");
                this.ma1Visble = false;
                this.$refs.material1.style.background = "#24BBC7";
                this.$refs.zma1.lastChild.style.color = "#013056";
            } else {
                this.Mutil.visibleMarks(false, "material1");
                this.ma1Visble = true;
                this.$refs.material1.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zma1.lastChild.style.color = "#fff";
            }
        }
        mapma2(){
            if (this.ma2Visble) {
                this.Mutil.visibleMarks(true, "material2");
                this.ma2Visble = false;
                this.$refs.material2.style.background = "#24BBC7";
                this.$refs.zma2.lastChild.style.color = "#013056";
            } else {
                this.Mutil.visibleMarks(false, "material2");
                this.ma2Visble = true;
                this.$refs.material2.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zma2.lastChild.style.color = "#fff";
            }
        }
        mapma3(){
            if (this.ma3Visble) {
                this.Mutil.visibleMarks(true, "material3");
                this.ma3Visble = false;
                this.$refs.material3.style.background = "#24BBC7";
                this.$refs.zma3.lastChild.style.color = "#013056";
            } else {
                this.Mutil.visibleMarks(false, "material3");
                this.ma3Visble = true;
                this.$refs.material3.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zma3.lastChild.style.color = "#fff";
            }
        }
        mapma4() {
            if (this.ma4Visble) {
                this.Mutil.visibleMarks(true, "material4");
                this.ma4Visble = false;
                this.$refs.material4.style.background = "#24BBC7";
                this.$refs.zma4.lastChild.style.color = "#013056";
            } else {
                this.Mutil.visibleMarks(false, "material4");
                this.ma4Visble = true;
                this.$refs.material4.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zma4.lastChild.style.color = "#fff";
            }
        }
        mapma5() {
            if (this.ma5Visble) {
                this.Mutil.visibleMarks(true, "material5");
                this.ma5Visble = false;
                this.$refs.material5.style.background = "#24BBC7";
                this.$refs.zma5.lastChild.style.color = "#013056";
            } else {
                this.Mutil.visibleMarks(false, "material5");
                this.ma5Visble = true;
                this.$refs.material5.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zma5.lastChild.style.color = "#fff";
            }
        }
        mapma6() {
            if (this.ma6Visble) {
                this.Mutil.visibleMarks(true, "material6");
                this.ma6Visble = false;
                this.$refs.material6.style.background = "#24BBC7";
                this.$refs.zma6.lastChild.style.color = "#013056";
            } else {
                this.Mutil.visibleMarks(false, "material6");
                this.ma6Visble = true;
                this.$refs.material6.style.background = "RGBA(5, 52, 82, 0.7)";
                this.$refs.zma6.lastChild.style.color = "#fff";
            }
        }
        // mapbox(){
        //     let that = this;
        //     that.Mutil.closeAllOverlays();
        // }
        // editFun(row: any) {
        //     this.dialogTit = "编辑";
        //     this.formData = Object.assign({}, row);
        //     this.zjKey++;
        //     this.dialogVisible = true;
        // }
        getStatiData() {
            let that = this;
            METHOD.axiosPost(
                that,
                `/dataStatistics/managerDataStatistics`,
                { cityId: "", countyId: "", provinceId: "" },
                function (res: any) {
                    if (res.code == 0) {

                        if (res.code == 0 && res.data.goodsList.length > 0) {
                            that.wxymapData = res.data.goodsList;
                            let wxylatSum = 0;
                            let wxylngSum = 0;
                            that.wxymapData.forEach((ele: any, index: any) => {
                                wxylngSum += ele.longitude;
                                wxylatSum += ele.latitude;
                            });
                            let center = [
                                wxylngSum / that.wxymapData.length,
                                wxylatSum / that.wxymapData.length,
                            ];
                            that.Mutil.setViewF({
                                center: center
                            })
                        }
                    }
                }
            );
        }
    }
</script>

<style lang="scss">
    @import "@/utils/public.scss";

    .map-botton {
        width: 100px;
        height: 50px;
        outline: none;
        z-index: 10;
        position: absolute;
    }

    .gengxin {
        text-align: center;
        color: #fff;
    }

    .map-botton:nth-child(1) {
        left: 50px;
    }

    .map-botton:nth-child(2) {
        left: 160px;
    }

    .map-botton:nth-child(3) {
        left: 270px;
    }

    #mapbox {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .gis {
        position: relative;
        overflow: hidden;
    }

    /* .div-isShowVideo{
    width: 200px;
    height: 350px;
} */
    /* .div-isShowVideo .divspan{
    width: 100%;
    height: 20px;
} */
    .markBox {
        z-index: 30;
        width: 185px;
        height: 100%;
        background: url('../../assets/z3.png') 100% 100%;
        position: absolute;
        top: -0px;
        right: 0px;
    }

    .markBox .markbox-div {
        width: 100%;
        height: 70px;
        text-align: center;
        background-color: RGBA(17, 59, 89, 0.7);
        font-size: 100% 100%;
        margin-top: 30px;
        cursor:pointer;
    }

    .markbox-span {
        float: right;
        text-align: center;
        font-size: 15px;
        /* font-family: 'UnidreamLED'; */
        color: #fff;
    }

    .markbox-click img {
        /* width: 30px; */
        margin-top: 17px;
    }

    .show-box {
        position: absolute !important;
        z-index: 9;
        /* background: rgba(204, 204, 204, 0.7); */
        top: 4px;
        right: 10px;
    }

    .search-box {
        position: absolute !important;
        top: 14px;
        left: 80px;
    }

    .ol-zoom {
        top: 10px;
        left: 250px !important;
    }
</style>