中国地图下钻地市,区县
整体目录结构如下图
注意一下： vscode 编辑器的小伙伴一定用 goLive 启动一下根目录，要不然是拿不到 ggeoJson 文件的 ！！
(我也是踩坑好久摸索出来的,可以根据需要调整为Vue项目,满意的话给个关注点个赞呗)
先上效果图
整体目录结构如下:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eCharts_map</title>
</head>
<body>
<div style="height:740px;width: 100%;">
<div id="map" style="height:740px;width: 1024px;margin: 0 auto;"></div>
</div>
</body>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript" src="./js/china.js"></script>
<script type="text/javascript" src="./js/utils.js"></script>
<script type="text/javascript">
//需要保存当前上一级栈信息
let mapName = 'china';
let flag = false;
//禁止浏览器右键
document.oncontextmenu = function () {
return false;
};
let myChart = echarts.init(document.getElementById('map'));
// 单击下钻
myChart.on('click', function (params) {
// let code = params.region.code;
// let name = params.region.name;
// debugger;
if(params.name === undefined){
return
}
if(flag){
mapName = params.name
console.log(mapName);
}
flag = true;
let code = params.data.code;
let name = params.data.name;
// 联动到该州市，重新进入初始化地图
if (code !== "" && code !== undefined) {
initMap(code, name)
}
});
//目前为了测试,所以只有云南省下面的地州市的区划和中国下面的省份的区划,可以根据需要搞一点别的地市或者区县的区划进去,
function getArr(tag) {
if(tag === '云南'){
var arr = utils['云南']
}else if(tag==='china' || tag ===undefined){
var arr = utils['china']
}else{
arr = []
}
let resultArr = [];
arr.forEach((item,index) => {
resultArr.push({
name: item.name,
code: item.code,
//value是为了随机让地图块颜色区分
value: Math.abs(Number((Math.random() * 10).toFixed()) - 5) + 1,
id: index + 1
})
})
return resultArr.splice(0)
}
//右键返回上一层
myChart.on('contextmenu', (params) => {
console.log(mapName);
renderMap(mapName);
})
//初始化一份echart所需option
function getOption() {
return {
title: {},
legend: {},
geo: [],
series: [
{
type: 'map',
mapType: 'china',
geoIndex: 0,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
//此处只是示意,点击的时候想要拿的东西都可以绑定在里面
data: [
// {
// name: '昆明市',
// code: 530100,
// value: 1
// }
]
}],
visualMap: {
min: 0,
max: 7,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
show: false,
inRange: {
color: ['#ffffff', '#ffc188', '#479fd2', '#fba853', '#48c7c0', '#fa8737', '#4bbdd6', '#ff6f5b']
}
},
grid: {
left: 130,
top: 100,
botton: 40,
width: '20%',
},
tooltip: {
//提示框信息
trigger: 'item',
formatter: '{b}\n{c}',
},
};
}
//初始化一份geoJson地图数据
function getGeo(mapName, codes) {
return {
backgroundColor: '#F7EED6',
type: 'map',
map: mapName,
left: 10,
right: 5,
top: 10,
bottom: 10,
selectedMode: 'single',
label: {
//地图上的文本标签
normal: {
show: true,
position: 'inside', //文本标签显示的位置
textStyle: {
color: '#fff', //文本颜色
fontSize: 14,
},
formatter: '{b}\n{c}', //文本上显示的值 data:[{name: "地名", value: 数据}], {b}表示label信息,{c}代表value
},
emphasis: {
show: true,
position: 'inside',
textStyle: {
color: '#fff',
fontSize: 13,
},
},
},
itemStyle: {
normal: {
areaColor: '#5ab1ef', //地图块颜色#DCE2F1 浅蓝#2B91B7
borderColor: '#EBEBE4', //#EBEBE4灰色
},
emphasis: {
areaColor: 'rgb(254,153,78)', //s鼠标放上去，地图块高亮显示的颜色
},
},
regions: codes,
}
}
// 初始化地图，有code就进行下钻，没有就回到初始化中国地图，code是行政区划代码
function initMap(code, name) {
myChart.clear();
if (code !== "" && code !== undefined) {
linkage(code, name);
return
}
if (name === "" || code === undefined) {
renderMap('china');
}
}
// 渲染地图 整合option数据和动图geoJson数据
function renderMap(name) {
myChart.clear();
let option = getOption();
option.geo.push(getGeo(name, utils[name]));
option.series[0].data.push(...getArr(name))
let arr = option.series[0].data;
myChart.setOption(option, true);
}
// 地级市联动，下钻
function linkage(code, name) {
let url = "";
if ("0000" === code.toString().substring(2)) {
url = "json/100000/" + code + ".geoJson";
} else {
url = "json/100000/" + code.toString().substring(0, 2) + "0000/" + code + ".geoJson";
}
//获取geoJson数据
$.getJSON(url, function (data) {
echarts.registerMap(name, data);
renderMap(name);
});
}
// initMap(530000, "云南");
//初始化整个echartMap
initMap();
//此项目已经完成点击下钻,因项目需要,暂时只做了全国和云南省的经纬度数据(until[“云南”],until[‘china’]), 正常来说 ,renderMap是用来获取数据的,但是目前只有云南和全国,所以以后如果使用,则需要去搞数据
//目前点击其他省份或者地市进行下钻或者右键返回不会成功的原因是: option.series[0].data 里面行政区划号和名称,不齐全,可以自行填补
</script>
</html>
china.js文件代码太多了就不上传了,网上能找到
utils.js如下
let utils = {
china: provinceCode(),
"云南": code_53(),
};
// 各省的行政区划代码和坐标
function provinceCode() {
return [
{name: '北京', code: 110000, coordinate: [116.405285, 39.904989]},
{name: '天津', code: 120000, coordinate: [117.190182, 39.125596]},
{name: '河北', code: 130000, coordinate: [114.502461, 38.045474]},
{name: '山西', code: 140000, coordinate: [112.549248, 37.857014]},
{name: '内蒙古', code: 150000, coordinate: [111.670801, 40.818311]},
{name: '辽宁', code: 210000, coordinate: [123.429096, 41.796767]},
{name: '吉林', code: 220000, coordinate: [125.3245, 43.886841]},
{name: '黑龙江', code: 230000, coordinate: [126.642464, 45.756967]},
{name: '上海', code: 310000, coordinate: [121.472644, 31.231706]},
{name: '江苏', code: 320000, coordinate: [118.767413, 32.041544]},
{name: '浙江', code: 330000, coordinate: [120.153576, 30.287459]},
{name: '安徽', code: 340000, coordinate: [117.283042, 31.86119]},
{name: '福建', code: 350000, coordinate: [119.306239, 26.075302]},
{name: '江西', code: 360000, coordinate: [115.892151, 28.676493]},
{name: '山东', code: 370000, coordinate: [117.000923, 36.675807]},
{name: '河南', code: 410000, coordinate: [113.665412, 34.757975]},
{name: '湖北', code: 420000, coordinate: [114.298572, 30.584355]},
{name: '湖南', code: 430000, coordinate: [112.982279, 28.19409]},
{name: '广东', code: 440000, coordinate: [113.280637, 23.125178]},
{name: '广西', code: 450000, coordinate: [108.320004, 22.82402]},
{name: '海南', code: 460000, coordinate: [110.33119, 20.031971]},
{name: '重庆', code: 500000, coordinate: [106.504962, 29.533155]},
{name: '四川', code: 510000, coordinate: [104.065735, 30.659462]},
{name: '贵州', code: 520000, coordinate: [106.713478, 26.578343]},
{name: '云南', code: 530000, coordinate: [102.712251, 25.040609]},
{name: '西藏', code: 540000, coordinate: [91.132212, 29.660361]},
{name: '陕西', code: 610000, coordinate: [108.948024, 34.263161]},
{name: '甘肃', code: 620000, coordinate: [103.823557, 36.058039]},
{name: '青海', code: 630000, coordinate: [101.778916, 36.623178]},
{name: '宁夏', code: 640000, coordinate: [106.278179, 38.46637]},
{name: '新疆', code: 650000, coordinate: [87.617733, 43.792818]},
{name: '台湾', code: 710000, coordinate: [121.509062, 25.044332]},
{name: '香港', code: 810000, coordinate: [114.173355, 22.320048]},
{name: '澳门', code: 820000, coordinate: [113.54909, 22.198951]},
]
}
// 云南省各市和区县的行政区划代码和坐标
function code_53() {
return [
{name: '昆明市', code: 530100, coordinate: [102.712251, 25.040609]},
{name: '曲靖市', code: 530300, coordinate: [103.797851, 26.001557]},
{name: '玉溪市', code: 530400, coordinate: [102.543907, 24.050461]},
{name: '保山市', code: 530500, coordinate: [99.167133, 24.711802]},
{name: '昭通市', code: 530600, coordinate: [103.717216, 27.736999]},
{name: '丽江市', code: 530700, coordinate: [100.833026, 26.872108]},
{name: '普洱市', code: 530800, coordinate: [100.972344, 23.277321]},
{name: '临沧市', code: 530900, coordinate: [99.48697, 23.886567]},
{name: '楚雄彝族自治州', code: 532300, coordinate: [101.546046, 25.541988]},
{name: '红河哈尼族彝族自治州', code: 532500, coordinate: [102.884182, 23.366775]},
{name: '文山壮族苗族自治州', code: 532600, coordinate: [104.74401, 23.66951]},
{name: '大理白族自治州', code: 532900, coordinate: [100.225668, 25.989449]},
{name: '德宏傣族景颇族自治州', code: 533100, coordinate: [98.008363, 24.436694]},
{name: '怒江傈僳族自治州', code: 533300, coordinate: [99.024304, 26.350949]},
{name: '迪庆藏族自治州', code: 533400, coordinate: [99.206463, 27.826853]},
{name: '西双版纳傣族自治州', code: 532800, coordinate: [100.997941, 22.201724]},
]
}
至于Json嘛,网上也能下,目录结构大概是这样的
根据需要自行下载吧
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
