| Echarts + DataV.GeoAtlas 实现大区划分地图下钻 | 您所在的位置：网站首页 › 中国7大区 › Echarts + DataV.GeoAtlas 实现大区划分地图下钻 |
Echarts + DataV.GeoAtlas 实现大区划分地图下钻
|
因业务驱动，需要实现中国行政地图下钻大区（自定义）、省、市四级，本文讲解如何实现地图自定义区域下钻。 思路 需要各省市行政地图数据各级之间需存在关联关系，方便下钻大区是几个省份的集合，需要做地图数据首先我查阅了网上的相关资料，发现基于行政地图下钻的案例很多，但基于自定义区域下钻的案例很少。 搜遍了全网，发现了一个阿里云旗下的一个的数据可视化平台 DataV.GeoAtlas 很好用。 示例我们把中国地图划分为7大区，分别是东北、华北、华中、华南、华东、西南、西北、港澳台。每个大区是由几个省份组合而成。 先做大区数据，以东北举例，下属省份为黑龙江、吉林、辽宁。 在范围选择器中，点击取消包含子区域，把省份json数据下载到本地。
点击边界生成器，点击上传，把刚才下载下来的省份数据依次上传
选中所有区域，点击合并，然后点击交集
新增列，字段名称为name，值输入北部大区，选中然后导出GeoJSON
点击层级生成器，根节点绑定中国
点击新增子节点
点击绑定数据，切换到自定义数据，将刚才导出的GeoJSON上传
重命名为北部大区
在北部大区下点击批量导入子节点，把刚才下载下来的省份数据上传
至此，一份中国包含北部大区以及其下所有省份的地图数据做完了。 接下来点击导出层级（开放格式），会得到两份文件，一份是地图json，一份是关系映射。其中地图json是渲染地图时所用的数据，而关系映射主要用来实现下一步地图下钻或页面交互。 做到这里需要注意，阿里云下载下来的数据直接放到我们的echarts中是加载无法使用的，这里涉及到一个知识点，请先自行科普topojson和geojson的区别。下载下来的数据是topojson格式的，需要我们转换一下，转换成我们需要的geojson格式。 自定义数据请参考 DataV.GeoAtlas 使用文档 · 语雀 对于开放格式而言，即为 TopoJSON，开发则可以利用topojson-client - npm 这个包将 TopoJSON 转为 GeoJSON。 接下来是代码实现（vue举例，其实和框架关系不大，其他框架做参考） import * as echarts from "echarts"; import * as topojson from "topojson-client"; export default { props: ["mapJson", "width", "height"], data() { return { dataList: [ // 这里是中国和大区之间的映射关系 { name: "中国", treeID: "1", parent: null, treeName: "中国_1", }, { name: "北部", treeID: "1-1", parent: "1", treeName: "北部_1-1", ename: 'north' // 新增的字段，方便地图下钻 } ], chart: null, }; }, methods: { initEchart() { // 刚才下载下来的地图json const areaMapJson = require("./area.json"); // 通过组件topojson-client把topojson转换为geojson 只取payload const ChinaResult = topojson.feature( areaMapJson.payload, areaMapJson.payload.objects.collection ); // 因为是一级一级下钻，所以只遍历第一层子级即可 this.dataList.forEach((i, index) => { if (index > 0) { let result = topojson.feature( areaMapJson.children[i.treeID].payload, areaMapJson.children[i.treeID].payload.objects.collection ); ChinaResult.features = [...ChinaResult.features, ...result.features]; } }); echarts.registerMap("china", ChinaResult); let dataList = this.dataList; const _this = this; this.chart = echarts.init(this.$el); var option = { tooltip: { padding: 0, textStyle: { fontSize: 14, color: "#7DD1FF", }, }, visualMap: { min: 0, max: 1000, left: "left", top: "bottom", text: ["高", "低"], //取值范围的文字 inRange: { color: ["lightskyblue", "yellow", "orangered"], //取值范围的颜色 }, show: true, //图注 }, geo: { map: "china", //引入地图数据 roam: true, //不开启缩放和平移 zoom: 1, //视角缩放比例 label: { normal: { show: true, fontSize: "16", color: "rgba(0,0,0,0.7)", }, }, itemStyle: { normal: { borderColor: "rgba(0, 0, 0, 0.2)", }, emphasis: { //高亮的显示设置 areaColor: "skyblue", //鼠标选择区域颜色 shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, }, // 鼠标悬浮提示框 series: [ { name: "大区", type: "map", geoIndex: 0, data: this.dataList, }, ], }; this.chart.setOption(option); // 点击大区事件，进行下钻 this.chart.on("click", function (params) { if (!params.data.ename) { alert("暂无" + params.name + "地图数据"); return; } // 这里写下钻代码，有多种方式，可页面跳转可组件传参 // 传值把ename(板块英文名),name(板块中文名)带过去 }); }, }, mounted() { // this.initEchart(); }, };以上，基本实现了中国地图包含自定义大区的效果，实际应用中可以把其他几个大区补全即可，方法一致。
以上实现了中国>大区，但要实现下钻还要实现大区>省份、省份（直辖市）>市（区）。 因过程有所重复，不做详细展示，简单说一下接下来要做的事： 进入层级选择器根节点上传geojson文件绑定大区新建子节点省份，绑定【行政区数据集】，取消选中【同时添加所有下游节点】导出层级（开放格式）依次把每个大区的层级导入下来，几个大区就导几个文件，文件名称要与映射中起名的ename一致，加载方法与上面代码一致。 接下来是下钻，在上级地图中把ename传入下级地图组件，下级地图组件通过文件名称加载数据 // 下级地图组件接收入参，加载地图 const areaEname = this.mapJson.ename; const areaMapJson = require("./areaData/" + areaEname + ".json"); // 与上面代码加载方式一致如再往下钻，则直接操作行政区数据集即可，以此类推。 以上就是Echarts + DataV.GeoAtlas 实现地图下钻。过程虽有些繁琐，但想我泱泱大国，地域之广泛，岂是简简单单就能写出来的，哈哈，开个玩笑。 欢迎有问题随时留言交流。 |
【本文地址】