From eadbd1397f2af2e011d52825c08ae26099cafd97 Mon Sep 17 00:00:00 2001
From: 2912401452 <2912401452@qq.com>
Date: Thu, 7 Apr 2022 17:53:09 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=AE=98=E7=BD=91?=
 =?UTF-8?q?=E9=AB=98=E5=BE=B7=E6=8F=92=E4=BB=B6=E6=96=87=E6=A1=A3demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/tutorial/map/amapplugin.en.md        |  5 ++
 docs/tutorial/map/amapplugin.zh.md        | 71 +++++++++++++++++++++++
 examples/amapPlugin/bus/demo/meta.json    | 10 ++++
 examples/amapPlugin/bus/demo/satellite.js | 16 +++++
 examples/amapPlugin/bus/demo/xyzTile.js   | 20 +++++++
 5 files changed, 122 insertions(+)
 create mode 100644 docs/tutorial/map/amapplugin.en.md
 create mode 100644 docs/tutorial/map/amapplugin.zh.md
 create mode 100644 examples/amapPlugin/bus/demo/satellite.js
 create mode 100644 examples/amapPlugin/bus/demo/xyzTile.js

diff --git a/docs/tutorial/map/amapplugin.en.md b/docs/tutorial/map/amapplugin.en.md
new file mode 100644
index 0000000000..35fa542b5d
--- /dev/null
+++ b/docs/tutorial/map/amapplugin.en.md
@@ -0,0 +1,5 @@
+---
+title: Amap Plugin
+order: 3
+---
+`markdown:docs/tutorial/map/amapplugin.zh.md`
diff --git a/docs/tutorial/map/amapplugin.zh.md b/docs/tutorial/map/amapplugin.zh.md
new file mode 100644
index 0000000000..95900ec692
--- /dev/null
+++ b/docs/tutorial/map/amapplugin.zh.md
@@ -0,0 +1,71 @@
+---
+title: 使用高德插件
+order: 3
+---
+`markdown:docs/common/style.md`
+
+高德地图为我们提供和许多好用的插件，借助这些插件的能力我们可以覆盖更多的业务场景。
+
+### AMap.LineSearch
+道路查询
+
+```javascript
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'blank',
+    center: [ 103.83735604457024, 1.360253881403068 ],
+    pitch: 4.00000000000001,
+    zoom: 10.210275860702593,
+    rotation: 19.313180925794313
+  })
+});
+```
+
+[在线案例](/zh/examples/amapPlugin/bus#busStop)
+
+### AMap.ToolBar
+地图工具栏
+
+```javascript
+scene.on('loaded', () => {
+  window.AMap.plugin([ 'AMap.ToolBar', 'AMap.LineSearch' ], () => {
+    scene.map.addControl(new AMap.ToolBar());
+
+    const linesearch = new AMap.LineSearch({
+      pageIndex: 1, // 页码，默认值为1
+      pageSize: 1, // 单页显示结果条数，默认值为20，最大值为50
+      city: '北京', // 限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』
+      extensions: 'all' // 是否返回公交线路详细信息，默认值为『base』
+    });
+...
+```
+
+[在线案例](/zh/examples/amapPlugin/bus#busStop)
+
+### AMap.TileLayer
+加载使用 xyz 地图瓦片
+
+```javascript
+scene.on('loaded', () => {
+    var xyzTileLayer = new window.AMap.TileLayer({
+      getTileUrl:
+        'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8&ltype=11',
+      zIndex: 100,
+    });
+    scene.getMapService().map.add(xyzTileLayer);
+});
+```
+[在线案例](/zh/examples/amapPlugin/bus#xyzTile)
+
+### AMap.TileLayer.Satellite
+加载使用默认的卫星瓦片
+
+```javascript
+ scene.on('loaded', () => {
+    scene.getMapService().map.add(new window.AMap.TileLayer.Satellite());
+});
+```
+
+[在线案例](/zh/examples/amapPlugin/bus#satellite)
+
diff --git a/examples/amapPlugin/bus/demo/meta.json b/examples/amapPlugin/bus/demo/meta.json
index f11c564185..8daeddebcd 100644
--- a/examples/amapPlugin/bus/demo/meta.json
+++ b/examples/amapPlugin/bus/demo/meta.json
@@ -8,6 +8,16 @@
       "filename": "busStop.js",
       "title": "公交线路插件",
       "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*9MHrRZTvaiAAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "xyzTile.js",
+      "title": "xyz瓦片地图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ydN_QpzVraQAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "satellite.js",
+      "title": "卫星地图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bYbdT6N6IGwAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/amapPlugin/bus/demo/satellite.js b/examples/amapPlugin/bus/demo/satellite.js
new file mode 100644
index 0000000000..ef27b74905
--- /dev/null
+++ b/examples/amapPlugin/bus/demo/satellite.js
@@ -0,0 +1,16 @@
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [105, 30],
+    pitch: 0,
+    zoom: 2,
+  })
+});
+
+
+scene.on('loaded', () => {
+    scene.getMapService().map.add(new window.AMap.TileLayer.Satellite());
+});
diff --git a/examples/amapPlugin/bus/demo/xyzTile.js b/examples/amapPlugin/bus/demo/xyzTile.js
new file mode 100644
index 0000000000..16e474db62
--- /dev/null
+++ b/examples/amapPlugin/bus/demo/xyzTile.js
@@ -0,0 +1,20 @@
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [105, 30],
+    pitch: 0,
+    zoom: 2,
+  })
+});
+
+scene.on('loaded', () => {
+    var xyzTileLayer = new window.AMap.TileLayer({
+      getTileUrl:
+        'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8&ltype=11',
+      zIndex: 100,
+    });
+    scene.getMapService().map.add(xyzTileLayer);
+});