uCharts 小程序地图下钻功能

站长

2023年09月20日 17:12 · 阅读数 13

uCharts 小程序地图下钻功能

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

项目简介

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

下面是最终效果图👇👇

uCharts 小程序地图下钻功能

文档地址

图表插件uCharts 文档地址：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仓库地址