🐛[BUG]ChoroplethMap自定义了下卷和上卷回调，当到达下卷最底层时，再上卷时就会直接跳到最顶层

[HiveMe]

🐛 bug 描述 [详细地描述 bug，让大家都能理解]

ChoroplethMap从世界地图钻取。自定义了下卷和上卷回调，当到达下卷最底层（province）时，再上卷时就会直接跳到最顶层(world)

📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]

执行代码后，从世界地图中选取中国地图，然后选择河北省，进入省地图后，开始上卷，点击空白区域会直接上卷到顶层world地图

🏞 期望结果 [描述你原本期望看到的结果]

从province上卷时，应该回到country地图

💻 复现代码 [提供可复现的代码，仓库，或线上示例]

import React, {useState, useEffect} from 'react';
import {ChoroplethMap} from '@ant-design/maps';
// import {querySaleStatistics} from "../../services/sales";
import {Table} from "antd";

const countryData = [{name: "河北省", value: 110}, {name: "北京市", value: 22}]
const provinceData = [{name: "唐山市", value: 22}, {name: "沧州市", value: 88}]

const DemoAreaMap = () => {
    const [data, setData] = useState([
        {name: '中华人民共和国', value: 200},
        {name: '美国', value: 250},
        {name: '俄罗斯', value: 180},
        {name: '日本', value: 120},
        {name: '加拿大', value: 130},
        {name: '澳大利亚', value: 130},
        {name: '新加坡', value: 170},
        {name: '巴西', value: 80},
    ])
    const [title, setTitle] = useState('国家')
    // 下钻前的行政区域名称，此变量用来向上钻取时获取数据
    const [drillFrom, setDrillFrom] = useState('')

    const handleDrillDown = async (from, to, callback) => {
        const {level, adcode, granularity} = to
        const {name} = to.properties

        console.log('当前行政级别：' + level)
        setDrillFrom(name)
        console.log("下钻至")
        console.log(to)

        let params = {}
        if (level === 'country') {
            setTitle('省')
            callback({source: {data: countryData, joinBy: {sourceField: 'name'}}})

        } else if (level === 'province') {
            setTitle('市')
            params['PROVINCE'] = name
            callback({source: {data: provinceData, joinBy: {sourceField: 'name'}}})

        }
        // const msg = await querySaleStatistics({...params})
        // setData(msg)
        // callback({source: {data: msg, joinBy: {sourceField: 'name'}}})
    };

    const handleDrillUp = async (from, to, callback) => {
        console.log("UUUUUUUUUUUUpppppppppppp")
        console.log(from)
        console.log(to)
        const {level, adcode, granularity} = from
        console.log('当前行政级别：' + level)
        console.log("上钻至")
        console.log(to.level)
        console.log(drillFrom, level)
        let params = {}
        if (level === 'province') {
            setTitle('省')

        } else if (level === 'country') {
            setTitle('国家')
            params['PROVINCE'] = ""
            callback({source: {data: countryData, joinBy: {sourceField: 'name'}}})

        }
        // const msg = await querySaleStatistics({...params})
        // setData(msg)
        // callback({source: {data: msg, joinBy: {sourceField: 'name'}}})
    };

    useEffect(() => {

    }, []);

    const config = {

        map: {
            type: 'mapbox',
            style: 'blank',
            center: [120.19382669582967, 30.258134],
            zoom: 3,
            pitch: 0,
        },

        source: {
            data: data,
            joinBy: {
                sourceField: 'name',
                geoField: 'name',
            },
        },

        viewLevel: {
            level: 'world',
            adcode: 'all',
            // 下面粒度参数必填，文档提示可选参数，但是如果不填的话，下钻会报错（跨级获取区域数据导致404）
            granularity: 'country',
        },
        autoFit: true,
        color: {
            field: 'value',
            value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
            scale: {type: 'quantile'}
        },
        style: {
            opacity: 1,
            stroke: '#ccc',
            lineWidth: 0.6,
            lineOpacity: 1,
        },
        chinaBorder: false,
        label: {
            visible: true,
            field: 'name',
            style: {
                fill: '#2b2b2b',
                opacity: 0.8,
                fontSize: 10,
                stroke: '#fff',
                strokeWidth: 1.5,
                textAllowOverlap: false,
                padding: [5, 5],
            },
        },
        state: {
            // 设置选中后的颜色
            select: {
                fill: '#ff6651',
                stroke: false,
                lineWidth: 1.5,
                lineOpacity: 0.8,
            }
        },
        enabledMultiSelect: false,
        tooltip: {
            items: ['name', 'value'],
        },
        zoom: {
            position: 'bottomright',
        },
        drill: {
            enabled: true,
            steps: ['country', 'province', 'city'],
            triggerUp: 'unclick',
            triggerDown: 'click',
            onDown: handleDrillDown,
            onUp: handleDrillUp,
        },
        geoArea: {
            url: '/geo-data/choropleth-data',
            type: 'topojson',
        },
    };
    const columns = [
        {
            title: title,
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '销售单价',
            dataIndex: 'avg_price',
            key: 'avg_price',
        },
        {
            title: '销售量',
            dataIndex: 'value',
            key: 'value',
        },
    ];

    return <><ChoroplethMap {...config} /> <Table pagination={false} dataSource={data} columns={columns}/></>;

};
export default DemoAreaMap;

© 版本信息

"@ant-design/maps": "^1.0.7", "@antv/l7": "^2.16.1", "@antv/l7-maps": "^2.16.1", "@antv/l7plot": "^0.5.5",

• ant-design-charts 版本: [e.g. 0.9.0]
• 浏览器环境
• Edge 版本 114.0.1823.67 (正式版本) (64 位)
• 开发环境 [e.g. mac OS] win10 64

  🚑 其他信息 [如截图等其他信息可以贴在这里]

[wozien]

config 用 useMemo 包一下试试？