mh_fire/src/components/mixins/map-gaode-selfManagement.js

import AMap from 'AMap'
import mapData from '@a/js/map-data.js'
// import AMapUI from 'AMapUI'
export default {
    data() {
        return {
            icon: require('@a/img/icon/icon-qyzz.png'),
            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]
        }
    },
    mounted() {
        window['tb1'] = () => {
                this.tb1()
            },
            window['tb2'] = () => {
                this.tb2()
            }
        window['tb3'] = () => {
            this.tb3()
        }

    },
    methods: {
        tb1() {
            this.$store.commit('qyzz', { qyzz: "电量" });
        },
        tb2() {
            this.$store.commit('qyzz', { qyzz: "信号" });
            console.log(2)
        },
        tb3() {
            this.$store.commit('qyzz', { qyzz: "液位" });
            console.log(3)
        },
        addMarkerInfo(position, value) { //消防水情况
            var icon = this.icon
                // this.map.getIsOpen();
            this.map.clearInfoWindow();
            // var icon = require('')
            var json = eval('(' + value.property + ')');
            var code = value.code
            var infoWindow = new AMap.InfoWindow({
                isCustom: true, //使用自定义窗体
                closeWhenClickMap: true,
                content: `
                    <div class="tableTooltip mapTab">
                        <div class="tableTitle">
                            <div>${value.deviceType}</div>
                        </div>
                        <el-row class="tableContent">
                            <div class="max">设备编号：${value.code}</div>
                            <div class="max">检测对象：${value.deviceType}</div>
                            <div class="max">数据更新时间：${value.createTime}</div>
                            <div class="max">剩余电量：
                            ${json && json.find(val=>val.property === '电量') ? json.find(val=>val.property === '电量').serial : '--'} 
                            <img src="${icon}" alt="" class="icon2" v-if="json && json.find(val=>val.property === '电量')" onclick="tb1()" /></div>
                            <div class="max">无线信号：
                            ${json && json.find(val=>val.property === '信号') ? json.find(val=>val.property === '信号').serial : '--'} 
                            <img src="${icon}" alt="" class="icon2" v-if="json && json.find(val=>val.property === '信号')" onclick="tb2()" /></div>
                            <div class="max">液位：
                            ${json && json.find(val=>val.property === '水压') ? json.find(val=>val.property === '水压').serial : '--'} 
                            <img src="${icon}" alt="" class="icon2" v-if="json && json.find(val=>val.property === '水压')" onclick="tb3()" /></div>
                        </el-row>
                    </div>`,
                offset: new AMap.Pixel(16, -30)
            });
            infoWindow.open(this.map, position);
        },
        // async tb(msg) {
        //     console.log(1, msg)
        //     return msg

        // },
        async initMap() {
            this.map = await new AMap.Map('mapF', { //地图初始化
                mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
                resizeEnable: true,
                zoom: 13,
                zooms: [3, 16],
                //pitch: 1, // 地图俯仰角度，有效范围 0 度- 83 度
                //viewMode: '3D' // 地图模式
                // features: [] //清空背景道路等
            })
            AMap.plugin(["AMap.Geolocation"], () => {
                var geolocation = new AMap.Geolocation({
                    showButton: true, //是否显示定位按钮
                    buttonPosition: "RT", //定位按钮的位置
                    /* LT LB RT RB */
                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
                    zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    showMarker: true, //是否显示定位点
                    markerOptions: {
                        //自定义定位点样式，同Marker的Options
                        offset: new AMap.Pixel(-18, -36),
                        content: '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
                    },
                    convert: true,
                    showCircle: true, //是否显示定位精度圈
                    circleOptions: {
                        //定位精度圈的样式
                        strokeColor: "#0093FF",
                        noSelect: true,
                        strokeOpacity: 0.5,
                        strokeWeight: 1,
                        fillColor: "#02B0FF",
                        fillOpacity: 0.25,
                    },
                });
                this.map.addControl(geolocation);
                // geolocation.getCurrentPosition();
            });

            this.mapPolList = mapData.map((val, ind) => {
                // console.log(val)
                let color = this.colorList[this.colorIndList.findIndex((value, index) => value <= ind && ind < this.colorIndList[index + 1])]
                return [new AMap.Polygon({
                    map: this.map,
                    fillOpacity: 0.5,
                    path: val[3],
                    fillColor: color[0],
                    strokeColor: color[1],
                }), new AMap.Polygon({
                    map: this.map,
                    fillOpacity: 0.5,
                    path: val[3],
                    fillColor: color[1],
                    strokeColor: color[0],
                })]
            })
            this.map.on('mousemove', (e) => {
                var point = [e.lnglat.getLng(), e.lnglat.getLat()]
                var pointList = mapData.map(val => {
                    return AMap.GeometryUtil.isPointInRing(point, val[3])
                })
                this.mapPolList.forEach((element, ind) => {
                    if (pointList[ind]) {
                        this.map.remove(element[0]);
                        this.map.add(element[1]);
                    } else {
                        this.map.remove(element[1]);
                        this.map.add(element[0]);
                    }
                });
            })
            this.map.setFitView();
        },
        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 markers = 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' : ''
                        //icon = val.waterAdministrative === '单位' ? '' : val.waterAdministrative === '市政' ? '' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? '' : ''
                } else {
                    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 = new AMap.Marker({
                    position: new AMap.LngLat(val.longitude, val.latitude),
                    icon: icon,
                    zIndex: 9,
                    extData: {
                        id: ind + 1
                    }
                });
                if (lnglats.length == 1) {
                    console.log("正常")
                    this.addMarkerInfo([val.longitude, val.latitude], val)

                }

                marker.on('click', async() => {
                    let res = await this.$axios.get(this.$api.selfManagement.one + "?" +
                        this.$qs.stringify({
                            id: val.id
                        }));
                    if (res) {
                        this.$store.commit('qyzzId', { qyzzId: res.data.code });
                        await this.addMarkerInfo([val.longitude, val.latitude], res.data)
                    }
                })
                return marker
            })
            this.map.add(new AMap.OverlayGroup(markers));
            //this.map.setFitView(); // 根据所有点自适应
        },
    }
}