ant-design-charts
ant-design-charts copied to clipboard
🧐[问题] 2.x中如何使用地图组件?
🧐 问题描述 [详细地描述问题,让大家都能理解]
在1.x中,示例文档有专门的地图组件,从@ant-design/maps包引用相关组件即可。
在2.x中,文档中似乎只有常规图表,没有地图。从@ant-design/maps引用地图组件(如AreaMap),MapConfig的格式也发生了变化,导致报错。
请问目前在2.x中使用地图组件有什么推荐方案吗?
💻 示例代码 [如果有必要,展示代码,线上示例,或仓库]
import React from 'react';
import {AreaMap} from "@ant-design/maps";
const color = [
'rgb(255,255,217)',
'rgb(237,248,177)',
'rgb(199,233,180)',
'rgb(127,205,187)',
'rgb(65,182,196)',
'rgb(29,145,192)',
'rgb(34,94,168)',
'rgb(12,44,132)',
];
const config = {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
// source: {
// data: [],
// parser: {
// type: 'geojson',
// },
// },
autoFit: true,
color: {
field: 'density',
value: color,
scale: {
type: 'quantile',
},
},
style: {
opacity: 1,
stroke: 'rgb(93,112,146)',
lineType: 'dash',
lineDash: [2, 2],
lineWidth: 0.6,
lineOpacity: 1,
},
state: {
active: true,
select: true,
},
tooltip: {
items: ['name', 'density'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
type: 'map'
};
export default class App extends React.Component<any, any> {
render() {
return <div>
<AreaMap {...config}
source={
{
data: this.state.data,
}
}
/>
</div>
}
}
报错:
ERROR in src/App.tsx:67:14
TS2322: Type '{ source: { data: any; }; map: { type: string; style: string; center: number[]; zoom: number; pitch: number; }; autoFit: boolean; color: { field: string; value: string[]; scale: { type: string; }; }; style: { opacity: number; ... 4 more ...; lineOpacity: number; }; ... 4 more ...; type: string; }' is not assignable to type 'AreaMapConfig'.
The types of 'map.type' are incompatible between these types.
Type 'string' is not assignable to type '"mapbox" | "map" | "amap" | "amapv1" | "amapv2" | undefined'.
65 | render() {
66 | return <div>
> 67 | <AreaMap {...config}
| ^^^^^^^
68 | source={
69 | {
70 | data: this.state.data,
🚑 其他信息 [如截图等其他信息可以贴在这里]
请问有解决方案了吗?v2 版本的文档中并没有找到 maps 的部分
v2 目前只有 plot 和 graph,地图部分暂时只能用 v1.