mirror of https://gitee.com/antv-l7/antv-l7
252 lines
7.5 KiB
TypeScript
252 lines
7.5 KiB
TypeScript
import Banner from '@antv/gatsby-theme-antv/site/components/Banner';
|
||
import Cases from '@antv/gatsby-theme-antv/site/components/Cases';
|
||
import Companies from '@antv/gatsby-theme-antv/site/components/Companies';
|
||
import Features from '@antv/gatsby-theme-antv/site/components/Features';
|
||
import SEO from '@antv/gatsby-theme-antv/site/components/Seo';
|
||
import React from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Dipper } from '../components/Dipper';
|
||
import { DipperMap } from '../components/DipperMap';
|
||
import { L7React } from '../components/L7React'
|
||
import { L7Plot } from '../components/L7Plot'
|
||
import { L7Draw } from '../components/L7Draw'
|
||
import '../css/home.css';
|
||
|
||
|
||
const IndexPage = () => {
|
||
const { t, i18n } = useTranslation();
|
||
const L7Case = [
|
||
{
|
||
logo:
|
||
'https://antv-2018.alipay.com/assets/image/icon/l7.svg',
|
||
title: t('指挥分配场景'),
|
||
description: t(
|
||
'区域化网格化数据管理指挥分配场景',
|
||
),
|
||
link: `https://antv.vision/Dipper/~demos/docs-task`,
|
||
image:
|
||
'https://gw.alipayobjects.com/mdn/rms_08cc33/afts/img/A*scJBTq8PW7kAAAAAAAAAAAAAARQnAQ',
|
||
},
|
||
{
|
||
logo:
|
||
'https://antv-2018.alipay.com/assets/image/icon/l7.svg',
|
||
title: t('地图数据分析'),
|
||
description: t(
|
||
'区域化网格化数据分析场景',
|
||
),
|
||
link: `https://antv.vision/Dipper/~demos/docs-analysis`,
|
||
image:
|
||
'https://gw.alipayobjects.com/mdn/rms_08cc33/afts/img/A*OnGVRb_qWxcAAAAAAAAAAAAAARQnAQ',
|
||
},
|
||
{
|
||
logo:
|
||
'https://gw.alipayobjects.com/zos/bmw-prod/222865fc-15e9-44b9-b726-444e1512d937.ico',
|
||
title: t('DipperMap 地理分析工具'),
|
||
description: t(
|
||
'地图可视化配置分析类场景',
|
||
),
|
||
link: `/${i18n.language}/examples/gallery/basic`,
|
||
image:
|
||
'https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*MPWKQqh54vwAAAAAAAAAAAAAARQnAQ',
|
||
},
|
||
];
|
||
const companies = [{
|
||
name: '阿里云',
|
||
img:
|
||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ',
|
||
},
|
||
{
|
||
name: '支付宝',
|
||
img:
|
||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ',
|
||
},
|
||
{
|
||
name: '天猫',
|
||
img:
|
||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ',
|
||
},
|
||
{
|
||
name: '淘宝网',
|
||
img:
|
||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ',
|
||
},
|
||
{
|
||
name: '网商银行',
|
||
img:
|
||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ',
|
||
},
|
||
{
|
||
name: '盒马',
|
||
img:
|
||
'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ePJMQZCb8vkAAAAAAAAAAABkARQnAQ',
|
||
},
|
||
{
|
||
name: 'yunos',
|
||
img:
|
||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ',
|
||
},
|
||
{
|
||
name: '菜鸟',
|
||
img:
|
||
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ',
|
||
}
|
||
];
|
||
|
||
const bannerButtons = [
|
||
{
|
||
text: t('图表示例'),
|
||
link: `/${i18n.language}/examples/gallery`,
|
||
type: 'primary',
|
||
},
|
||
{
|
||
text: t('开始使用'),
|
||
link: `/${i18n.language}/docs/api/l7`,
|
||
},
|
||
];
|
||
const L7Features = [
|
||
{
|
||
icon:
|
||
'https://gw.alipayobjects.com/zos/basement_prod/ca2168d1-ae50-4929-8738-c6df62231de3.svg',
|
||
title: t('架构灵活且自由'),
|
||
description: t('支持地图底图，渲染引擎，图层自由定制、扩展，组合'),
|
||
},
|
||
{
|
||
icon:
|
||
'https://gw.alipayobjects.com/zos/basement_prod/0ccf4dcb-1bac-4f4e-8d8d-f1031c77c9c8.svg',
|
||
title: t('业务专业且通用'),
|
||
description: t(
|
||
'以图形符号学地理设计体系理论基础，易用、易理解、专业、专注',
|
||
),
|
||
},
|
||
{
|
||
icon:
|
||
'https://gw.alipayobjects.com/zos/basement_prod/fd232581-14b3-45ec-a85c-fb349c51b376.svg',
|
||
title: t('视觉酷炫且动感'),
|
||
description: t('支持海量数据，2D、3D，动态，可交互，高性能渲染'),
|
||
},
|
||
];
|
||
const notifications = [{
|
||
type: t('DipperMap'),
|
||
title: t('地理可视化工具'),
|
||
date: '2021.11.22',
|
||
link: 'https://dippermap.alipay.com/',
|
||
},
|
||
{
|
||
type: t('L7 一站式地理分析应用解决方案'),
|
||
title: t('L7Mini、Dipper、DipperMap'),
|
||
date: '2021.11.22',
|
||
link: 'https://www.yuque.com/antv/blog/xqslop',
|
||
},
|
||
]
|
||
|
||
const dipper = [
|
||
{
|
||
title: t('配置化'),
|
||
image: 'https://gw.alipayobjects.com/zos/bmw-prod/a8d32053-ef9d-485e-ae13-2b49535e6f4f.svg',
|
||
link: `/${i18n.language}/view`
|
||
},
|
||
{
|
||
title: t('组件化'),
|
||
image: 'https://gw.alipayobjects.com/zos/bmw-prod/4235cc53-ef5f-4a47-a33c-1623df19e4b7.svg',
|
||
link: `/${i18n.language}/task`
|
||
},
|
||
{
|
||
title: t('自由定制'),
|
||
image: 'https://gw.alipayobjects.com/zos/bmw-prod/29cbd68c-86ac-440c-a38d-792dbd8aea61.svg',
|
||
link: 'https://dippermap.alipay.com'
|
||
}
|
||
];
|
||
|
||
const dippermap = [
|
||
{
|
||
img: 'https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*6S8hQJAUB2oAAAAAAAAAAAAAARQnAQ',
|
||
alt: 'heat',
|
||
desc: '3D热力图',
|
||
},
|
||
{
|
||
img: 'https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*R8juSLJc86wAAAAAAAAAAAAAARQnAQ',
|
||
alt: '3DARC',
|
||
desc: '3D曲线',
|
||
},
|
||
{
|
||
img: 'https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*MDmtT6lRS6EAAAAAAAAAAAAAARQnAQ',
|
||
alt: 'trip',
|
||
desc: '路径图',
|
||
},
|
||
{
|
||
img: 'https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*lRdLQotjkKsAAAAAAAAAAAAAARQnAQ',
|
||
alt: 'point',
|
||
desc: '3D柱图',
|
||
},
|
||
{
|
||
img: 'https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*W_DMQ5DVmIsAAAAAAAAAAAAAARQnAQ',
|
||
alt: 'polygon',
|
||
desc: '中国3D地图',
|
||
},
|
||
{
|
||
img: 'https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*InJXT6G-l6UAAAAAAAAAAAAAARQnAQ',
|
||
alt: 'hex',
|
||
desc: '六边形图',
|
||
},
|
||
];
|
||
|
||
const draw = [
|
||
{
|
||
img: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*jQKyTI4-hjAAAAAAAAAAAAAAARQnAQ',
|
||
alt: 'draw circle',
|
||
desc: '绘制圆形',
|
||
},
|
||
{
|
||
img: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*PPZ2RJy6XxEAAAAAAAAAAAAAARQnAQ',
|
||
alt: 'draw line',
|
||
desc: '绘制折线',
|
||
},
|
||
{
|
||
img: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*f64USbxQhiwAAAAAAAAAAAAAARQnAQ',
|
||
alt: 'draw polygon',
|
||
desc: '绘制几何图形',
|
||
}
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<SEO title={t('蚂蚁地理空间数据可视化')} lang={i18n.language} />
|
||
<Banner
|
||
coverImage={
|
||
<img
|
||
width="100%"
|
||
className="Notification-module--number--31-3Z"
|
||
src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cCI7RaJs46AAAAAAAAAAAABkARQnAQ"
|
||
/>
|
||
}
|
||
title={t('L7 空间数据可视分析')}
|
||
description={t(
|
||
'蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。',
|
||
)}
|
||
buttons={bannerButtons}
|
||
notifications={notifications}
|
||
className="banner"
|
||
// @ts-ignore
|
||
githubStarLink="https://github.com/antvis/L7/stargazers"
|
||
/>
|
||
<Features features={L7Features} style={{ width: '100%' }} />
|
||
|
||
<Dipper dipper={dipper} />
|
||
|
||
<DipperMap dippermap={dippermap} />
|
||
|
||
<Cases cases={L7Case} />
|
||
|
||
<L7React />
|
||
|
||
<L7Plot/>
|
||
|
||
<L7Draw draw={draw}/>
|
||
|
||
<Companies title={t('感谢信赖')} companies={companies} />
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default IndexPage;
|