@ 蚂蚁设计/图
大小写
* 特性
- 易于使用
- 类型脚本
* 安装
$ npm install @ant-design/maps
使用量
import React, { useState, useEffect } from 'react';
import { AreaMap } from '@ant-design/maps';
const DemoAreaMap = () => {
const [data, setData] = useState({ type: 'FeatureCollection', features: [] });
useEffect(() => {
asyncFetch();
}, []);
const asyncFetch = () => {
fetch('https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json')
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => {
console.log('fetch data failed', error);
});
};
const config = {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
parser: {
type: 'geojson',
},
},
autoFit: true,
color: {
field: 'adcode',
value: ['rgb(239,243,255)', 'rgb(189,215,231)', 'rgb(107,174,214)', 'rgb(49,130,189)', 'rgb(8,81,156)'],
scale: {
type: 'quantile',
},
},
style: {
opacity: 1,
stroke: 'rgb(93,112,146)',
lineWidth: 0.6,
lineOpacity: 1,
},
state: {
active: true,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
tooltip: {
items: ['name', 'adcode'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
};
return <AreaMap {...config} />;
};
export default DemoAreaMap;
& API 文档
参见图表 API 细节。常见道具:
| 财产 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 准备 | 已装入图表的回调 | (图) 空出 | - 说吧 |
| 装入 | 装入状态 | 布尔 | - 说吧 |
| 装入模板 | 装入模板 | 反应 反应元素 | - 说吧 |
| 模板 | 自定义错误模板 | (e:出错) 反应 反应节点 | - 说吧 |
| 类Name | 集装箱类别 | 字符串 | - 说吧 |
| 容器样式 | 容器样式 | 反应 CSS 财产 | - 说吧 |
如何贡献
你的贡献总是受欢迎的! 请 有看到一个 问题 先说.
联系我们
DingTalk 组号 : 44788198 。 。 。 .
许可证
麻省理工学院