From 85d73a0425328abf058ce44f461604f2a705fd0d Mon Sep 17 00:00:00 2001 From: shihui Date: Mon, 10 Jan 2022 15:45:09 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=AE=98=E7=BD=91?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/map/earth/flyline.en.md | 2 +- docs/api/map/earth/flyline.zh.md | 2 +- docs/tutorial/examples/control/index.en.md | 2 + docs/tutorial/examples/control/index.zh.md | 4 +- docs/tutorial/examples/layer/index.en.md | 4 +- docs/tutorial/examples/layer/index.zh.md | 2 + docs/tutorial/examples/map/index.en.md | 2 + docs/tutorial/examples/map/index.zh.md | 2 +- docs/tutorial/examples/marker/index.en.md | 3 ++ docs/tutorial/examples/marker/index.zh.md | 3 ++ gatsby-config.js | 3 +- site/components/L7Draw/index.tsx | 43 ++++++++++++++++++++++ site/components/L7Plot/index.tsx | 36 ++++++++++++++++++ site/components/L7React/index.tsx | 16 ++++++++ site/pages/index.zh.tsx | 34 ++++++++++++++++- 15 files changed, 149 insertions(+), 9 deletions(-) create mode 100644 site/components/L7Draw/index.tsx create mode 100644 site/components/L7Plot/index.tsx create mode 100644 site/components/L7React/index.tsx diff --git a/docs/api/map/earth/flyline.en.md b/docs/api/map/earth/flyline.en.md index c6ffe9ce38..6728436aff 100644 --- a/docs/api/map/earth/flyline.en.md +++ b/docs/api/map/earth/flyline.en.md @@ -1,6 +1,6 @@ --- title: Earth Flyline -order: 3 +order: 2 --- `markdown:docs/api/earth/flyline.zh.md` diff --git a/docs/api/map/earth/flyline.zh.md b/docs/api/map/earth/flyline.zh.md index d57e07c42e..c02c1295f5 100644 --- a/docs/api/map/earth/flyline.zh.md +++ b/docs/api/map/earth/flyline.zh.md @@ -1,6 +1,6 @@ --- title: 飞线 -order: 3 +order: 2 --- `markdown:docs/common/style.md` diff --git a/docs/tutorial/examples/control/index.en.md b/docs/tutorial/examples/control/index.en.md index a8e8a15ab1..d94f9f490a 100644 --- a/docs/tutorial/examples/control/index.en.md +++ b/docs/tutorial/examples/control/index.en.md @@ -3,3 +3,5 @@ title: Control order: 2 --- How to use the map control + + \ No newline at end of file diff --git a/docs/tutorial/examples/control/index.zh.md b/docs/tutorial/examples/control/index.zh.md index 21a8129969..f14201a8c3 100644 --- a/docs/tutorial/examples/control/index.zh.md +++ b/docs/tutorial/examples/control/index.zh.md @@ -4,6 +4,4 @@ order: 2 --- 如何使用组件 -## 使用 - - + \ No newline at end of file diff --git a/docs/tutorial/examples/layer/index.en.md b/docs/tutorial/examples/layer/index.en.md index cc6bcc0f49..7f77bc28f5 100644 --- a/docs/tutorial/examples/layer/index.en.md +++ b/docs/tutorial/examples/layer/index.en.md @@ -2,4 +2,6 @@ title: Layer order: 2 --- -How to use the map control +Layer init and interaction + + \ No newline at end of file diff --git a/docs/tutorial/examples/layer/index.zh.md b/docs/tutorial/examples/layer/index.zh.md index 25e6d6ac4a..f2ca907612 100644 --- a/docs/tutorial/examples/layer/index.zh.md +++ b/docs/tutorial/examples/layer/index.zh.md @@ -3,3 +3,5 @@ title: 图层 order: 2 --- 图层初始化与交互 + + \ No newline at end of file diff --git a/docs/tutorial/examples/map/index.en.md b/docs/tutorial/examples/map/index.en.md index 346ae32073..1404c840c1 100644 --- a/docs/tutorial/examples/map/index.en.md +++ b/docs/tutorial/examples/map/index.en.md @@ -4,3 +4,5 @@ order: 0 --- how to use L7 Initialize third-party maps + + diff --git a/docs/tutorial/examples/map/index.zh.md b/docs/tutorial/examples/map/index.zh.md index 640cb22e79..9fc0ccf8bd 100644 --- a/docs/tutorial/examples/map/index.zh.md +++ b/docs/tutorial/examples/map/index.zh.md @@ -4,4 +4,4 @@ order: 0 --- 介绍如何初始化一个第三方底图 - + diff --git a/docs/tutorial/examples/marker/index.en.md b/docs/tutorial/examples/marker/index.en.md index 5719472507..7d8ceb2778 100644 --- a/docs/tutorial/examples/marker/index.en.md +++ b/docs/tutorial/examples/marker/index.en.md @@ -2,4 +2,7 @@ title: Marker order: 2 --- + add Rich text annotation to scene + + \ No newline at end of file diff --git a/docs/tutorial/examples/marker/index.zh.md b/docs/tutorial/examples/marker/index.zh.md index 7dedb73b14..328d82cd34 100644 --- a/docs/tutorial/examples/marker/index.zh.md +++ b/docs/tutorial/examples/marker/index.zh.md @@ -2,4 +2,7 @@ title: Marker order: 2 --- + 通过添加dom实现富文本地图标注 + + \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index 011e0659f0..6ffd3bf5d9 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -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', diff --git a/site/components/L7Draw/index.tsx b/site/components/L7Draw/index.tsx new file mode 100644 index 0000000000..b982f4858a --- /dev/null +++ b/site/components/L7Draw/index.tsx @@ -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 ( +
+
L7Draw 地理围栏绘制组件库
+
L7Draw 是基于 L7 地理围栏绘制组件库，提供了圆、折线、多边形等图形的绘制方法，同时提供了圆形工具、框选工具、测距工具、矩形工具等一系列工具。
+
+ + {draw.map(item => { + return ( +
+

{item.desc}

+ {item.alt} +
+ ); + })} + +
+
+ ); +} diff --git a/site/components/L7Plot/index.tsx b/site/components/L7Plot/index.tsx new file mode 100644 index 0000000000..eccd63aaec --- /dev/null +++ b/site/components/L7Plot/index.tsx @@ -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 ( +
+
L7Plot 地理分析应用开发框架
+
Dipper 是基于 L7 地理分析应用开发框架，用于快速构建和开发地理分析应用。用户通过组件化、模块化低代码的方式配置地图分析、指挥类应用。
+ {/*
+ {dipper.map(item => { + return ( +
+ + {item.title} +
+ ); + })} +
*/} +
+ ); +} diff --git a/site/components/L7React/index.tsx b/site/components/L7React/index.tsx new file mode 100644 index 0000000000..0307421d3f --- /dev/null +++ b/site/components/L7React/index.tsx @@ -0,0 +1,16 @@ +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +export function L7React() { + return ( +
+
L7React
+
通过标签化的写法开发地图应用
+
+ L7React +
+
+ ); +} diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx index aed005433c..88571ca8e5 100644 --- a/site/pages/index.zh.tsx +++ b/site/pages/index.zh.tsx @@ -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 ( <> @@ -205,12 +226,23 @@ const IndexPage = () => { buttons={bannerButtons} notifications={notifications} className="banner" + // @ts-ignore githubStarLink="https://github.com/antvis/L7/stargazers" /> + - + + + + + + + + + + );