uCharts 小程序地图下钻功能

最近在研究小程序图表，其中提到了一个地图下钻的功能，感觉挺有意思的，分享一下共同学习！

项目简介

这个Uni-App项目旨在提供一个可交互的地图，允许用户在中国地图的不同层级之间自由切换。用户可以从国家地图开始，然后深入到各省份地图，最终进入城市地图，点击不同区域/县级市查看详细信息。

下面是最终效果图👇👇

文档地址

• 
  
• 图表插件uCharts 文档地址：http://www.ucharts.cn/
  
• uCharts hbuildx插件市场地址：ext.dcloud.net.cn/plugin?id=2…
  
• 阿里云地图数据地址：datav.aliyun.com/tools/atlas…
  

准备工作

在开始之前，请确保你已经安装了Vue.js和Uni-App

并且准备好了模拟地图数据。这些数据将用于绘制地图。

地图数据遵循geoJson地图数据交换格式。如果你不熟悉geoJson，可以参考这里。

绘制中国地图

// 首先引入我们的mock数据
import mockData from '../../mock/index'

// onLoad中调用 drawChina 方法来绘制中国地图
drawChina() {

      uni.setNavigationBarTitle({
title: '中国地图'

      });
setTimeout(() => {
let series = mockData.china.features;
// 这里循环一下series，把需要的数据增加到serie的属性中，fillOpacity是根据数据来显示的颜色层级透明度
for (var i = 0; i < series.length; i++) {
// 这里模拟了随机数据，实际开发中请根据实际情况修改

          series[i].value = Math.floor(Math.random() * 1000)

          series[i].fillOpacity = series[i].value / 1000

          series[i].color = "#0D9FD8"

        }
// 这里把series赋值给chartData，这样就可以在页面中渲染出来了
this.chartData = {
series: series

        };

      }, 100);

    }

uCharts组件使用

插件导入后在uni_modules中,命名规则符合easyCom,可以直接在页面中使用

<qiun-data-charts

  type="map"

  canvas2d=""

  :chartData="chartData"

  :opts="opts"

  :inScrollView="true"

  :pageScrollTop="pageScrollTop"

  tooltipFormat="mapFormat"

  @getIndex="getIndex"

  @complete="complete"

/>

注释说明：

• 
  
• chartData 包含地图数据
  
• opts 是我们在 data 中定义的配置项
  
• tooltipFormat 类型为字符串，需要指定为 config-ucharts.js 或 config-echarts.js 中 formatter 下的属性值，
  这里我们使用了 mapFormat，可以在 config-ucharts.js 中查看
  
• 在页面中必须传入 pageScrollTop，并将 inScrollView 设置为 true，否则可能导致某些地图事件无法触发
  

事件说明：

• 
  
• @complete 事件是地图绘制完成后触发的事件，我们可以在这个事件中获取地图的实例，
  然后可以调用地图的方法进行进一步操作。
  
• @getIndex 事件是地图点击事件，我们可以获取到点击的地图信息，
  根据这个信息来判断是否需要进行下钻操作，如果需要下钻，可以替换 chartData 并重新绘制地图。
  

下钻操作

  // 点击地图获取点击的索引
getIndex(e) {
console.log('点击地图', e);
if (e.currentIndex > -1) {
switch (this.layout) {
case 'china':
this.layout = 'province';
break;
case 'province':
this.layout = 'city';
break;
case 'city':
this.layout = 'area';
break;
default:

          uni.showModal({
title: '提示',
content: '当前已经是最后一级地图，点击空白回到中国地图',
success: () => {


            }

          });
break;

      }

this.drawNext(e.currentIndex);

    } else {
this.layout = 'china';
this.drawChina();

    }

  }

以上代码中，我们通过 currentIndex 来判断当前点击的是哪个地图，然后根据 layout 的值来判断是否需要进行下钻操作。
如果需要下钻，我们就调用 drawNext 方法来绘制下一级地图。

这个demo中，我们只模拟了中国地图、省级地图、市级地图和区县级地图，如果在开发中我们需要根据adcode请求后端接口来获取地图数据

具体代码：git仓库地址