mh_fire/src/components/mixins/map-data.js

import JMap from 'JMap'
import JMapQuery from 'JMapQuery'
export default {
    data() {
        return {
            map: null,
            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("/atlas/encrypt")
                // 加载地图
            window.jMap.createMap("mapF", res.data, window.location.origin, map_params, {});
            // 地图样式
            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)
                // 街镇标题
            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'>${val.attributes.name}   ${val.attributes.code}</div></div>`
                        }, { isZoom: false,})
                    });
                }
            })
            new JMapQuery(window.jMap).execQuery(qp)
        },
        clickFlag(val) {
            console.log(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;
        },
        deleteMarker(lnglats) {
            this.map.remove(lnglats);
        },
        // 创建标点和点击事件
        addMarker(lnglats, type) {
            let icon = ''
            let target = lnglats.map((val, ind) => {
                if (type === 'water') {
                    icon = val.waterAdministrative === '单位' ? 'http://120.55.70.156/image/unitWater.png' : val.waterAdministrative === '市政' ? 'http://120.55.70.156/image/szWater.png' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? 'http://120.55.70.156/image/sqWater.png' : ''
                }
                let marker = {
                    id: ind + 1,
                    attributes: val.waterAdministrative,
                    attrbutes: val,
                    position: { x: val.gisX, y: val.gisY, z: 0 },
                    // image: { url: icon,width:29.5,height:48.5 },
                };
                return marker
            })
            console.log(target)
            window.jMap.Locate.pointLocate(target, {
                isZoom: false,
                scaleByDistance: { minScaling: 0, maxScaling: 1, minDistance: 1000, maxDistance: 30000 },
                click: (val) => {
                    this.elementInfo(val, type)
                }
            })
        },
        // 无经纬度创建标点和点击事件
        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
            }, []);
            console.log(target)
            console.log(Math.floor(target.length / 100))
            for (let item = 0; item < Math.floor(target.length / 100); item++) {
                console.log(item)
                console.log(target.slice(item * 100, (item + 1) * 100).map(val => val.addressId).join())
                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) {
            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>`
            }
            this.addMarkerInfo(element, value)
            console.log(element)
        },
        // 标点点击弹窗
        addMarkerInfo(element, value, isBtn = false) {
            console.log(element, value)
                // 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
            }
            // console.log(value)
            window.jMap.Popup.show({
                id: value.id,
                // position: value.wgs84position, //使用自定义窗体
                position: { x: Number(value.wgs84position.x), y: Number(value.wgs84position.y), z: Number(value.wgs84position.z) }, //使用自定义窗体
                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) => {
                        console.log(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)
        },
    }
}