fire-mh/src/components/mixins/map-data.js

import axios from 'axios';
export default {
    data() {
        return {
            // icon1: require('@a/img/icon/szWater.png'),
            // icon2: require('@a/img/icon/sqWater.png'),
            icon1: require('@a/img/icon/qx.png'),
            icon2: require('@a/img/icon/jy.png'),
            icon3: require('@a/img/icon/hz.png'),
            map: null,
            time: false,
            mapPolList: [],
            colorList: [
                ['#99e', "#F33"],
                ['#ee6', "#c38"],
                ['#c38', "#F33"],
                ['#6E7', '#F33'],
                ['#6A7', "#F33"],
                ['#EF7', "#F33"],
                ['#AF7', "#F33"],
                ['#BAC', "#F33"],
                ['#BEF', "#F33"],
                ['#BBB', "#F33"],
                ['#EFA', "#F33"],
                ['#FE6', "#F33"],
                ['#7F6', "#F33"],
                ['#7dc', "#F33"],
            ],
            colorIndList: [-1, 7, 21, 26, 31, 37, 46, 52, 57, 66, 68, 71, 74, 100],
            oldPopup: null,
            oldPopupId: null,

        }
    },
    computed: {
        mapWidth: function() {
            //这里的this指向的是当前的vue实例
            return this.$refs.mapF.$el.offsetWidth / 2 + 'px'
        },
        mapHeight: function() {
            //这里的this指向的是当前的vue实例
            return this.$refs.mapF.$el.offsetHeight / 2 - 40 + 'px'
        }
    },
    mounted() {
        window.vue = this;
        window.jMap = null;
        window.jmapQuery = null;
    },
    methods: {
        /**
         * @地图初始化
         */
        async initMap() {
            window.vue = this;
            window.jMap = null;
            window.jmapQuery = null;
            window.jMap = new JMap();
            var map_params = {
                camera: {
                    x: 121.4175597,
                    y: 31.1192480,
                    radius: 18000.0,
                    offset: { heading: -4, pitch: -70, range: 0 }
                },
                map_complete_callback: () => {
                    window.jmapQuery = new JMapQuery(window.jMap);
                    // ToDo...
                },
                map_left_click_callback: (obj, type, movement) => {

                },
                map_right_click_callback: (obj) => {

                },
            };
            // let res = await this.$axios.get("/api/atlas/encrypt")
            let res = await this.$axios.get(this.$api.dt) //sing
                // 加载地图
            window.jMap.createMap("mapF", res.data, window.location.origin, map_params, {});
            // 地图样式
            window.jMap.switchBaseLayer('dark')
                //window.jMap.switchBaseLayer('light')
                // 增加街镇边界
            let options = {
                click: (val) => {
                    console.log(val)
                },
                isZoom: false,
                style: {
                    outline: true,
                    outlineColor: 'red',
                    // material:'rgb(0,0,0)',
                    // perPostionHeight: false,
                    height: 5,
                    width: 5,
                    label: {
                        // show: true,
                        text: '',
                        font: '16px Helvetica',
                        fillColor: 'blue',
                        pixelOffset: [0, -20],
                        backgroundColor: 'rgb(0,0,0)',
                        showBackground: false
                    }

                },
                // where:"name != '江川路街道'"
            }
            window.jMap.addLayer('mh_dyn_district', [1], options)
                // 街镇标题
            if (document.body.clientWidth > 1940) {
                var qp = new JMapQueryParam({
                    queryMapService: 'mh_dyn_district',
                    queryMapLayers: [1],
                    outFields: ['code', 'name', 'center_x', 'center_y'],
                    callBack: (res) => {
                        res.features.forEach(async val => {
                            await window.jMap.FlagInfo.show({
                                id: val.attributes.code,
                                position: { x: Number(val.attributes.center_x), y: Number(val.attributes.center_y), z: 0 },
                                element: `<div class='ysc-dynamic-layer ys-css3-box' onclick="vue.clickFlag(${val.attributes.code})">
                                                <div class='biaozhu' style="font-size:32px !important">${val.attributes.name}   ${val.attributes.code}</div>
                                        </div>`
                            }, { isZoom: false, })
                        });
                    }
                })
            } else {
                var qp = new JMapQueryParam({
                    queryMapService: 'mh_dyn_district',
                    queryMapLayers: [1],
                    outFields: ['code', 'name', 'center_x', 'center_y'],
                    callBack: (res) => {

                        res.features.forEach(async val => {
                            await window.jMap.FlagInfo.show({
                                id: val.attributes.code,
                                position: { x: Number(val.attributes.center_x), y: Number(val.attributes.center_y), z: 0 },
                                element: `<div class='ysc-dynamic-layer ys-css3-box' onclick="vue.clickFlag(${val.attributes.code})">
                                                <div class='biaozhu' style="font-size:18px !important">${val.attributes.name}   ${val.attributes.code}</div>
                                        </div>`
                            }, { isZoom: false, })
                        });
                    }
                })
            }
            // new JMapQuery(window.jMap).execQuery(qp)

            //window.jMap.bindBuildingClick(callbackFunction)
            // 点击三维建筑模型触发的回调函数
        },

        callbackFunction(obj) {
            //     console.log(obj); // obj为返回值
        },
        /**
         * @聚合撒点
         * @param {数据list} data
         * @param {页面类型} pageType
         * @param {类型} type
         */
        initMarkers(data, pageType, type) {
            var _this = this;

            var tag = 1; //1.自定义图标 2.完全自定义 3.默认
            var style = ''; //地图最大化小图标
            var points = []; //地图撒点处理数据存储

            var target = {
                clusterId: '100001',
                clusterData: [{
                    attributes: {
                        name: "西环新村居委环绿公寓健身点"
                    },
                    position: {
                        x: 121.36056108992341,
                        y: 31.108652530290897,
                        z: 0
                    },
                    image: {
                        url: 'images/cluster.png',
                        width: 22,
                        height: 35
                    }
                }, ]
            };
            var options = {
                style: { pixelRange: 10 },
                isZoom: true,
                click: clusterMapCallBack
            };
            jMap.ClusterMap.show(target, options);

            function clusterMapCallBack(clusterPointArr, clickPoint) {}

        },
        clickFlag(val) {

        },
        randomColor() {
            var color = "#";
            //for循环中，如果后面仅有一条语句，{}可省略不写
            //随机生成6位0-15之间的数字，再用toString(16)将数字转成16进制
            for (var i = 0; i < 6; i++) color += parseInt(Math.random() * 16).toString(16);
            return color;
        },
        removeMarkers(lnglats) {
            this.map.remove(lnglats);
        },
        /**
         * @创建标点和点击事件
         * @param {*} lnglats 
         * @param {*} type 
         */
        addMarker(lnglats, type) {
            console.log(lnglats)
            let icon = ''
            if (type == "selfManagement") {
                var lnglats = lnglats
            }
            var target = lnglats.map((val, ind) => {
                if (type == 'selfManagement') {

                    if (val.ajlx == "火灾") {
                        icon = this.icon3
                    } else
                    if (val.ajlx == "抢险救援") {
                        icon = this.icon1
                    } else if (val.ajlx == "社会救助") {
                        icon = this.icon2
                    } else {
                        icon = this.icon2
                    }

                } else {
                    icon = val.waterAdministrative === '单位' ? this.icon1 : val.waterAdministrative === '市政' ? this.icon2 : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? this.icon3 : this.icon1
                }
                if (type == "selfManagement" || type == "water") {
                    let marker = {
                        id: ind + 1,
                        attrbutes: val,
                        position: { x: val.gisX, y: val.gisY, z: 0 },
                        image: { url: icon, width: 100, height: 100 },
                        // image: { url: icon, width: 240, height: 240 },
                    };
                    return marker

                } else {
                    let marker = {
                        id: ind + 1,
                        attrbutes: val,
                        position: { x: val.gisBaiDuX, y: val.gisBaiDuY, z: 0 },
                        image: { url: icon, width: 240, height: 240 },
                    };

                    return marker
                }


            })
            window.jMap.Locate.pointLocate(target, { //撒点
                isZoom: false,
                animate: { "show": true },
                scaleByDistance: { minScaling: 0, maxScaling: 1, minDistance: 1000, maxDistance: 30000 },
                click: (val) => {
                    if (type == "selfManagement") {
                        this.$axios.get(this.$api.jqzhcz.one +
                            "?" +
                            this.$qs.stringify({
                                id: val.attrbutes.id,
                            })
                        ).then(res => {

                            this.elementInfo(res.data, type)
                        })
                    } else {
                        this.elementInfo(value, type)
                    }


                }

            })
        },
        /**
         * @无经纬度创建标点和点击事件
         * @param {*} lnglats 
         */
        addMarkerAddress(lnglats) {
            let target = lnglats.map((val, ind) => {
                if (!val.addressId) {
                    let addressInfo = window.jMap.queryMphInfo(val.address)[val.address][0]
                    return {
                        ...val,
                        addressId: addressInfo.address_id, // 地址id
                        province: addressInfo.province, // 市
                        district: addressInfo.district, // 区
                        sub_district: addressInfo.sub_district, // 街镇
                        streetname: addressInfo.streetname, // 路
                        address: addressInfo.address, // 户
                        committee: addressInfo.committee, // 居委会
                    }
                }
            })
            target = target.reduce((item, next) => {
                !item.some(val => val.addressId === next.addressId) && item.push(next)
                return item
            }, []);
            for (let item = 0; item < Math.floor(target.length / 100); item++) {
                setTimeout(() => {
                    window.jMap.locateMph(
                        target.slice(item * 100, (item + 1) * 100).map(val => val.addressId).join(), {
                            isZoom: false,
                            scaleByDistance: { minScaling: 0, maxScaling: 1, minDistance: 1000, maxDistance: 30000 },
                            click: (value) => {
                                this.elementInfo(value, 'fire')
                            }
                        }
                    )
                }, 0)
            }
        },
        leftBtnClick() {
            this.leftBtn = !this.leftBtn;
        },
        rightBtnClick() {
            this.rightBtn = !this.rightBtn

        },
        elementInfo(value, type) {
            if (this.timer) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                window.jMap.Popup.hide()
            }, 8000)

            // setTimeout(()=>{
            //     if(this.time){

            //     }

            // },8000)
            if (!value.ajbh) {
                value.ajbh = '--'
            }
            if (!value.tzsj) {
                value.tzsj = '--'
            }
            if (!value.bcxx) {
                value.bcxx = '--'
            }
            if (!value.ajlx) {
                value.ajlx = '--'
            }
            if (!value.afdz) {
                value.afdz = '--'
            }
            if (!value.zhongdui) {
                value.zhongdui = '--'
            }
            if (!value.ajzt) {
                value.ajzt = '--'
            }
            if (!value.dcsj) {
                value.dcsj = '--'
            }
            if (!value.cssj) {
                value.cssj = '--'
            }
            if (!value.kzsj) {
                value.kzsj = '--'
            }
            if (!value.xmsj) {
                value.xmsj = '--'
            }
            if (!value.fdsj) {
                value.fdsj = '--'
            }
            if (!value.streettown) {
                value.streettown = '--'
            }

            let element = ''
            if (type === 'water') {
                element = `<div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup">
                            <div class="tableTooltip mapTab">
                            <div class="tableTitle">
                                <div>${value.attrbutes.type}</div>
                            </div>
                            <el-row class="tableContent">
                                <div class="max">水源位置：${value.attrbutes.address}</div>
                                <div>电话：${value.attrbutes.phone}</div>
                                <div class="max">支队名称：${value.attrbutes.detachmentName}</div>
                                <div>管辖机构：${value.attrbutes.jurisdictionalAgency}</div>
                                <div>水源类型：${value.attrbutes.type}</div>
                                <div>取水形式：${value.attrbutes.getWaterType}</div>
                                <div>水源性质：${value.attrbutes.waterAdministrative}</div>
                                <div>状态：${value.attrbutes.status == 1 ? '可用' : '不可用'}</div>
                                <div>供水单位：${value.attrbutes.waterUnit}</div>
                            </el-row>
                            </div>
                        </div>`
            } else if (type === 'fire') {
                element = `<div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup">
                            <div class="tableTooltip mapTab">
                                <div class="tableTitle">
                                    <div>${'单位及执法情况'}</div>
                                </div>
                                <el-row class="tableContent">
                                    <div>单位地址：${'XX路135弄'}</div>
                                    <div>法人：${'张三'}</div>
                                    <div>管理人：${'李四'}</div>
                                    <div>历史检查次数：<a>${'6次'}</a></div>
                                    <div class="divTitle">行政许可记录</div>
                                    <div>审核时间：${'2021-06-26'}</div>
                                    <div>验收时间：${'2021-06-26'}</div>
                                    <div>安检时间：${'2021-06-26'}</div>
                                    <div>历史隐患数：${'2处'}</div>
                                    <div class="divTitle">历史处罚情况</div>
                                    <div>历史火灾数：${'2'}</div>
                                    <div>单位自主管理情况：<a>点击查看</a></div>
                                </el-row>
                            </div>
                        </div>`
            } else {
                element = `<div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup">
                                      <div class="tableTooltip mapTab">
                                      <div class="tableTitle">
                                          <div>${value.ajlx}</div>
                                      </div>
                                      <el-row class="tableContent">
                                          <div class="max">案件编号：${value.ajbh}</div>
                                          <div class="max">报警时间：${value.tzsj} </div>
                                          <div class="max">案件描述：${value.bcxx}</div>
                                         
                                          <div class="max">案件类型：${value.ajlx}</div>
                                         
                                          <div class="max">发生地址：${value.afdz}</div>
                                          
                                          <div class="max2">主责中队：${value.zhongdui}</div>
                                          <div class="max2">案件状态：${value.ajzt}</div>
                                          <div class="max">到场时间：${value.dcsj}</div>
                                          <div class="max">出水时间：${value.cssj}</div>
                                          <div class="max">控制时间：${value.kzsj}</div>
                                          <div class="max">熄灭时间：${value.xmsj}</div>
                                          <div class="max">返队时间：${value.fdsj}</div>
                                          <div class="max2">所属街道：${value.streettown}</div>
                                         
                                        


                                      </el-row>
                                      </div>
                                  </div>`
            }
            this.addMarkerInfo(element, value, type)
        },
        // 标点点击弹窗
        // addMarkerInfo(element, value, type, isBtn = false) {
        addMarkerInfo(element, value, type, isBtn = false) {

            // window.jMap.Popup && window.jMap.Popup.hide([this.oldPopup && this.oldPopup.id]);
            if (this.oldPopup && value.id === this.oldPopup.id) {
                window.jMap.Popup.hide();
                return this.oldPopup = null
            }
            if (type == "selfManagement" || type == "water") {
                window.jMap.Popup.show({
                    id: value.id,
                    //position: value.wgs84position, //使用自定义窗体
                    position: { x: value.gisX, y: value.gisY }, //使用自定义窗体

                    element: element,
                }, { isZoom: false, offset: [0, -40] });
            } else {
                window.jMap.Popup.show({
                    id: value.id,
                    //position: value.wgs84position, //使用自定义窗体
                    position: { x: value.gisX, y: value.gisY }, //使用自定义窗体

                    element: element,
                }, { isZoom: false, offset: [0, -40] });
            }



            if (!isBtn) {
                window.jMap.goTo({
                    x: Number(value.wgs84position.x),
                    y: Number(value.wgs84position.y),
                    radius: 1000
                }, {
                    duration: 3,
                    offset: {
                        heading: -4,
                        pitch: -70,
                        range: 0
                    }
                })
                window.jMap.Buffer.generate({
                    geometry: [{ position: [{ x: Number(value.wgs84position.x), y: Number(value.wgs84position.y) }], type: 'point' }],
                    distance: 1000
                }, {
                    callBack: (el) => {

                        for (const i in el) {
                            var target = {
                                id: i,
                                position: CoordUtil.arrayToJson(el[i].rings[0])
                            }
                        }
                        window.jMap.Locate.regionLocate(target, {
                            style: {
                                color: 'rgba(235, 98, 98, .1)',
                                transparency: .3
                            }
                        })
                    },
                })
            }
            this.oldPopup = value
        },
        removePopup(e) {
            console.log(e)
        },
    }
}