ant-design-charts icon indicating copy to clipboard operation
ant-design-charts copied to clipboard

🧐[问题] 2.x中如何使用地图组件?

Open crystaldust opened this issue 1 year ago • 2 comments

🧐 问题描述 [详细地描述问题,让大家都能理解]

在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,



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

crystaldust avatar Mar 28 '24 10:03 crystaldust

请问有解决方案了吗?v2 版本的文档中并没有找到 maps 的部分

zyongq avatar Dec 09 '24 07:12 zyongq

v2 目前只有 plot 和 graph,地图部分暂时只能用 v1.

hustcc avatar Dec 09 '24 14:12 hustcc