529 lines
17 KiB
JavaScript
529 lines
17 KiB
JavaScript
//定义一个全局变量，用来统计每个省有几个市
|
||
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: ctxPath + "/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: ctxPath + "/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);
|
||
});
|
||
}; |