使用echarts实现自定义区域地图
2019-04-28 本文已影响0人
往后余生9375
下载echarts jquery
https://github.com/apache/incubator-echarts/archive/4.2.1.zip
https://code.jquery.com/jquery-1.9.1.min.js
下载自定义地图文件
1.在线获取县级Json
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
2.自定义区域选择（以下简称“工具”）： http://geojson.io/#map=10/26.6778/106.3360
成都新增区域JSON
https://geo.datav.aliyun.com/areas_v2/bound/510100_full.json
地图上显示点
显示三维地图
https://www.cnblogs.com/telwanggs/p/11056515.html
基于Echarts插件的省市区多级地图下钻和返回功能实现
https://blog.csdn.net/mulumeng981/article/details/76400687
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>决策系统</title>
<script src="echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="charts" style="width:500px;height: 400px;"></div>
<script src="index.js"></script>
</body>
</html>
620100.js
/**兰州市区县列表*/
var lanZhou = [
{name: '永登县', value: "620121"},
{name: '红古区', value: "620111"},
{name: '西固区', value: "620104"},
{name: '安宁区', value: "620105"},
{name: '皋兰县', value: "620122"},
{name: '七里河区', value: "620103"},
{name: '城关区', value: "620102"},
{name: '榆中县', value: "620123"}
];
js
var myChart = echarts.init(document.getElementById('charts'));
myChart.showLoading();
$.get('620100_full.json', function (usaJson) {
myChart.hideLoading();
echarts.registerMap('LZ', usaJson);
option = {
title: {
text: '兰州市行政区域地图',
subtext: '',
sublink: '',
left: 'center'
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
var value = params.value;
return params.seriesName + '<br/>' + params.name + ': ' + value;
}
},
series: [
{
name: '兰州市政区域代码',
type: 'map',
roam: true,
map: 'LZ',
itemStyle:{
//默认显示地图地名
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
// 文本位置修正
textFixed: {
Alaska: [20, -20]
},
data: lanZhou
}
]
};
myChart.setOption(option);
});
//单击事件
myChart.on('click', function (params) {
alert(params.value);
});
效果展示
地图点击进入下级
https://blog.csdn.net/daiqisi/article/details/81017740?utm_source=blogxgwz7
