mirror of https://gitee.com/antv-l7/antv-l7
docs: 完善官网文档
This commit is contained in:
shihui
parent
a85151f350
commit
85d73a0425
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Earth Flyline
|
||||
order: 3
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/earth/flyline.zh.md`
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: 飞线
|
||||
order: 3
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
|
|
|||
|
|
@ -3,3 +3,5 @@ title: Control
|
|||
order: 2
|
||||
---
|
||||
How to use the map control
|
||||
|
||||
<playground path='tutorial/control/demo/amap.js' rid='map'></playground>
|
||||
|
|
@ -4,6 +4,4 @@ order: 2
|
|||
---
|
||||
如何使用组件
|
||||
|
||||
## 使用
|
||||
|
||||
<playground path='tutorial/control/demo/amap.ts' rid='basic-bar-demo'></playground>
|
||||
<playground path='tutorial/control/demo/amap.js' rid='map'></playground>
|
||||
|
|
@ -2,4 +2,6 @@
|
|||
title: Layer
|
||||
order: 2
|
||||
---
|
||||
How to use the map control
|
||||
Layer init and interaction
|
||||
|
||||
<playground path='tutorial/layer/demo/layer_highlight.js' rid='map'></playground>
|
||||
|
|
@ -3,3 +3,5 @@ title: 图层
|
|||
order: 2
|
||||
---
|
||||
图层初始化与交互
|
||||
|
||||
<playground path='tutorial/layer/demo/layer_highlight.js' rid='map'></playground>
|
||||
|
|
@ -4,3 +4,5 @@ order: 0
|
|||
---
|
||||
|
||||
how to use L7 Initialize third-party maps
|
||||
|
||||
<playground path='tutorial/map/demo/amap.js' rid='map'></playground>
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ order: 0
|
|||
---
|
||||
介绍如何初始化一个第三方底图
|
||||
|
||||
|
||||
<playground path='tutorial/map/demo/amap.js' rid='map'></playground>
|
||||
|
|
|
|||
|
|
@ -2,4 +2,7 @@
|
|||
title: Marker
|
||||
order: 2
|
||||
---
|
||||
|
||||
add Rich text annotation to scene
|
||||
|
||||
<playground path='tutorial/marker/demo/amap.js' rid='map'></playground>
|
||||
|
|
@ -2,4 +2,7 @@
|
|||
title: Marker
|
||||
order: 2
|
||||
---
|
||||
|
||||
通过添加dom实现富文本地图标注
|
||||
|
||||
<playground path='tutorial/marker/demo/amap.js' rid='map'></playground>
|
||||
|
|
@ -97,6 +97,7 @@ module.exports = {
|
|||
zh: '教程示例',
|
||||
en: 'Tutorial demo'
|
||||
},
|
||||
order: 5
|
||||
},
|
||||
|
||||
// ****** api
|
||||
|
|
@ -114,7 +115,7 @@ module.exports = {
|
|||
zh: '地球模式',
|
||||
en: 'Earth Mode'
|
||||
},
|
||||
order: 2
|
||||
order: 3
|
||||
},
|
||||
{
|
||||
slug: 'api/base',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
import '../../css/dipper.css';
|
||||
import { Carousel } from 'antd';
|
||||
|
||||
interface DipperMapProps {
|
||||
draw: {
|
||||
desc: string;
|
||||
img: string;
|
||||
alt: string
|
||||
}[]
|
||||
}
|
||||
|
||||
export function L7Draw(props: DipperMapProps) {
|
||||
const { draw } = props;
|
||||
|
||||
const jumoDemo = (url: string) => {
|
||||
window.open(url, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='dippermapcontainer'>
|
||||
<div className='title'>L7Draw 地理围栏绘制组件库</div>
|
||||
<div className='subtitle'>L7Draw 是基于 L7 地理围栏绘制组件库，提供了圆、折线、多边形等图形的绘制方法，同时提供了圆形工具、框选工具、测距工具、矩形工具等一系列工具。</div>
|
||||
<div className='carousel'>
|
||||
<Carousel
|
||||
autoplay
|
||||
effect='fade'
|
||||
dotPosition='right'
|
||||
>
|
||||
{draw.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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
import '../../css/dipper.css';
|
||||
|
||||
interface DipperProps {
|
||||
dipper: {
|
||||
title: string;
|
||||
image: string;
|
||||
link: string
|
||||
}[]
|
||||
}
|
||||
|
||||
export function L7Plot(props: DipperProps) {
|
||||
const { dipper } = props;
|
||||
|
||||
const jumoDemo = (url: string) => {
|
||||
window.open(url, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='dippercontainer'>
|
||||
<div className='title'>L7Plot 地理分析应用开发框架</div>
|
||||
<div className='subtitle'>Dipper 是基于 L7 地理分析应用开发框架，用于快速构建和开发地理分析应用。用户通过组件化、模块化低代码的方式配置地图分析、指挥类应用。</div>
|
||||
{/* <div className='dipperdemo'>
|
||||
{dipper.map(item => {
|
||||
return (
|
||||
<div key={item.title} className='dipperitem' >
|
||||
<img className='dipperimg' src={item.image} />
|
||||
<span style={{cursor:'pointer'}} className='dippertitle'>{item.title}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
export function L7React() {
|
||||
return (
|
||||
<div className='dippermapcontainer'>
|
||||
<div className='title'>L7React</div>
|
||||
<div className='subtitle'>通过标签化的写法开发地图应用</div>
|
||||
<div className='carousel' style={{
|
||||
width: '80%'
|
||||
}}>
|
||||
<img width="100%" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*y8ULSJyYRMwAAAAAAAAAAAAAARQnAQ" alt="L7React" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,6 +7,9 @@ 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';
|
||||
|
||||
|
||||
|
|
@ -187,6 +190,24 @@ const IndexPage = () => {
|
|||
},
|
||||
];
|
||||
|
||||
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} />
|
||||
|
|
@ -205,12 +226,23 @@ const IndexPage = () => {
|
|||
buttons={bannerButtons}
|
||||
notifications={notifications}
|
||||
className="banner"
|
||||
// @ts-ignore
|
||||
githubStarLink="https://github.com/antvis/L7/stargazers"
|
||||
/>
|
||||
<Features features={L7Features} style={{ width: '100%' }} />
|
||||
|
||||
<Dipper dipper={dipper} />
|
||||
<Cases cases={L7Case} />
|
||||
|
||||
<DipperMap dippermap={dippermap} />
|
||||
|
||||
<Cases cases={L7Case} />
|
||||
|
||||
<L7React />
|
||||
|
||||
<L7Plot dipper={dipper}/>
|
||||
|
||||
<L7Draw draw={draw}/>
|
||||
|
||||
<Companies title={t('感谢信赖')} companies={companies} />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue