hn_cloud_web/czl-screen/js/map.js

//定义一个全局变量，用来统计每个省有几个市
let num = 0;
//1.中国地图
var chinaMap = "../../js/map/china.json";
//2.台湾省地图
var taiWanMap = "../../js/map/taiwan.json";
//3.海南省地图
var haiNanMap = "../../js/map/hainan.json";
//4.安徽省地图
var anHuiMap = "../../js/map/anhui.json";
//5.江西省地图
var jiangXiMap = "../../js/map/jiangxi.json";
//6.湖南省地图
var huNanMap = "../../js/map/hunan.json";
//7.云南省地图
var yunNanMap = "../../js/map/yunnan.json";
//8.贵州省地图
var guiZhouMap = "../../js/map/guizhou.json";
//9.广东省地图
var guangDongMap = "../../js/map/guangdong.json";
//10.福建省地图
var fuJianMap = "../../js/map/fujian.json";
//11.浙江省地图
var zheJiangMap = "../../js/map/zhejiang.json";
//12.江苏省地图
var jiangSuMap = "../../js/map/jiangsu.json";
//13.四川省地图
var siChuanMap = "../../js/map/sichuan.json";
//14.重庆市市地图
var chongQingMap = "../../js/map/chongqing.json";
//15.湖北省地图
var huBeiMap = "../../js/map/hubei.json";
//16.河南省地图
var heNanMap = "../../js/map/henan.json";
//17.山东省地图
var shanDongMap = "../../js/map/shandong.json";
//18.吉林省地图
var jiLinMap = "../../js/map/jilin.json";
//19.辽宁省地图
var liaoNingMap = "../../js/map/liaoning.json";
//20.天津市市地图
var tianJinMap = "../../js/map/tianjin.json";
//21.北京市市地图
var beiJingMap = "../../js/map/beijing.json";
//22.河北省地图
var heBeiMap = "../../js/map/hebei.json";
//23.山西省地图
var shanXiMap = "../../js/map/shanxi.json";
//24.陕西省地图
var shanXi2Map = "../../js/map/shanxii.json";
//25.宁夏回族自治区省地图
var ningXiaMap = "../../js/map/ningxia.json";
//26.青海省地图
var qingHaiMap = "../../js/map/qinghai.json";
//27.西藏自治区地图
var xiZangMap = "../../js/map/xizang.json";
//28.黑龙江省地图
var heiLongJiangMap = "../../js/map/heilongjiang.json";
//29.内蒙古自治区地图
var neimengGuMap = "../../js/map/neimenggu.json";
//30.甘肃省地图
var ganSuMap = "../../js/map/gansu.json";
//31.新疆维吾尔自治区省地图
var xinJiangMap = "../../js/map/xinjiang.json";
//32.广西壮族自治区地图
var guangxiMap = "../../js/map/guangxi.json";
//31.澳门特别行政区
var aomenMap = "../../js/map/aomen.json";
//32.香港特别行政区
var xianggangMap = "../../js/map/xianggang.json";
//32.上海
var shanghaiMap = "../../js/map/shanghai.json";
//设置初始地图
var mapname = chinaMap;
//设置省份的json 这里注意名字要和中国地图上的名字一致
var mapJson = [
    {
        name: "台湾",
        json: taiWanMap,
    },
    {
        name: "海南",
        json: haiNanMap,
    },
    {
        name: "安徽",
        json: anHuiMap,
    },
    {
        name: "江西",
        json: jiangXiMap,
    },
    {
        name: "湖南",
        json: huNanMap,
    },
    {
        name: "云南",
        json: yunNanMap,
    },
    {
        name: "贵州",
        json: guiZhouMap,
    },
    {
        name: "广东",
        json: guangDongMap,
    },
    {
        name: "福建",
        json: fuJianMap,
    },
    {
        name: "浙江",
        json: zheJiangMap,
    },
    {
        name: "江苏",
        json: jiangSuMap,
    },
    {
        name: "四川",
        json: siChuanMap,
    },
    {
        name: "重庆",
        json: chongQingMap,
    },
    {
        name: "湖北",
        json: huBeiMap,
    },
    {
        name: "河南",
        json: heNanMap,
    },
    {
        name: "山东",
        json: shanDongMap,
    },
    {
        name: "吉林",
        json: jiLinMap,
    },
    {
        name: "辽宁",
        json: liaoNingMap,
    },
    {
        name: "天津",
        json: tianJinMap,
    },
    {
        name: "北京",
        json: beiJingMap,
    },
    {
        name: "河北",
        json: heBeiMap,
    },
    {
        name: "山西",
        json: shanXiMap,
    },
    {
        name: "陕西",
        json: shanXi2Map,
    },
    {
        name: "宁夏",
        json: ningXiaMap,
    },
    {
        name: "青海",
        json: qingHaiMap,
    },
    {
        name: "西藏",
        json: xiZangMap,
    },
    {
        name: "黑龙江",
        json: heiLongJiangMap,
    },
    {
        name: "内蒙古",
        json: neimengGuMap,
    },
    {
        name: "甘肃",
        json: ganSuMap,
    },
    {
        name: "新疆维吾尔自治区",
        json: xinJiangMap,
    },
    {
        name: "广西",
        json: guangxiMap,
    },
    {
        name: "澳门",
        json: aomenMap,
    },
    {
        name: "香港",
        json: xianggangMap,
    },
];
var myChart;
var chartDom = document.getElementById('map');
var objInfo;
var oldObjInfo;
myChart = echarts.init(chartDom);
var option;
var ini_data = [];//初始化省份数组
var cityName;
function getMap(obj) {
    myChart.clear();
    oldObjInfo = obj;
    //点击事件
    myChart.on('click', function (e) {
        //过滤 这里是es6语法 filter函数可以看成是一个过滤函数，返回符合条件的元素的数组
        var chooseName = mapJson.filter((item) => {
            //我们根据名字来判断是否选择一种
            return item.name == e.name;
        });
        if (chooseName.length == 0) {
            if (e.data == undefined || e.data == 'undefined') {
                layer.msg('当前城市没有相应的工程,请点击其他城市!!!',{icon:0,timeout:2000})
                getMap(oldObjInfo)
            }else {
                $.ajax({
                    type: 'POST',
                    async: true, // 默认异步true,false表示同步
                    url: czl_url + "/dataHome/getProIdByCity",// 请求地址
                    dataType: 'json', // 服务器返回数据类型
                    data: {
                        name: e.name
                    }, //获取提交的表单字段
                    success: function (data) {
                        objInfo = data.data;
                        localStorage.setItem("cityName",cityName);
                        if(objInfo.length > 1){
                            var html = '';
                            for (var i = 0; i < objInfo.length; i++) {
                                html += '<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: flex-end;justify-content: space-between;width:100%;margin-top: 20px"><span>'+objInfo[i].name+'</span> <a style="margin-left:20px;color:#65cff7;float:right;cursor:pointer" onclick="jumpView('+i+')">详情</a></div>';
                            }
                            // 弹出对话框
                            layer.open({
                                title: false,
                                content: html,
                                btn: false,
                                area: ['auto', 'auto'],
                                skin: 'custom-dialog',
                                cancel: function (index) {
                                    getMap(oldObjInfo)
                                    layer.close(index); // 关闭对话框
                                }
                            });
                        }else {
                            localStorage.setItem("proId",objInfo[0].id);
                            localStorage.setItem("selectLon",objInfo[0].lon);
                            localStorage.setItem("selectLat",objInfo[0].lat);
                            window.location.href="./schedule.html";
                        }
                    }
                });
            }
        } else {
            //这里的chooseName是一个数组，我们需要获取到json 有兴趣可以打印
            //{name: "新疆维吾尔自治区", json: "json/xinjiang.json"}
            mapname = chooseName[0].json;
            //添加一个返回按键
            $('<div class="back">返回</div>').appendTo(
                $('#map')
            );
            //给返回按键设置样式
            $('.back').css({
                position: 'absolute',//绝对地位
                left: '20px',//设置位置
                top: '45px',//设置位置
                color: 'pink',//设置字体颜色
                'font-size': '20px',//设置字体大小
                cursor: 'pointer',//变小手
            });
            //设置返回按钮的点击事件
            $('.back').click(function () {
                //地图重新设置为中国地图
                mapname = chinaMap;
                //隐藏按钮
                $('.back').css({
                    opacity: 0,
                });
                //绘制地图
                getMapResource();
            });
            //绘制地图
            $.ajax({
                type: 'POST',
                async: true, // 默认异步true,false表示同步
                url: czl_url + "/dataHome/getMapChildResource",// 请求地址
                dataType: 'json', // 服务器返回数据类型
                data: {
                    name: e.name
                }, //获取提交的表单字段
                success: function (data) {
                    cityName = e.name;
                    objInfo = data.data;
                    getMap(objInfo)
                }
            });
        }
    });
    mapInit();
}

