Echarts地图深入+散点
第一次写，请见谅，最近公司接了个项目，客户要求点击地图可以显示省份并且把房产显示出来，当时想了想百度一下，结果发现，自己已经没钱吃饭了，于是就自己写了，当时想到地图深入有两种方式（json,高德地图）因为那边是没有外网高德地图被否了，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Home</title>
</head>
<body>
<div id="Homes">
<div id="MapRenderingId" style="width:100%;height:800px;margin: 0 auto;">
</div>
</div>
</body>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/echarts/echarts.min.js"></script>
<script type="text/javascript">
var Affectsthedepth = false;//用于判断地图是否深入
var dtsr = echarts.init(document.getElementById('MapRenderingId'));
var timeFn = null;
$(function () {
loadMap('./json/china.json', 'china'); //初始化全国地图
})
//各省份的地图json文件
var provinces = {
'上海': './json/data-1482909900836-H1BC_1WHg.json',
'河北': './json/data-1482909799572-Hkgu_yWSg.json',
'山西': './json/data-1482909909703-SyCA_JbSg.json',
'内蒙古': './json/data-1482909841923-rkqqdyZSe.json',
'辽宁': './json/data-1482909836074-rJV9O1-Hg.json',
'吉林': './json/data-1482909832739-rJ-cdy-Hx.json',
'黑龙江': './json/data-1482909803892-Hy4__J-Sx.json',
'江苏': './json/data-1482909823260-HkDtOJZBx.json',
'浙江': './json/data-1482909960637-rkZMYkZBx.json',
'安徽': './json/data-1482909768458-HJlU_yWBe.json',
'福建': './json/data-1478782908884-B1H6yezWe.json',
'江西': './json/data-1482909827542-r12YOJWHe.json',
'山东': './json/data-1482909892121-BJ3auk-Se.json',
'河南': './json/data-1482909807135-SJPudkWre.json',
'湖北': './json/data-1482909813213-Hy6u_kbrl.json',
'湖南': './json/data-1482909818685-H17FOkZSl.json',
'广东': './json/data-1482909784051-BJgwuy-Sl.json',
'广西': './json/data-1482909787648-SyEPuJbSg.json',
'海南': './json/data-1482909796480-H12P_J-Bg.json',
'四川': './json/data-1482909931094-H17eKk-rg.json',
'贵州': './json/data-1482909791334-Bkwvd1bBe.json',
'云南': './json/data-1482909957601-HkA-FyWSx.json',
'西藏': './json/data-1482927407942-SkOV6Qbrl.json',
'陕西': './json/data-1482909918961-BJw1FyZHg.json',
'甘肃': './json/data-1482909780863-r1aIdyWHl.json',
'青海': './json/data-1482909853618-B1IiOyZSl.json',
'宁夏': './json/data-1482909848690-HJWiuy-Bg.json',
'新疆': './json/data-1482909952731-B1YZKkbBx.json',
'北京': './json/data-1482818963027-Hko9SKJrg.json',
'天津': './json/data-1482909944620-r1-WKyWHg.json',
'重庆': './json/data-1482909775470-HJDIdk-Se.json',
'香港': './json/data-1461584707906-r1hSmtsx.json',
'澳门': './json/data-1482909771696-ByVIdJWBx.json',
'济南市': './json/370100.json'
};
//各省份的数据
var allData = [
{ name: '海门', type: 2 }, { name: '青岛', type: 2 }, { name: '上海', type: 2 }, { name: '重庆', type: 2 }, { name: '河北', type: 2 }, { name: '河南', type: 2 }, { name: '云南', type: 2 }, { name: '辽宁', type: 2 }, { name: '黑龙江', type: 2 }, { name: '湖南', type: 2 }, { name: '安徽', type: 2 },
{ name: '山东', type: 2 }, { name: '新疆', type: 2 }, { name: '江苏', type: 2 }, { name: '浙江', type: 2 }, { name: '江西', type: 2 }, { name: '湖北', type: 2 }, { name: '广西', type: 2 }, { name: '甘肃', type: 2 }, { name: '山西', type: 2 }, { name: '内蒙古', type: 2 }, { name: '陕西', type: 2 },
{ name: '吉林', type: 2 }, { name: '福建', type: 2 }, { name: '贵州', type: 2 }, { name: '广东', type: 2 }, { name: '青海', type: 2 }, { name: '西藏', type: 2 }, { name: '四川', type: 2 }, { name: '宁夏', type: 2 }, { name: '海南', type: 2 }, { name: '台湾', type: 2 }, { name: '香港', type: 2 },
{ name: '澳门', type: 2 }, { name: '海门', type: 2 }, { name: '鄂尔多斯', type: 2 }, { name: '即墨', type: 2 }, { name: '蓬莱', type: 2 }, { name: '金坛', type: 2 }, { name: '张家口', type: 2 }, { name: '泰州', type: 2 }, { name: '荣成', type: 2 }, { name: '连云港', type: 2 }, { name: '赤峰', type: 2 },
{ name: '菏泽', type: 2 }, { name: '长沙', type: 2 }, { name: '石家庄', type: 2 }, { name: '郑州', type: 2 }, { name: '乌鲁木齐', type: 2 }, { name: '苏州', type: 2 }, { name: '茂名', type: 2 }, { name: '太原', type: 2 }, { name: '连云港', type: 2 }, { name: '南通', type: 2 }];
var province = [
{ name: '北京', type: 1 }, { name: '天津', type: 1 }, { name: '上海', type: 1 }, { name: '重庆', type: 1 }, { name: '河北', type: 1 }, { name: '河南', type: 1 }, { name: '云南', type: 1 }, { name: '辽宁', type: 1 }, { name: '黑龙江', type: 1 }, { name: '湖南', type: 1 }, { name: '安徽', type: 1 },
{ name: '山东', type: 1 }, { name: '新疆', type: 1 }, { name: '江苏', type: 1 }, { name: '浙江', type: 1 }, { name: '江西', type: 1 }, { name: '湖北', type: 1 }, { name: '广西', type: 1 }, { name: '甘肃', type: 1 }, { name: '山西', type: 1 }, { name: '内蒙古', type: 1 }, { name: '陕西', type: 1 },
{ name: '吉林', type: 1 }, { name: '福建', type: 1 }, { name: '贵州', type: 1 }, { name: '广东', type: 1 }, { name: '青海', type: 1 }, { name: '西藏', type: 1 }, { name: '四川', type: 1 }, { name: '宁夏', type: 1 }, { name: '海南', type: 1 }, { name: '台湾', type: 1 }, { name: '香港', type: 1 },
{ name: '澳门', type: 1 }];
//经纬度
var geoCoordMap = {
"海门": [121.15, 31.89], "鄂尔多斯": [109.781327, 39.608266], "招远": [120.38, 37.35], "舟山": [122.207216, 29.985295], "齐齐哈尔": [123.97, 47.33], "盐城": [120.13, 33.38], "赤峰": [118.87, 42.28],
"青岛": [120.33, 36.07], "乳山": [121.52, 36.89], "金昌": [102.188043, 38.520089], "泉州": [118.58, 24.93], "莱西": [120.53, 36.86], "日照": [119.46, 35.42], "胶南": [119.97, 35.88], "南通": [121.05, 32.08],
"拉萨": [91.11, 29.97], "云浮": [112.02, 22.93], "梅州": [116.1, 24.55], "文登": [122.05, 37.2], "上海": [121.48, 31.22], "攀枝花": [101.718637, 26.582347], "威海": [122.1, 37.5], "承德": [117.93, 40.97],
"厦门": [118.1, 24.46], "汕尾": [115.375279, 22.786211], "潮州": [116.63, 23.68], "丹东": [124.37, 40.13], "太仓": [121.1, 31.45], "曲靖": [103.79, 25.51], "烟台": [121.39, 37.52], "福州": [119.3, 26.08],
"瓦房店": [121.979603, 39.627114], "即墨": [120.45, 36.38], "抚顺": [123.97, 41.97], "玉溪": [102.52, 24.35], "张家口": [114.87, 40.82], "阳泉": [113.57, 37.85], "莱州": [119.942327, 37.177017],
"湖州": [120.1, 30.86], "汕头": [116.69, 23.39], "昆山": [120.95, 31.39], "宁波": [121.56, 29.86], "湛江": [110.359377, 21.270708], "揭阳": [116.35, 23.55], "荣成": [122.41, 37.16], "连云港": [119.16, 34.59],
"葫芦岛": [120.836932, 40.711052], "常熟": [120.74, 31.64], "东莞": [113.75, 23.04], "河源": [114.68, 23.73], "淮安": [119.15, 33.5], "泰州": [119.9, 32.49], "南宁": [108.33, 22.84], "营口": [122.18, 40.65],
"惠州": [114.4, 23.09], "江阴": [120.26, 31.91], "蓬莱": [120.75, 37.8], "韶关": [113.62, 24.84], "嘉峪关": [98.289152, 39.77313], "广州": [113.23, 23.16], "延安": [109.47, 36.6], "太原": [112.53, 37.87],
"清远": [113.01, 23.7], "中山": [113.38, 22.52], "昆明": [102.73, 25.04], "寿光": [118.73, 36.86], "盘锦": [122.070714, 41.119997], "长治": [113.08, 36.18], "深圳": [114.07, 22.62], "珠海": [113.52, 22.3],
"宿迁": [118.3, 33.96], "咸阳": [108.72, 34.36], "铜川": [109.11, 35.09], "平度": [119.97, 36.77], "佛山": [113.11, 23.05], "海口": [110.35, 20.02], "江门": [113.06, 22.61], "章丘": [117.53, 36.72],
"肇庆": [112.44, 23.05], "大连": [121.62, 38.92], "临汾": [111.5, 36.08], "吴江": [120.63, 31.16], "石嘴山": [106.39, 39.04], "沈阳": [123.38, 41.8], "苏州": [120.62, 31.32], "茂名": [110.88, 21.68],
"嘉兴": [120.76, 30.77], "长春": [125.35, 43.88], "胶州": [120.03336, 36.264622], "银川": [106.27, 38.47], "张家港": [120.555821, 31.875428], "三门峡": [111.19, 34.76], "锦州": [121.15, 41.13],
"南昌": [115.89, 28.68], "柳州": [109.4, 24.33], "三亚": [109.511909, 18.252847], "自贡": [104.778442, 29.33903], "吉林": [126.57, 43.87], "阳江": [111.95, 21.85], "泸州": [105.39, 28.91],
"西宁": [101.74, 36.56], "宜宾": [104.56, 29.77], "呼和浩特": [111.65, 40.82], "成都": [104.06, 30.67], "大同": [113.3, 40.12], "镇江": [119.44, 32.2], "桂林": [110.28, 25.29], "张家界": [110.479191, 29.117096],
"宜兴": [119.82, 31.36], "北海": [109.12, 21.49], "西安": [108.95, 34.27], "金坛": [119.56, 31.74], "东营": [118.49, 37.46], "牡丹江": [129.58, 44.6], "遵义": [106.9, 27.7], "绍兴": [120.58, 30.01],
"扬州": [119.42, 32.39], "常州": [119.95, 31.79], "潍坊": [119.1, 36.62], '重庆': [107.7539, 30.1904], "台州": [121.420757, 28.656386], "南京": [118.78, 32.04], "滨州": [118.03, 37.36], "贵阳": [106.71, 26.57],
"无锡": [120.29, 31.59], "本溪": [123.73, 41.3], "克拉玛依": [84.77, 45.59], "渭南": [109.5, 34.52], "马鞍山": [118.48, 31.56], "宝鸡": [107.15, 34.38], "焦作": [113.21, 35.24], "句容": [119.16, 31.95],
"北京": [116.46, 39.92], "徐州": [117.2, 34.26], "衡水": [115.72, 37.72], "包头": [110, 40.58], "绵阳": [104.73, 31.48], "乌鲁木齐": [87.68, 43.77], "枣庄": [117.57, 34.86], "杭州": [120.19, 30.26],
"淄博": [118.05, 36.78], "鞍山": [122.85, 41.12], "溧阳": [119.48, 31.43], "库尔勒": [86.06, 41.68], "安阳": [114.35, 36.1], "开封": [114.35, 34.79], "济南": [117, 36.65], "德阳": [104.37, 31.13],
"温州": [120.65, 28.01], "九江": [115.97, 29.71], "邯郸": [114.47, 36.6], "临安": [119.72, 30.23], "兰州": [103.73, 36.03], "沧州": [116.83, 38.33], "临沂": [118.35, 35.05], "南充": [106.110698, 30.837793],
"天津": [117.2, 39.13], "富阳": [119.95, 30.07], "泰安": [117.13, 36.18], "诸暨": [120.23, 29.71], "郑州": [113.65, 34.76], "哈尔滨": [126.63, 45.75], "聊城": [115.97, 36.45], "芜湖": [118.38, 31.33],
"唐山": [118.02, 39.63], "平顶山": [113.29, 33.75], "邢台": [114.48, 37.05], "德州": [116.29, 37.45], "济宁": [116.59, 35.38], "荆州": [112.239741, 30.335165], "宜昌": [111.3, 30.7], "义乌": [120.06, 29.32],
"丽水": [119.92, 28.45], "洛阳": [112.44, 34.7], "秦皇岛": [119.57, 39.95], "株洲": [113.16, 27.83], "石家庄": [114.48, 38.03], "莱芜": [117.67, 36.19], "常德": [111.69, 29.05], "保定": [115.48, 38.85],
"湘潭": [112.91, 27.87], "金华": [119.64, 29.12], "岳阳": [113.09, 29.37], "长沙": [113, 28.21], "衢州": [118.88, 28.97], "廊坊": [116.7, 39.53], "菏泽": [115.480656, 35.23375], "合肥": [117.27, 31.86],
"武汉": [114.31, 30.52], "大庆": [125.03, 46.58]
};
//转换数据
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];//名称
var type = data[i].type;//状态 1 是房屋 2是土地 3是城市
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
type: type
});
}
}
return res;
};
//单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
dtsr.on('click', function (params) {
clearTimeout(timeFn);
timeFn = setTimeout(function () {
var name = params.name; //地区name
var mapCode = provinces[name]; //地区的json数据
if (!mapCode) {
alert("无此区域地图显示,双击后退出")
return;
}
loadMap(mapCode, name);
}, 250);
});
// 绑定双击事件，返回全国地图
dtsr.on('dblclick', function (params) {
//当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
//返回全国地图
loadMap('./json/china.json', 'china'); //初始化全国地图
});
/**
根据不同参数实现弹出tooltip 不同的效果
触发信息
*/
function TooltiptipHtml(name, stype) {
var tipHtml = '';
try {
if (stype == 1) {
tipHtml =
'<div style="width: 180px;height: 210px;border:2px solid #aaa9a9;background-color: #ffff;color: #000; box-shadow: 11px 12px 5px #0000002e, 5px -5px 5px #0000001f, -5px 5px 5px #ffff, -5px -5px 5px #0000001a;">' +
'<div style="width:90%;height:40px;line-height:40px;padding-left: 20px;padding-top: 10px;">' +
'<span style="margin-left:10px;font-size:22px;font-weight: 900;">' + name + '</span>' +
'</div>' +
'<div style="margin: 10px 30px 0px 30px;;line-height: 27px;">' +
'<p style="font-size:16px;">' +
'房产：' + '<span style="color:#11ee7d;margin:0 6px;"></span>' + '个' +
'</p>' +
'<p style="font-size:16px;">' +
'净值：' + '<span style="color:#f48225;margin:0 6px;"></span>' + '千万' +
'</p>' +
'</div>' +
'<div style = "margin: 20px 30px 30px 30px;;line-height: 27px;">' +
'<p style="font-size:16px;">' +
'房产：' + '<span style="color:#11ee7d;margin:0 6px;"></span>' + '个' +
'</p>' +
'<p style="font-size:16px;">' +
'净值：' + '<span style="color:#f48225;margin:0 6px;"></span>' + '千万' +
'</p>' +
'</div>' +
'</div>';
} else if (stype == 2) {
tipHtml =
'<div style="width: 240px;height: 180px;border:2px solid #aaa9a9;background-color: #ffff;color: #000; box-shadow: 11px 12px 5px #0000002e, 5px -5px 5px #0000001f, -5px 5px 5px #ffff, -5px -5px 5px #0000001a;">' +
'<div style="margin: 10px 30px 0px 30px;;line-height: 27px;">' +
'<p style="font-size:16px;line-height: 30px">' +
'资产名称：<span style="font-weight: 700">432432</span>' +
'</p>' +
'<p style="font-size:16px;line-height: 30px">' +
'资产编号：<span style="font-weight: 700">432432</span>' +
'</p>' +
'<p style="font-size:16px;line-height: 30px">' +
'权属单位：<span style="font-weight: 700">432432</span>' +
'</p>' +
'<p style="font-size:16px;line-height: 30px">' +
'使用单位：<span style="font-weight: 700">432432</span>' +
'</p>' +
'<p style="font-size:16px;line-height: 30px">' +
'使用情况：<span style="font-weight: 700">432432</span>' +
'</p>' +
'</div>' +
'</div>'
}
} catch (error) {
console.log(error)
} finally {
return tipHtml;
}
}
function loadMap(mapCode, name) {
$.getJSON(mapCode, function (data) {
if (data) {
echarts.registerMap(name, data);
option = {
backgroundColor: '#aaa',
tooltip: {
show: true,
formatter: function (params) {
if (!Affectsthedepth)
var tipHtml = TooltiptipHtml(params.name, params.data.type);
return tipHtml;
},
position: function (p) { //其中p为当前鼠标的位置
return [p[0] + 40, p[1] - 40];
},
},
geo: {
map: name,
},
series: [
{
name: name,
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(allData),
},
{
name: name,
type: 'map',
mapType: name,
label: {
normal: {
show: true,//显示省份标签
textStyle: { color: "#fbfdfe" }//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle: { color: "#323232" }
}
},
//地图颜色
itemStyle: {
normal: {
borderWidth: .5, //区域边框宽度
borderColor: '#0550c3', //区域���框颜色
areaColor: "#42A4F4", //区域颜色
color: 'red'
},
//鼠标移上
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
areaColor: "#ece39e",
}
},
selectedMode: 'false', //是否允许选中多个区域
data: province,
}
],
};
dtsr.setOption(option);
setTimeout(function () {
window.onresize = function () {
dtsr.resize();
}
}, 200);
Affectsthedepth = name != 'china' ? true : false;
}
});
}
//End
</script>
</html>
json文件
链接：https://pan.baidu.com/s/1kJ_aPfU2GKS0fQH21K3DTg
提取码：63rb
上面的只能深入到省，省下面的都要小钱钱，如果有外网的话可以参考一下
https://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ
1332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
