网站添加缩略图,电子商务论文网站建设,wordpress手机单页面,做外贸的怎么建立自己的网站一. 前言
在众多 ECharts 图表类型中#xff0c;开发者始终绕不开的有各种各样的地图开发#xff0c;关于地图开发#xff0c;可能比其他图表相对繁琐一些#xff0c;其实说简单也简单#xff0c;说复杂也复杂#xff0c;其中不乏有层级地图、3D 地图等#xff0c;感觉…一. 前言
在众多 ECharts 图表类型中开发者始终绕不开的有各种各样的地图开发关于地图开发可能比其他图表相对繁琐一些其实说简单也简单说复杂也复杂其中不乏有层级地图、3D 地图等感觉地图开发已经被玩出了花。
在 ECharts 地图开发中地图下钻功能是重要的基础功能将来能为数据分析和展示提供更加直观和有效的方式。本篇文章我将会介绍如何利用 ECharts 实现一个完整的地图下钻功能让用户能够通过点击地图上的区域来实现层级的切换和数据的展示。
二. 什么是地图下钻功能
地图下钻Drill-down是一种常见的高级交互功能可以使用户能够深入地图的不同层级查看更加详细的地理数据帮助用户逐层深入地查看不同区域或层级的数据分布情况极大地增强了数据可视化的深度和用户体验。
地图下钻功能是指在地图上点击某个区域后该区域会进一步细化展示其下一级别的区域信息例如从省级地图下钻到市级地图再到区县级地图这种逐级细化的过程有助于我们更细致地分析和理解地域数据。例如下面这种效果 通过地图下钻功能用户可以通过交互操作深入地图的不同层级从整体的地图层级逐渐细化到更具体的区域层级用户可以更深入地了解地理数据探索不同区域的数据细节并进行更精确的数据分析和决策。这种交互式的地图功能可以极大地增强用户与数据之间的互动性和可视化体验提升数据分析和展示的效果。
在 ECharts 中实现地图下钻功能通常需要通过配置点击事件根据用户点击的区域进行数据更新从而实现地图的层级切换和展示。地图下钻功能广泛应用于各种数据可视化场景如地理信息系统、区域销售分析、人口统计等领域帮助用户更好地理解和利用地理数据。
三. 如何在 ECharts 中实现地图下钻
如何在 ECharts 中实现地图下钻我总结为以下 4 个步骤
准备地图数据初始化 ECharts 地图设置地图下钻事件监听器实现地图下钻
在进行地图下钻功能之前我们需要先实例化一个最基础的中国地图为地图下钻做准备。之前我写过一篇文章讲述如何快速的创建一个合规的中国地图。
在这里我们简单的总结一下完成两步就可以渲染一个中国地图。
1. 准备地图数据
首先我们需要准备多层级的地图数据比如国家、省份、城市等各级别的地理数据以及每个区域对应的数据指标这些数据通常是以 JSON 格式提供的地理信息数据。同时确保数据格式符合 ECharts 的要求可以参考官方文档了解各种地图类型的数据格式。
我们可以在一些其他网站获取最新的 geoJson比如我是通过阿里云 DataV 数据可视化平台下载最新的 json 数据文件以保证目前所有市区的数据都是最新的。
如下图所示选择数据版本后点击页面上的下载按钮后即可以下载 json 文件: 本地调试也可以使用在线的 JSON API 接口获取数据不过仅限于本地测试使用线上会 403 错误 解决 403 问题参考文章巧用 meta 标签设置 referrer 解决 403 Forbidden 问题 2. 初始化 ECharts 地图
在 ECharts 的配置项中配置地图组件并设置合适的地图类型如中国地图、世界地图等以及需要展示的数据和样式确保每个区域都有对应的数据用于显示。
四. 实现地图下钻
实现地图下钻的关键逻辑在于为地图添加点击事件监听器当用户点击地图上的某个区域时触发相应的事件处理函数根据点击的区域获取下一级别的地图数据并更新图表。
实例场景比如我点击山东省可以查看山东省下各市级地图点击青岛市进而查看青岛市下各区级地图。
实现逻辑 当用户点击某个区域时例如山东省获取到该区域对应的编码。 通过该区域对应的编码获取到该区域的 geoJson 数据。 通过该区域的 geoJson 数据渲染到 ECharts 地图组件上。
接下来我们一步一步进行分析。
1. 获取区域编码
首先需要给地图添加点击事件监听器当用户点击地图时获取到用户点击该区域对应的编码。 如图所示通过上述的操作我们能够轻松的获取到该区域的地理编码 adcode 和名称。
2. 获取点击区域地图 JSON 数据
获取到地理编码 adcode 和名称之后接下来需要通过 adcode 来获取子区域的 geoJson以下的代码是通过调用阿里云 DataV 在线的 JSON API 接口获取到的数据。 注意过调用阿里云 DataV 在线的 JSON API 接口获取到的数据仅限于调试线上会 403 错误如果要上线需要将各个区域的数据下载到本地加载。 3. 渲染区域地图
通过上述操作我们成功的获取到了点击区域的子区域地图 JSON 数据通过 JSON 数据我们就可以动态的渲染区域地图了 五. 完善交互和效果
为提升用户体验可以添加一些校验避免在下钻过程中出现一些异常情况。比如 在地图下钻的最后一层如何判断处理该地图是否还有下级区域简单说就是是否还允许地图继续下钻 地图下钻过程过程中我需要返回上一级地图该如何实现
以上这两个问题是在地图开发中必须要考虑的基础问题下面我来分析一下如何优化这两种问题提升用户体验。
1. 处理递归下钻
在事件处理函数中根据用户点击的区域信息判断是否需要进行下钻操作。如果需要下钻才可以展示子区域的地图信息。如果已经到了地图最末端无法再进行下钻应该相应提示用户。
例如当用户点击到区县级地图且无法再下钻时可以考虑弹窗显示详细信息或者返回至上一级别。 2. 返回上一级地图
在用户点击地图进行下钻的过程中难免会返回上一层进行重新点击的需求这种需求应该怎么实现呢下面我来具体分析一下
添加返回按钮返回按钮显示隐藏逻辑处理比如仅当可以返回上一层地图级别的时候才显示返回记录地图下钻过程中的地图层级数据比如山东省 - 青岛市 - 崂山区根据记录的层级数据实现返回上一级操作
返回按钮的显示和隐藏
关于返回按钮的显示和隐藏可以有多种判断方式可以根据是否为初始化地图来判断只有当前渲染为初始地图时隐藏返回按钮也可以根据记录地图的层级数据数组判断是否显示返回按钮。
下述代码是根据 adcode 来判断是否为初始地图因为我是以中国地图为初始化地图所以判断 adcode 是否等于 100000 来判断是否显示 以上只是一种思路你可以考虑其他方式判断合理即可 3. 自定义 tooltip
加一些指向 tooltip 提示当用用鼠标指向省市区时显示省市区的名称、编码及层级数据。
完整代码
!--* Author: 彭麒* Date: 2024/12/5* Email: 1062470959qq.com* Description: 此源码版权归吉檀迦俐所有可供学习和借鉴或商用。--
templatedivh3地图下钻演示span stylefont-size: 20px;color: red;目前仅支持四川省!!!/span/h3a idback hrefjavascript:; v-showshowBackButton clickgoBack返回/adiv idmain styleheight: 800px/div/div
/templatescript setup
import { ref, onMounted } from vue;
import * as echarts from echarts;
const showBackButton ref(false);
const myChart ref(null);
const mapList ref([]);
//各省份的数据
const allData [{name: 北京
}, {name: 天津
}, {name: 上海
}, {name: 重庆
}, {name: 河北
}, {name: 河南
}, {name: 云南
}, {name: 辽宁
}, {name: 黑龙江
}, {name: 湖南
}, {name: 安徽
}, {name: 山东
}, {name: 新疆
}, {name: 江苏
}, {name: 浙江
}, {name: 江西
}, {name: 湖北
}, {name: 广西
}, {name: 甘肃
}, {name: 山西
}, {name: 内蒙古
}, {name: 陕西
}, {name: 吉林
}, {name: 福建
}, {name: 贵州
}, {name: 广东
}, {name: 青海
}, {name: 西藏
}, {name: 四川
}, {name: 宁夏
}, {name: 海南
}, {name: 台湾
}, {name: 香港
}, {name: 澳门
}];
for (var i 0; i allData.length; i) {allData[i].value Math.round(Math.random() * 100);
}
const getJSON async ({ name }, callback) {console.log(name);const url /map/${name}.json;try {const response await fetch(url);if (!response.ok) {throw new Error(Network response was not ok);}const data await response.json();callback(data);setBackbtn({ name });} catch (error) {alert(无此区域地图显示请查看其他区域);}
};const setBackbtn ({ name }) {mapList.value.push({ name });showBackButton.value name ! china;console.log(JSON.stringify(mapList.value));
};const goBack () {if (mapList.value.length 2) {const { name } mapList.value[mapList.value.length - 2];mapList.value.splice(-2, 2);getJSON({ name }, (data) {renderChart(name, data);});}
};const initChinaMap () {mapList.value [];getJSON({ name: china }, (data) {renderChart(china, data);});
};const renderChart (name, data) {echarts.registerMap(name, data);setOption(name, allData);
};const setOption (name, data) {const option {tooltip: {show: true,formatter: function(params) {if (params.data) return params.name params.data[value]},},visualMap: {type: continuous,text: [, ],showLabel: true,left: 50,min: 0,max: 100,inRange: {color: [#edfbfb, #b7d6f3, #40a9ed, #3598c1, #215096, ]},splitNumber: 0},series: [{name: MAP,type: map,mapType: name,selectedMode: false,//是否允许选中多个区域label: {normal: {show: true},emphasis: {show: true}},data: data}]};myChart.value.setOption(option, true);
};onMounted(() {myChart.value echarts.init(document.getElementById(main));myChart.value.on(click, (params) {if (params.data) {const { name, level } params.data;if (level district) {alert(无此区域地图显示);initChinaMap();return;}getJSON({ name }, (data) {renderChart(name, data);});}});initChinaMap();
});
/scriptstyle
body {text-align: center;
}
/style
六. 总结
通过本篇文章的详细讲述我们应该都有了一个明确的思路可以借助 ECharts 快速地实现地图下钻功能。当然本文完成的是核心下钻逻辑而且也没有对地图的样式进行一些复杂的样式配置在实际应用中可能还需要对颜色映射、数据标注等方面进行个性化定制但这些并不是难点相信参考 ECharts 配置项手册来进行配置地图属性也是非常容易实现的。
因此开发地图的关键点在于开发地图的过程中我们始终要有一个清晰明了的开发思路和步骤才能保证按部就班的实现功能并且避免一些不必要的 BUG 产生。
比如关于使用 ECharts 的图表渲染造成的内存溢出导致浏览器崩溃问题最终一步一步复盘代码才能解决问题。
七. 资源链接 代码演示地址中国地图下钻示例演示支持所有省市下钻演示 源码地址ECharts 地图下钻源码地址 geoJson 文件下载全国地图下钻 geoJson 完整版下载 20240312.zip 官方文档ECharts 地图配置项手册 由于时间原因目前我只导入了四川省的地图其他各个省市区的地图数据大家可以按需下载导入后面我会都导入到本地。感谢您的阅读 推荐文章
关于 ECharts 的系列文章大家可以点解查看以下文章进行了解 ECharts-GL 实战分享教你轻松实现 3D 地图下钻功能 使用 ECharts-GL 实现世界级、国家级、省市级 3D 地图 ECharts-GL 实战轻松实现 3D 旋转地球
