uCharts 小程序地图下钻功能

uCharts 小程序地图下钻功能

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

项目简介

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

下面是最终效果图👇👇

文档地址

准备工作

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

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

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

绘制中国地图

javascript 复制代码
// 首先引入我们的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,可以直接在页面中使用

js 复制代码
<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.jsconfig-echarts.js 中 formatter 下的属性值, 这里我们使用了 mapFormat,可以在 config-ucharts.js 中查看
  • 在页面中必须传入 pageScrollTop,并将 inScrollView 设置为 true,否则可能导致某些地图事件无法触发

事件说明:

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

下钻操作

js 复制代码
  // 点击地图获取点击的索引
  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仓库地址

相关推荐
兔C4 小时前
微信小程序的轮播图学习报告
学习·微信小程序·小程序
用户48062260414156 小时前
使用uniapp开发微信小程序-框架搭建
微信小程序·uni-app
嘟嘟实验室6 小时前
微信小程序xr-frame透明视频实现
微信小程序·ffmpeg·音视频·xr
Stanford_11069 小时前
高级的SQL查询技巧有哪些?
sql·微信小程序·twitter·微信开放平台
美美的海顿11 小时前
spring boot 火车售票微信小程序LW
spring boot·后端·微信小程序·小程序·毕业设计
Kika写代码13 小时前
【微信小程序】1|底部图标 | 我的咖啡店-综合实训
微信小程序·小程序
JSON_L13 小时前
小程序 - 模拟时钟
微信·微信小程序·小程序
Kika写代码13 小时前
【微信小程序】2|轮播图 | 我的咖啡店-综合实训
前端·微信小程序·小程序
.生产的驴1 天前
SpringBoot 对接第三方登录 手机号登录 手机号验证 微信小程序登录 结合Redis SaToken
java·spring boot·redis·后端·缓存·微信小程序·maven
汤姆yu2 天前
基于微信小程序的乡村旅游系统
微信小程序·旅游·乡村旅游