mirror of https://gitee.com/antv-l7/antv-l7
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
// eslint-disable-next-line no-unused-vars
|
||
import { Carousel } from 'antd';
|
||
import React from 'react';
|
||
import '../../css/dippermap.css';
|
||
|
||
interface DipperMapProps {
|
||
dippermap: {
|
||
desc: string;
|
||
img: string;
|
||
alt: string
|
||
}[]
|
||
}
|
||
|
||
export function DipperMap(props: DipperMapProps) {
|
||
const { dippermap } = props;
|
||
|
||
const jumpDipperMap = (url: string) => {
|
||
window.open(url, '_blank');
|
||
};
|
||
|
||
return (
|
||
<div className='dippermapcontainer'>
|
||
<div className='title'>Dipper Map 地理可视化分析工具</div>
|
||
<div className='subtitle'>DipperMap 基于L7 地图可视分析工具，用户自由上传地理数据进行可视化化配置。</div>
|
||
<div className='carousel'>
|
||
<Carousel
|
||
autoplay
|
||
effect='fade'
|
||
dotPosition='right'
|
||
>
|
||
{dippermap.map(item => {
|
||
return (
|
||
<div>
|
||
<h3 style={{ textAlign: 'center' }}>{item.desc}</h3>
|
||
<img key={item.alt} alt={item.alt} src={item.img} />
|
||
</div>
|
||
);
|
||
})}
|
||
</Carousel>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|