三原县地图可视化大屏数据
前言
可视化大屏数据
在学习地图可视化数据的时候，发现在网上只能找到省、市、县的地图json数据，到县级别只能到县，数据却不能精确到镇。网上没有三原精确到镇的json数据，于是自己根据网上教程，自己制作并完成了陕西省三原县的地图数据，已经精确到镇，原始地图数据取决于Bigemap。
一、新建前端项目
开发工具：HBuilder
二、编写代码
1.编写代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>三原县地图数据可视化</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css" />
<style type="text/css">
.biao1{
margin: -0% 1%;
float: left;
font-size:15px ;
color: white;
}
#cg{
margin: -0% 4%;
float: right;
color: white;
}
</style>
</head>
<body class="bg01">
<header class="header">
<h3>三原县地图数据可视化</h3>
<span class="biao1">数据由Bigemap、百度提供</span>
<span id="cg">2021/6/4 12:00:00</span>
</header>
<div class="wrapper">
<div class="container-fluid">
<div class="row fill-h">
<div class="col-lg-3 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-2">
<div class="xpanel">
<!-- 地图飞线 -->
<div class="fill-h" id="flyMap"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-2">
<div class="xpanel">
<!-- 地图 -->
<div class="fill-h" id="worldMap"></div>
</div>
</div>
</div>
<div class="col-lg-6 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-1">
<div class="xpanel">
<!-- 地图散点 -->
<div class="fill-h" id="scatterMap"></div>
</div>
</div>
</div>
<div class="col-lg-3 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-2">
<div class="xpanel">
<!-- 地图 -->
<div class="fill-h" id="provinceMap"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-2">
<div class="xpanel">
<!-- 地图 -->
<div class="fill-h" id="cityMap"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts-3.8.5.min.js"></script>
<script type="text/javascript" src="js/map/sanyuan.js"></script>
<script type="text/javascript" src="js/map/lingqian.js"></script>
<script type="text/javascript">
//时间js
setInterval("cg.innerHTML=new Date().toLocaleString()", 1000);
$(function() {
/******************* 地图飞线 ******************/
//初始化echarts实例
const flyMap = echarts.init(document.getElementById("flyMap"));
//城市经纬度
const originName = '三原县人民政府';
const flyGeo = {
'城关镇': [108.95101 , 34.61900],
'渠岸镇': [108.99672 , 34.62704],
'陵前镇': [108.99914 , 34.76526],
'新兴镇': [108.90138 , 34.78284],
'陂西镇': [109.11559 , 34.62462],
'鲁桥镇': [108.93353 , 34.69138],
'大程镇': [109.09528 , 34.67382],
'西阳镇': [109.01959 , 34.66483],
'独李镇': [109.08974 , 34.63880],
'嵯峨镇': [108.91569 , 34.72466],
'安乐镇': [109.02476 , 34.60192],
'三原县人民政府': [108.94720 , 34.62353]
};
//飞线数据
var flyVal = [
[{name: '三原县人民政府'}, {name: '城关镇', value: 100}],
[{name: '三原县人民政府'}, {name: '渠岸镇', value: 35}],
[{name: '三原县人民政府'}, {name: '陵前镇', value: 25}],
[{name: '三原县人民政府'}, {name: '新兴镇', value: 55}],
[{name: '三原县人民政府'}, {name: '陂西镇', value: 60}],
[{name: '三原县人民政府'}, {name: '鲁桥镇', value: 45}],
[{name: '三原县人民政府'}, {name: '大程镇', value: 35}],
[{name: '三原县人民政府'}, {name: '西阳镇', value: 35}],
[{name: '三原县人民政府'}, {name: '独李镇', value: 40}],
[{name: '三原县人民政府'}, {name: '嵯峨镇', value: 45}],
[{name: '三原县人民政府'}, {name: '安乐镇', value: 50}],
];
//数据转换，转换后格式：[{fromName:'cityName', toName:'cityName', coords:[[lng, lat], [lng, lat]]}, {...}]
const convertFlyData = function(data) {
let res = [];
for(let i=0;i<data.length;i++) {
let dataItem = data[i];
let toCoord = flyGeo[dataItem[0].name];
let fromCoord = flyGeo[dataItem[1].name];
if(fromCoord && toCoord) {
res.push({
fromName: dataItem[1].name,
toName: dataItem[0].name,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
//报表配置
const flySeries = [];
[[originName, flyVal]].forEach(function(item, i) {
flySeries.push({
name: item[0],
type: 'lines',
zlevel: 1,
symbol: ['none', 'none'],
symbolSize: 0,
effect: { //特效线配置
show: true,
period: 5, //特效动画时间，单位s
trailLength: 0.1, //特效尾迹的长度，从0到1
symbol: 'arrow',
symbolSize: 5
},
lineStyle: {
normal: {
color: '#f19000',
width: 1,
opacity: 0.6,
curveness: 0.2 //线的平滑度
}
},
data: convertFlyData(item[1])
}, {
name: item[0],
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //涟漪特效
period: 5, //特效动画时长
scale: 4, //波纹的最大缩放比例
brushType: 'stroke' //波纹的绘制方式：stroke | fill
},
label: {
//显示地图名称
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbol: 'circle',
symbolSize: function (val) {
//根据某项数据值设置符号大小
return val[2] / 10;
},
itemStyle: {
normal: {
color: '#f19000'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: flyGeo[dataItem[1].name].concat([dataItem[1].value])
};
})
}, { //与上层的点叠加
name: item[0],
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 3,
symbol: 'circle',
symbolSize: function (val) {
//根据某项数据值设置符号大小
return val[2] / 15;
},
itemStyle: {
normal: {
color: '#f00'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: flyGeo[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
//报表配置项
const flyMapOpt = {
title: {
//show: false,
text: '三原县地图飞线',
x: 'center',
textStyle: {
color: '#fff',
},
},
tooltip: {
trigger: 'item',
formatter: function(params) {
if(params.value) {
return params.name + ' : ' + params.value[2];
}else {
return params.name;
}
}
},
geo: {
map: '三原县',
roam: false, //开启鼠标缩放和漫游
zoom: 1, //地图缩放级别
selectedMode: false, //选中模式：single | multiple
left: 0,
right: 0,
top: 0,
bottom: 0,
layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
layoutSize: '100%', //保持地图宽高比
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#101f32',
borderWidth: 1.1,
borderColor: '#43d0d6'
},
emphasis: {
areaColor: '#069'
}
}
},
series: flySeries
};
//渲染报表
flyMap.setOption(flyMapOpt);
/* 作者：赵勇琦
时间：2023-02-22
描述：地图展示 三原县各镇面积地图 地图散点 */
//初始化echarts实例
const scatterMap = echarts.init(document.getElementById("worldMap"));
//城市经纬度
const scatterGeo = {
'城关镇': [108.95101 , 34.61900],
'渠岸镇': [108.99672 , 34.62704],
'陵前镇': [108.99914 , 34.76526],
'新兴镇': [108.90138 , 34.78284],
'陂西镇': [109.11559 , 34.62462],
'鲁桥镇': [108.93353 , 34.69138],
'大程镇': [109.09528 , 34.67382],
'西阳镇': [109.01959 , 34.66483],
'独李镇': [109.08974 , 34.63880],
'嵯峨镇': [108.91569 , 34.72466],
'安乐镇': [109.02476 , 34.60192]
};
//城市数据
const scatterVal = [
{
name: '城关镇',
value: 117255
},
{
name: '渠岸镇',
value: 23460
},
{
name: '陵前镇',
value: 43503
},
{
name: '新兴镇',
value: 27761
},
{
name: '陂西镇',
value: 27024,
},
{
name: '鲁桥镇',
value: 24133
},
{
name: '大程镇',
value: 36441
},
{
name: '西阳镇',
value: 22352
},
{
name: '独李镇',
value: 22088
},
{
name: '嵯峨镇',
value: 20663
},
{
name: '安乐镇',
value: 15349
}
];
//数据转换，转换后的格式：[{name: 'cityName', value: [lng, lat, val]}, {...}]
const convertScatterData = function(data) {
let res = [];
for(let i=0;i<data.length;i++) {
let geoCoord = scatterGeo[data[i].name];
if(geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
const sactterMapOpt = {
title: {
text: '三原县面积地图',
x: 'center',
textStyle: {
color: '#fff'
}
},
legend: {
data: ['面积'], //与series的name属性对应
orient: 'vertical',
y: 'bottom',
x: 'right',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return params.name + ' : ' + params.value[2];
}
},
visualMap: {
min:20663,
max:117255,
calculable: true,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
},
textStyle: {
color: '#fff'
}
},
geo: {
map: '三原县',
roam: false, //开启鼠标缩放和漫游
zoom: 1, //地图缩放级别
selectedMode: false, //选中模式：single | multiple
left: 0,
right: 0,
top: 0,
bottom: 0,
layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
layoutSize: '100%',
label: {
emphasis: {
show: true
}
},
itemStyle: {
normal: {
areaColor: '#101f32',
borderWidth: 1.1,
borderColor: '#fff'
},
emphasis: {
areaColor: '#069'
}
}
},
series: [{
name: '面积',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
},
data: convertScatterData(scatterVal)
}]
};
//渲染报表
scatterMap.setOption(sactterMapOpt);
/* 作者：赵勇琦
时间：2023-02-22
描述：地图展示 三原县各镇地图 */
//初始化echarts实例
$(function() {
// /* 地图 需要哪个省市的地图直接引用js 将下面的name以及mapType修改为对应省市名称*/
var maps = echarts.init(document.getElementById('scatterMap'));
option = {
title: {
//show: false,
text: '三原县地图',
x: 'center',
textStyle: {
color: '#fff',
}
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [{
name: '三原县',
type: 'map',
mapType: '三原县',
roam: false,
top: '8%',
zoom: 1.2,
x: '9%',
tooltip: {
formatter: function(params) {
var info = '<p style="font-size:18px">' + params.name + '</p><p style="font-size:14px">土地面积</p>'+params.value+'</p><p style="font-size:14px">km²</p>';;
return info;
},
backgroundColor: "#ff7f50", //提示标签背景颜色
textStyle: {
color: "#fff"
} //提示标签字体颜色
},
selectedMode: 'single', //multiple多选
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: "#231816"
}
},
areaStyle: {
color: '#B1D0EC'
},
color: '#B1D0EC',
borderColor: '#dadfde' //区块的边框颜色
},
emphasis: { //鼠标hover样式
label: {
show: true,
textStyle: {
color: '#fa4f04'
}
},
areaStyle: {
color: 'red'
}
}
},
data: [{
name: '陵前镇',
value: 76.6,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#f07c82',
borderColor: '#1ca9f2'
}
}
},
{
name: '新兴镇',
value: 77.91,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#00ffff',
borderColor: '#F9504A'
}
}
},
{
name: '嵯峨镇',
value: 80.1,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#8CEA00',
borderColor: '#8CEA00',
}
}
},
{
name: '大程镇',
value: 67.8,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#13d5ff',
borderColor: '#45b5ef'
}
}
},
{
name: '西阳镇',
value: 36.42,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#FFFD51',
borderColor: '#FFFD51',
}
}
},
{
name: '鲁桥镇',
value: 77.91,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#1c4587',
borderColor: 'salmon',
}
}
},
{
name: '城关镇',
value: 76.6,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#f6b26b',
borderColor: '#1ca9f2'
}
}
},
{
name: '渠岸镇',
value: 28.39,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#a2c4c9',
borderColor: '#88ddf5',
}
}
},
{
name: '独李镇',
value: 25.659,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: 'red',
borderColor: 'red'
}
}
},
{
name: '安乐镇',
value: 66,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#B766AD',
borderColor: '#B766AD',
}
}
},
{
name: '陂西镇',
value: 57.69,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: 'fuchsia',
borderColor: 'fuchsia',
}
}
},
]
}]
};
maps.setOption(option);
});
/* 作者：赵勇琦
时间：2023-02-22
描述：地图展示 陵前镇地图 */
$(function() {
// /* 地图 需要哪个省市的地图直接引用js 将下面的name以及mapType修改为对应省市名称*/
var maps = echarts.init(document.getElementById('provinceMap'));
option = {
title: {
//show: false,
text: '陵前镇地图',
x: 'center',
textStyle: {
color: '#fff',
}
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [{
name: '陵前镇',
type: 'map',
mapType: '陵前镇',
roam: false,
top: '8%',
zoom: 1.2,
x: '25%',
tooltip: {
formatter: function(params) {
var info = '<p style="font-size:18px">' + params.name + '</p><p style="font-size:14px">土地面积</p>'+params.value+'</p><p style="font-size:14px">km²</p>';;
return info;
},
backgroundColor: "#ff7f50", //提示标签背景颜色
textStyle: {
color: "#fff"
} //提示标签字体颜色
},
selectedMode: 'single', //multiple多选
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: "#231816"
}
},
areaStyle: {
color: '#B1D0EC'
},
color: '#B1D0EC',
borderColor: '#dadfde' //区块的边框颜色
},
emphasis: { //鼠标hover样式
label: {
show: true,
textStyle: {
color: '#fa4f04'
}
},
areaStyle: {
color: 'red'
}
}
},
data: [{
name: '陵前镇',
value: 76.6,
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
areaColor: '#f07c82',
borderColor: '#1ca9f2'
}
}
}
]
}]
};
maps.setOption(option);
});
/* 作者：赵勇琦
时间：2023-02-22
描述：地图展示 三原县各镇人口地图 */
//地图值
var data = [
{
name: '城关镇',
value: 76.6
},
{
name: '渠岸镇',
value: 28.39
},
{
name: '陵前镇',
value: 75
},
{
name: '新兴镇',
value: 77.91
},
{
name: '陂西镇',
value: 57.69,
},
{
name: '鲁桥镇',
value: 30.19
},
{
name: '大程镇',
value: 67.8
},
{
name: '西阳镇',
value: 36.42
},
{
name: '独李镇',
value: 25.659
},
{
name: '嵯峨镇',
value: 80.1
},
{
name: '安乐镇',
value: 66
}
];
//地图经纬度
var geoCoordMap = {
'城关镇': [108.95101 , 34.61900],
'渠岸镇': [108.99672 , 34.62704],
'陵前镇': [108.99914 , 34.76526],
'新兴镇': [108.90138 , 34.78284],
'陂西镇': [109.11559 , 34.62462],
'鲁桥镇': [108.93353 , 34.69138],
'大程镇': [109.09528 , 34.67382],
'西阳镇': [109.01959 , 34.66483],
'独李镇': [109.08974 , 34.63880],
'嵯峨镇': [108.91569 , 34.72466],
'安乐镇': [109.02476 , 34.60192]
};
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,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
title: {
text: '三原县各镇面积可视化数据',
subtext: 'km²',
//超链接
//sublink: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['人口'],
textStyle: {
color: '#fff'
}
},
geo: {
map: '三原县',
label: {
emphasis: {
show: true
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
name: '人口',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function(val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'Top 6',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 6)),//改变显示前几名
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
};
var myChart = echarts.init(document.getElementById('cityMap'));
myChart.setOption(option)
/********** 浏览器窗口改变时，重置报表大小 ****************/
window.onresize = function() {
flyMap.resize();
scatterMap.resize();
worldMap.resize();
provinceMap.resize();
cityMap.resize();
countyMap.resize();
}
});
</script>
</body>
</html>
2.运行结果
源码下载三原县地图数据可视化
总结
三原学子开发学习过程中，在做地图数据可视化过程中，希望可以用到，三原县地图数据已经精确到镇，首次填写了这方面的空白，相关资源文件免费下载，欢迎下载使用。
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
