-
Notifications
You must be signed in to change notification settings - Fork 636
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* docs: 地图文档模板 * docs: 补充百度地图文档 * docs: 更新百度地图文档 --------- Co-authored-by: lzxue <[email protected]>
- Loading branch information
1 parent
6d5e23a
commit d27815d
Showing
5 changed files
with
158 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,130 @@ | ||
--- | ||
title: 百度地图 | ||
order: 1 | ||
--- | ||
|
||
<embed src="@/docs/common/style.md"></embed> | ||
|
||
## 简介 | ||
|
||
L7 地理可视化侧重于地理数据的可视化表达,地图层需要依赖第三方地图,第三方地图通过 Scene 统一创建管理,只需要通过 Scene 传入地图配置项即可。 | ||
|
||
L7 在内部解决了不同地图底图之间差异,同时 L7 层面统一管理地图的操作方法。 | ||
|
||
L7 目前支持的百度地图是[API GL版本](https://lbsyun.baidu.com/index.php?title=jspopularGL),也是百度地图官方推荐使用版本。 | ||
|
||
### 申请token | ||
|
||
使用百度地图之前,需要申请百度地图密钥,如何申请百度地图密钥[点我查看](https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey)。 | ||
|
||
⚠️ L7 内部设置了默认 token,仅供测试使用 | ||
|
||
### import | ||
|
||
```javascript | ||
import { BaiduMap } from '@antv/l7-maps'; | ||
``` | ||
|
||
### 实例化 | ||
|
||
L7 提供 BaiduMap直接实例化地图,也可外部传入方式实例化地图。 | ||
|
||
新项目推荐 BaiduMap 直接实例化,已有地图项目可外部传入方式,以便快速接入 L7 的能力。 | ||
|
||
#### BaiduMap 实例化 | ||
|
||
```js | ||
import { BaiduMap } from '@antv/l7-maps'; | ||
|
||
const scene = new Scene({ | ||
id: 'map', | ||
map: new BaiduMap({ | ||
// 填写百度地图密钥,此为测试token,不可用于生产 | ||
token: 'zLhopYPPERGtpGOgimcdKcCimGRyyIsh', | ||
center: [103, 30], | ||
pitch: 4, | ||
zoom: 10, | ||
rotation: 19, | ||
}), | ||
}); | ||
``` | ||
|
||
#### 外部传入实例化 | ||
|
||
⚠️ scene id 参数需要与 BMapGL.Map 实例是同个容器。 | ||
|
||
⚠️ 传入地图实例需要自行引入[百度地图的 API](https://lbs.baidu.com/index.php?title=jspopularGL/guide/show) | ||
|
||
```javascript | ||
const map = new BMapGL.Map('map', { | ||
zoom: 11, // 初始化地图层级 | ||
minZoom: 4, | ||
maxZoom: 23, | ||
enableWheelZoom: true | ||
}); | ||
|
||
const scene = new Scene({ | ||
id: 'map', | ||
map: new BaiduMap({ | ||
mapInstance: map, | ||
}), | ||
}); | ||
``` | ||
|
||
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 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
--- | ||
title: 高德地图 | ||
order: 1 | ||
--- | ||
|
||
<embed src="@/docs/common/style.md"></embed> | ||
|
||
## 简介 | ||
|
||
### 高德地图 Token | ||
|
||
|
||
## 引入 | ||
|
||
## 初始化化 | ||
|
||
### 地图配置 | ||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
--- | ||
title: MapBox 地图 | ||
order: 1 | ||
--- |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
--- | ||
title: 腾讯地图 | ||
order: 1 | ||
--- |