前言
最近大表哥接手了一个好几个亿的大项目。在开发关于乡镇地图相关的业务。通过本文记录开发的过程和遇到的问题。希望通过本文对有同样需求的小伙伴有所帮助。
面临的问题
在开发乡镇地图过程中，最麻烦的问题时解决乡镇地图的geojson数据问题。很多平台如阿里云仅仅支持县级平台。乡镇的地图数据是没有的。之前用过bigemap来下载地图的边界数据，但是现在收费了。在寻求无果的情况下，在万能的tb花重金（12元）购买了本市的所有乡镇的边界地图。
开发需求
利用echarts实现乡镇地图展示 实现散点图效果 实现飞线图效果 实现地图下钻
开发过程
01 处理边界数据
我们的边界数据是kml格式的。echarts中不能直接用，我们需要处理成json格式。这里我用https://geojson.io/这个网站进行处理。将乡镇边界地图依次导入网站。这里我以陇南市武都区为例。依次导入，注意不要漏掉。
依次导入后，save为geojson数据或者json格式。到这里我们的地图数据就处理完成了。
02 引用echarts相关文件
我们在html中引入echarts相关的js文件
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
03 定义地图div框架
<div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>
04 注册地图
$.get('./shell.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('武都区', geoJson);
shell.json就是我们导入的地图数据。
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<title>陇南市武都区乡镇地图</title>
</head>
<body>
<div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>
</body>
<script type="text/javascript">
var dom = document.getElementById('map');
var myChart = echarts.init(dom, null, {
});
var option;
window.onresize = myChart.resize;
myChart.showLoading();
$.get('./shell.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('武都区', geoJson);
myChart.setOption(
(option = {
// backgroundColor:'rgb(4,46,84)',//地图背景色
tooltip: {
trigger: 'item',
formatter: '{b}<br/>'
},
series: [
{
name: '武都区信息',
type: 'map',
map: '武都区',
itemStyle: {
normal: {
areaColor: '#0f58cc',
borderColor: '#fff',
},
emphasis: {
areaColor: '#389bb7', //鼠标指上市时的颜色
}
},
label: {
normal: {
formatter: '{b}',
position: 'bottom',
show: true, //不显示
textStyle: { // 地图上散点的字体样式
fontSize: 16,
fontWeight: '400',
color: '#fff' // 点上字的颜色
}
},
emphasis: {
show: true
}
},
}
]
})
);
});
</script>
</html>
散点图效果
定义散点坐标
var scatterData = [
{name: '大梁上', value: [105.05970756713864,33.26926121706097]},
{name: '月照乡', value: [105.156731,33.14043]},
{name: '鱼龙镇', value: [105.184746,33.508073]}
]
然后首先定义一个散点图层
geo: {
type: 'map',
map: '武都区', //chinaMap需要与registerMao中的变量名称保持一致
raom: true,
label: {
show: true
},
},
在series中设置散点层参数。
{
data:scatterData,
type:'effectScatter', //effectScatter为散点层
coordinateSystem:'geo', //指明散点使用geo系统
rippleEffect:{
scale:8,
}
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<title>陇南市武都区乡镇地图</title>
</head>
<body>
<div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>
</body>
<script type="text/javascript">
var dom = document.getElementById('map');
var myChart = echarts.init(dom, null, {
});
var option;
//定义散点坐标
var scatterData = [
{name: '大梁上', value: [105.05970756713864,33.26926121706097]},
{name: '月照乡', value: [105.156731,33.14043]},
{name: '鱼龙镇', value: [105.184746,33.508073]}
]
myChart.showLoading();
$.get('./shell.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('武都区', geoJson);
myChart.setOption(
(option = {
// backgroundColor:'rgb(4,46,84)',//地图背景色
geo: {
type: 'map',
map: '武都区', //chinaMap需要与registerMao中的变量名称保持一致
raom: true,
label: {
show: true
},
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>'
},
series: [
{
name: '武都区信息',
type: 'map',
map: '武都区',
itemStyle: {
normal: {
areaColor: '#0f58cc',
borderColor: '#fff',
},
emphasis: {
areaColor: '#389bb7', //鼠标指上市时的颜色
}
},
label: {
normal: {
formatter: '{b}',
position: 'bottom',
show: true, //不显示
textStyle: { // 地图上散点的字体样式
fontSize: 16,
fontWeight: '400',
color: '#fff' // 点上字的颜色
}
},
emphasis: {
show: true
}
},
},
{
data:scatterData,
type:'effectScatter',
coordinateSystem:'geo', //指明散点使用geo系统
rippleEffect:{
scale:8,
}
}
]
})
);
});
</script>
</html>
飞线图效果
我们先来定义一个小图标，图标用base编码。
var planePath =
'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
定义起点和终点坐标
var zuobao = [ {
fromName: '城关镇',
toName: '大梁上',
coords: [
[104.967931,33.369914],
[105.05970756713864,33.26926121706097]
],
value: 100
},
{
fromName: '城关镇',
toName: '月照乡',
coords: [
[104.967931,33.369914],
[105.164413,33.146652]
],
value: 100
} ]
最终完整代码
<div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>
0最终效果
更多精彩文章 欢迎关注我们
推荐站内搜索：最好用的开发软件、免费开源系统、渗透测试工具云盘下载、最新渗透测试资料、最新黑客工具下载……
还没有评论，来说两句吧...