Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
crystaldust opened this issue Mar 28, 2024 · 0 comments
Open

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

crystaldust opened this issue Mar 28, 2024 · 0 comments

Comments

@crystaldust
Copy link

crystaldust commented Mar 28, 2024

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

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


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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant