react中国地图渲染点击下钻右击返回

Sruirui.

已于 2024-08-08 16:03:29 修改

阅读量418

点赞数 4

文章标签： react.js 前端前端框架

于 2024-06-25 15:12:42 首次发布

本文链接：https://blog.csdn.net/2401_85859147/article/details/139958183

版权

1.调用接口接口复制:DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。https://datav.aliyun.com/portal/school/atlas/area_selector

并且将复制路径里固定的10000数值改为${data} 后期调用接口根据点击的数值的不同切换不同的地域进行下钻（注意路径外面要用``刀了符号包住！！不是引号！！）


// 调用接口
export const getmap=(data)=>{
    return axios({
        url:`https://geo.datav.aliyun.com/areas_v3/bound/${data}_full.json`,
        
    })
}

渲染的为Echarts图表里的如下图表(Echars图表链接：Examples - Apache ECharts)：

点击事件可以在Echars图表里的配置项手册找到

点击下钻效果:

右击返回到原来

地图上的散点气泡展示效果：

移除没有数据的省份： res.data.features.pop()

标记点颜色:

页面所有地图渲染加点击下钻右击返回代码（adcodes是数据里面的区域编码 name区域名字）:

import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';
// 引入地图接口
import { getmap } from '../../request/api';
const Center = () => {
  // 使用useRef组件保存地图容器的dom元素
  let wrap = useRef(null)
  // 地图的初始状态
  let mapstart = [
    {
      adcode: 100000,
      name: '中国'
    }
  ]
  let fun = (adcode, name) => {
    // 调用地图接口获取区域详细地图数据
    getmap(adcode).then(res => {
      console.log(res, '5555')
      // 初始化Echars实例
      let myChart = echarts.init(wrap.current);
      // 注册地图 使 ECharts 能够渲染特定区域的地图
      echarts.registerMap(name, res.data);
      // 配置地图的数据
      let option = {
         // 视觉映射组件，用于将数据值映射到视觉元素（颜色）
        visualMap: {
          min: 1,
          max: 100,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
             // 系列名称
            name: name,
            // 系列类型为地图
            type: 'map',
             // 使用的地图名称与系列名称相同
            map: name,
             itemStyle: {
                    color: 'red' // 所有标记点颜色为红色  
             },
              // 配置标签显示
            label: {
              show: true
            },
             // 标点
            markPoint: {
                data: res.data.features.map((item) => {
                      return {
                               adcode: item.properties.adcode,
                               coord: item.properties.center
                    }

                 })
             },
             // 数据处理，通过映射获取每个区域的名称、值和行政区划代码
            data: res.data.features.map((item) => {
              return {
                name: item.properties.name,
                value: item.properties.childrenNum,
                adcode: item.properties.adcode
              }
            })

          }
        ]
      }
    //渲染图表数据
      myChart.setOption(option);
      // 解绑可能存在的点击和右键事件
      myChart.off('click', onclick)
      myChart.off('contextmenu', oncontextmenu)

      // 绑定地图点击事件，用于下钻展示更细区域的地图
      myChart.on('click', function (e) {
        console.log(e);
        // 添加当前区域到历史记录
        mapstart.push({
          name: e.data.name,
          adcode: e.data.adcode
        })
        // 归调用 fun 函数，加载更细区域的地图
        fun(e.data.adcode, e.data.name)
      });

      // 绑定地图右键事件，用于返回上一级区域地图
      myChart.on('contextmenu', function (e) {
        // 阻止默认的右键菜单显示
        e.event.stop()
        // 移除最后一个区域记录，返回上一级区域
        mapstart.pop()
        // 获取当前显示的区域地图
        let { adcode, name } = mapstart[mapstart.length - 1]
        // 调用地图接口
        fun(adcode, name)
      });

    }).catch((error)=>{
            alert('达到上限请返回')
            console.log(error)
        })

  }
  //  在组件挂载后初始化地图，显示中国地图
  useEffect(() => {
    fun(100000, '中国')
  }, [])
  return (
    // 必须设置地图宽高
    <div style={{ width: "500px", height: "500px" }} ref={wrap}>

    </div>
  )
}

export default Center