docs: 新增地图文档api

antvis · Nov 16, 2023 · 381161f · 381161f
1 parent 70063f9
commit 381161f
Show file tree

Hide file tree

Showing 11 changed files with 423 additions and 495 deletions.
diff --git a/packages/site/docs/api/map/bmap.zh.md b/packages/site/docs/api/map/bmap.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 百度地图
-order: 1
+order: 2
 ---
 
 <embed src="@/docs/common/style.md"></embed>
@@ -73,58 +73,4 @@ const scene = new Scene({
 
 BaiduMap [示例地址](/examples/map/map/#baidumap)、外部传入[示例地址](/examples/map/map/#bmapInstance)
 
-## options
-
-### zoom 初始化缩放等级
-
-地图初始显示级别 {number} 百度地图（3-21）
-
-### center 地图中心
-
-地图初始中心经纬度 {Lnglat}
-
-### pitch 地图倾角
-
-地图初始俯仰角度 {number}  default 0
-
-### style 地图样式
-
-地图初始样式 {'normal' | string | Array}
-
-- 值 'normal' 默认主题样式。
-
-- 值 string 类型时，为个性化配置的[样式ID](https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom)。
-
-```javascript
-{
-  // 测试账号，已发布的样式ID 
-  style: '90dbaeacad6d1d1663046eed2555ab9e'
-}
-```
-
-- 值 Array 时，为自定义的[样式JSON](https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom)
-
-```javascript
-{
-  style: [{
-    featureType: 'background',
-    elementType: 'geometry',
-    stylers: {
-        color: '#070c17ff'
-    }
-  }]
-}
-```
-
-### minZoom 最小缩放等级
-
-地图最小缩放等级 {number} 百度地图（3-21）
-
-### maxZoom 最大缩放等级
-
-地图最大缩放等级 {number} 百度地图（3-21）
-
-### rotateEnable 是否允许旋转
-
-地图是否可旋转 {Boolean} default true
-
+<embed src="@/docs/common/map.zh.md"></embed>
diff --git a/packages/site/docs/api/map/gaode.zh.md b/packages/site/docs/api/map/gaode.zh.md
@@ -7,14 +7,112 @@ order: 1
 
 ## 简介
 
-### 高德地图 Token
+L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建管理，只需要通过 Scene 传入地图配置项即可。
 
+L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。
 
-## 引入
+- [高德地图 官网](https://lbs.amap.com/api/javascript-api-v2/update)
 
-## 初始化化
+## 申请token
+
+高德地图 API 配置参数
+
+- token
+  注册高德 [API token](https://lbs.amap.com/api/javascript-api/guide/abc/prepare)
+
+## 地图初始化化
+
+```javascript
+const L7AMap = new GaodeMap({
+  pitch: 35.210526315789465,
+  style: 'dark',
+  center: [104.288144, 31.239692],
+  zoom: 4.4,
+  token: 'xxxx - token',
+  plugin: [], // 可以不设置
+});
+```
+<embed src="@/docs/common/map.zh.md"></embed>
+
+## 传入外部实例
+
+为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图
+
+⚠️ scene id 参数需要地图的 Map 实例是同个容器。
+
+⚠️ 传入地图实例需要自行引入相关地图的 API
+
+⚠️ viewMode 设置为 3D 模式（GaodeMap2.0 支持 2D 模式，可以不设置）
+
+#### 传入高德地图实例
+
+```javascript
+const map = new AMap.Map('map', {
+  viewMode: '3D',
+  resizeEnable: true, // 是否监控地图容器尺寸变化
+  zoom: 11, // 初始化地图层级
+  center: [116.397428, 39.90923], // 初始化地图中心点
+});
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    mapInstance: map,
+  }),
+});
+```
+
+[示例地址](/examples/tutorial/map#amapInstance)
+[代码地址](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
+
+[示例地址（ 2D ）](/examples/tutorial/map#amapInstance2d)
+[代码地址](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
+
+
+
+<embed src="@/docs/common/map.zh.md"></embed>
+
+
+## 注册使用高德插件
+
+```javascript
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [116.475, 39.99],
+    pitch: 0,
+    zoom: 13,
+    plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
+  }),
+});
+// plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
+// 为了使用对应插件的能力，应该首先在 plugin 中注册对应的插件
+
+// 加载的 AMap 会挂载在全局的 window 对象上
+scene.on('loaded', () => {
+  window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => {
+    // add control
+    scene.map.addControl(new AMap.ToolBar());
+
+    var linesearch = new AMap.LineSearch({
+      pageIndex: 1, //页码，默认值为1
+      pageSize: 1, //单页显示结果条数，默认值为20，最大值为50
+      city: '北京', //限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』
+      extensions: 'all', //是否返回公交线路详细信息，默认值为『base』
+    });
+
+    //执行公交路线关键字查询
+    linesearch.search('536', function (status, result) {
+      //打印状态信息status和结果信息result
+      // ... do something
+    });
+  });
+});
+```
+
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ag-nSrIPPEUAAAAAAAAAAAAAARQnAQ'>
+
+[在线案例](/examples/amapplugin/bus#busstop)
 
-### 地图配置
 
 
 
diff --git a/packages/site/docs/api/map/leaflet.zh.md b/packages/site/docs/api/map/leaflet.zh.md
@@ -0,0 +1,82 @@
+---
+title: Leaflet
+order: 6
+---
+
+<embed src="@/docs/common/style.md"></embed>
+
+## 简介
+
+L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建管理，只需要通过 Scene 传入地图配置项即可。
+
+L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。
+
+- [Leaflet 官网](https://leafletjs.com/)
+- [Leaflet GitHub](https://github.com/Leaflet/Leaflet)
+
+### 安装
+
+L7-Leafet 为三方插件 L7本身没有内置，需要独立按照
+
+- [L7-Leaflet GitHub](https://github.com/antvis/l7-leaflet)
+- [L7-Leaflet Demo ](https://l7-leaflet.antv.vision/)
+
+```ts
+ npm install  '@antv/l7-leaflet'
+
+```
+or
+
+```js
+<script src="https://unpkg.com/@antv/l7-leaflet"></script>
+
+```
+
+### 初始化
+
+```ts
+import { Scene } from '@antv/l7';
+import * as L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { Map } from '@antv/l7-leaflet';
+const scene = new Scene({
+    id: 'map',
+    map: new Map({
+    pitch: 0,
+    center: [112, 37.8],
+    zoom: 3,
+    minZoom: 1,
+    }),
+});
+```
+
+### Lealet 种使用 L7
+
+``` ts
+import * as L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { LineLayer } from '@antv/l7';
+import { L7Layer } from '@antv/l7-leaflet';
+
+const map = L.map('map', {
+      minZoom: 1,
+    }).setView([30, 112], 3);
+    const mapType = 'vec';
+    L.tileLayer(
+      'https://t{s}.tianditu.gov.cn/' +
+        mapType +
+        '_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
+        mapType +
+        '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=b72aa81ac2b3cae941d1eb213499e15e',
+      {
+        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        attribution:
+          '&copy; <a href="http://lbs.tianditu.gov.cn/home.html">天地图 GS(2022)3124号 - 甲测资字1100471</a>',
+      },
+    ).addTo(map);
+
+    const l7layer = new L7Layer().addTo(map);
+    const scene = l7layer.getScene();
+
+```
+