ant-design-charts
ant-design-charts copied to clipboard
🧐[问题]ChoroplethMap drill设置dblclick时,无法钻取,设置为click时可以
🧐 问题描述 [详细地描述问题,让大家都能理解]
问题如题: 版本号:"@ant-design/maps": "^1.0.7",
💻 示例代码 [如果有必要,展示代码,线上示例,或仓库]
`import React, {useState, useEffect} from 'react'; import {ChoroplethMap} from '@ant-design/maps';
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}, ]) 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',
},
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', 'district'],
triggerUp: 'unclick',
triggerDown: 'dblclick',
},
};
return <ChoroplethMap {...config} />;
}; export default DemoAreaMap; `