# ucharts-map-demo

**Repository Path**: zyhjeecode/ucharts-map-demo

## Basic Information

- **Project Name**: ucharts-map-demo
- **Description**: ucharts地图下钻demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2023-12-20
- **Last Updated**: 2023-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uCharts 小程序地图下钻功能

最近，我们再次收到了客户的需求，其中提到了一个地图下钻的功能。虽然考虑到目前客户基数相对较小，我们希望在资源分配上更加谨慎。我们可以进一步讨论该项目的可行性，并确保它与您的业务目标相符。领导说不行！人家给的太多了，你们就做吧！好吧，那就做吧！


## 项目简介

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

## 文档地址

- 图表插件uCharts 文档地址：[https://www.ucharts.cn/](https://www.ucharts.cn/)
- uCharts hbuildx插件市场地址：[https://ext.dcloud.net.cn/plugin?id=271](https://ext.dcloud.net.cn/plugin?id=271)
- 阿里云地图数据地址：[http://datav.aliyun.com/tools/atlas/](http://datav.aliyun.com/tools/atlas/)

## 准备工作

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

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

地图数据遵循geoJson地图数据交换格式。如果你不熟悉geoJson，可以参考[这里](https://geojson.org/)。


### 绘制中国地图

```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.js` 或 `config-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仓库地址](https://gitee.com/tian_rui_kuan/ucharts-map-demo)