function jumpView(i){
    localStorage.setItem("proId",objInfo[i].id);
    localStorage.setItem("selectLon",objInfo[i].lon);
    localStorage.setItem("selectLat",objInfo[i].lat);
    window.location.href="./schedule.html";
    layer.close(index); // 关闭对话框
}

//创建地图
var mapInit = () => {
    //调用中国地图（同步）
    $.getJSON(mapname, function (geoJson) {
        //获取到长度（每个省里有几个市）
        num = geoJson.features.length;
        //调用我们通过json对象注册的地图
        echarts.registerMap('China', geoJson);
        //文件加载的动画
        myChart.hideLoading();
        //判断是否为祖国地图
        if (mapname === chinaMap) {
            //设置小黄点
            var geoCoordMap = {
                '台湾': [122, 23],
                '黑龙江': [129, 51],
                '内蒙古': [110.3467, 41.4899],
                "吉林": [125.8154, 44.2584],
                '北京': [116.4551, 40.2539],
                "辽宁": [123.1238, 42.1216],
                "河北": [114.4995, 38.1006],
                "天津": [117.4219, 39.4189],
                "山西": [112.3352, 37.9413],
                "陕西": [109.1162, 34.2004],
                "甘肃": [103.5901, 36.3043],
                "宁夏": [106.3586, 38.1775],
                "青海": [101.4038, 36.8207],
                "新疆维吾尔自治区": [87.9236, 43.5883],
                "西藏": [88.388277, 31.56375],
                "四川": [103.9526, 30.7617],
                "重庆": [108.384366, 30.439702],
                "山东": [117.1582, 36.8701],
                "河南": [113.4668, 34.6234],
                "江苏": [118.8062, 31.9208],
                "安徽": [117.29, 32.0581],
                "湖北": [114.3896, 30.6628],
                "浙江": [119.5313, 29.8773],
                "福建": [119.4543, 25.9222],
                "江西": [116.0046, 28.6633],
                "湖南": [113.0823, 28.2568],
                "贵州": [106.6992, 26.7682],
                "云南": [102.9199, 25.4663],
                "广东": [113.12244, 23.009505],
                "广西": [108.479, 23.1152],
                "海南": [110.3893, 19.8516],
                '上海': [121.4648, 31.2891],
            };
            //设置每个区域的值
            var data = [
                {name: "台湾", value: 1},
                {name: "北京", value: 2},
                {name: "天津", value: 3},
                {name: "河北", value: 4},
                {name: "山西", value: 5},
                {name: "内蒙古", value: 6},
                {name: "辽宁", value: 7},
                {name: "吉林", value: 8},
                {name: "黑龙江", value: 9},
                {name: "上海", value: 10},
                {name: "江苏", value: 11},
                {name: "浙江", value: 12},
                {name: "安徽", value: 13},
                {name: "福建", value: 14},
                {name: "江西", value: 15},
                {name: "山东", value: 16},
                {name: "河南", value: 17},
                {name: "湖北", value: 18},
                {name: "湖南", value: 19},
                {name: "重庆", value: 20},
                {name: "四川", value: 21},
                {name: "贵州", value: 22},
                {name: "云南", value: 23},
                {name: "西藏", value: 24},
                {name: "陕西", value: 25},
                {name: "甘肃", value: 26},
                {name: "青海", value: 27},
                {name: "宁夏", value: 28},
                {name: "新疆维吾尔自治区", value: 29},
                {name: "广东", value: 30},
                {name: "广西", value: 31},
                {name: "海南", value: 32},
            ];
            //给每个地区赋值
            var convertData = function (data) {
                //定义一个数组
                var res = [];
                //循环遍历每个区域值
                for (var i = 0; i < data.length; i++) {
                    //获取坐标
                    var geoCoord = geoCoordMap[data[i].name];
                    //判断是否有坐标
                    if (geoCoord) {
                        //往数组里设置值
                        res.push({
                            name: data[i].name,
                        });
                    }
                }
                return res;
            };
        } else {
            //这里不为中国地图所以先不设置（后面需要对市区进行标记在设置）
            //设置小黄点
            var geoCoordMap = {};
            //设置每个区域的值
            var data = [];
            //给每个地区赋值
            convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
        }


        //地图开始
        option = {
            //设置背景颜色
            backgroundColor: '#020933',

            tooltip: {
                show: true,
                formatter: function (params) {
                    console.log("params=" + JSON.stringify(params.value));
                    let values = "0";
                    if (!isNaN(params.value)) {
                        values = params.value;
                    }
                    return params.name + ' : ' + values;
                }
            },
            series: [//数据系列
                {
                    type: 'map',//地图类型
                    //地图上文字
                    label: {
                        normal: {
                            show: true,//是否显示标签
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                            },
                        },
                    },
                    //地图区域的多边形 图形样式
                    itemStyle: {
                        normal: {
                            borderColor: '#2ab8ff',
                            borderWidth: 1,
                            areaColor: 'rgb(24,102,200)',
                        },
                        emphasis: {
                            areaColor: '#2AB8FF',
                            borderWidth: 0,
                        },
                    },
                    selectedMode: 'multiple',  // 设置选中模式为多选
                    data:oldObjInfo,
                    label: {
                        show: false,  // 隐藏地名
                        normal: {
                            formatter:'{b}\n{c}',
                            fontSize: 12 ,
                        }
                    },
                    emphasis: {
                        label: {
                            show: false  // 高亮时显示地名
                        },
                    },
                    animation: true,
                    // symbolSize: 15,
                    zoom: 1.2,//当前视角的缩放比例
                    //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                    roam: false,
                    map: 'China', //使用中国地图
                    regions: [
                        { // 设置点击后高亮
                            name: mapname, // 高亮的省份
                            itemStyle: {
                                areaColor: '#EFF1FF' // 区域颜色
                            },
                        }
                    ]
                },
            ],

        };
        myChart.setOption(option);
    });
};