简单实现echarts地图,能进行上下层级跳转

 

echarts社区链接:
https://www.makeapie.cn/echarts_content/xLH3WUkMLT.html

生成地图数据接口:
[DataV.GeoAtlas地理小工具系列 (aliyun.com)](http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5)

tips:只能获取到区级数据代码:

useEffect(() => {
    // all.json 全国  510000_full.json 四川  510116.json 双流   //510129.json
    if (user) {
      const { jurisdictionCode } = user
      console.log("user", user);
      let jurisdictionCodeUrl = ''
      let currentCode = ''
      if (jurisdictionCode?.length > 6) {
        jurisdictionCodeUrl = `${jurisdictionCode.slice(0, 6)}.json`
        currentCode = `${jurisdictionCode.slice(0, 6)}`
      } else if (jurisdictionCode.length <= 4) {
        jurisdictionCodeUrl = `${jurisdictionCode}00_full.json`
        currentCode = `${jurisdictionCode}00`
      } else {
        jurisdictionCodeUrl = `${jurisdictionCode}.json`
        currentCode = `${jurisdictionCode}`
      }
      console.log("jurisdictionCode", jurisdictionCode, currentCode);
      //  最多获取区级的json文件
      AdminMapDataApi.dataV({ code: jurisdictionCodeUrl }).then(res => {
        getMapData(res?.data, 'sichuan', currentCode)
      })
    }
    return () => { }
  }, [user])

  const initECharts = (name, geoJso, mapData = []) => {
    echarts.registerMap(name, geoJso)
    return {
      title: {
        top: 10,

        padding: 4,
        text: `当前:${name}`,
        subtext: '',
        x: 'left',

        backgroundColor: "#01050A33",
        textStyle: {
          color: '#C2CFDAFF',
          fontWeight: 400,
          fontSize: 18,

        },
      },
      geo: {
        type: 'map',

        map: name, // 自定义扩展图表类型
        aspectScale: 0.75, //长宽比
        zoom: 1.1,
        roam: false,

        itemStyle: {
          normal: {
            areaColor: '#0A2F51',
            shadowColor: '#12717D',
            shadowOffsetX: 0,
            shadowOffsetY: 25
          },
          emphasis: {
            areaColor: '#0B6CAB',
          }
        }
      },
      series: [
        {
          type: 'map',

          // selectedMode: 'single', // 是否允许选中多个区域
          data: mapData,
          map: name, // 自定义扩展图表类型
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },

          itemStyle: {
            normal: {
              borderColor: '#56FEFE',
              borderWidth: 1.5,
              areaColor: '#0A2F51',

            },
            emphasis: {
              areaColor: '#0B6CAB',

            }
          },
          zoom: 1.1,
          roam: false,
        },
    
      ]
    }
  }
  
  /**
  * 点击跳转下一层级区域
  */
   const onEvents = {
    click: param => {
      const { adcode } = param?.data
      // if (!isClick || jurisdictionCode?.length >= 6) {
      //   return
      // }
      // if (level === 'district') {
      //   setIsClick(false)
      // }
      if (adcode) {
        if (String(adcode)?.at(-1) === '0' && String(adcode).at(-2) === '0') {
          setCode(String(adcode).slice(0, -2))
        } else {
          setCode(adcode)
        }
        const queryUrl =
          param?.data?.level === 'district'
            ? `${adcode}.json`
            : `${adcode}_full.json`
            // 需要后端提供接口,后端调用dataV三方接口 
        AdminMapDataApi.dataV({ code: queryUrl }).then(res => {
          getMapData(res?.data, 'sichuan', adcode)
        })
      }
    }
  }
    
   return (
    <>
      {current.length > 1 && (
        <Button
          icon={<RollbackOutlined />}
          className="goBack-but"
          onClick={() => {
            setIsClick(true)
            const copyData = [...current]
            copyData.pop()
            setCurrent(copyData)
            // setCode(copyData.at(-1)?.currentCode)
            if (
              String(copyData.at(-1)?.currentCode)?.at(-1) === '0' &&
              String(copyData.at(-1)?.currentCode).at(-2) === '0'
            ) {
              setCode(String(copyData.at(-1)?.currentCode).slice(0, -2))
            } else {
              setCode(copyData.at(-1)?.currentCode)
            }
            setCurrentData(copyData.at(-1))
          }}
        >
          返回
        </Button>
      )}
      <Echarts
        width="100%"
        style={{ height: '100%' }}
        onEvents={onEvents}
        option={initECharts(
          currentData?.name,
          currentData?.list,
          currentData?.mapData,
          currentData?.pointData
        )}
      />
    </>
  )


    

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值