Skip to content

Commit

Permalink
补充百度地图文档 (#2043)
Browse files Browse the repository at this point in the history
* docs: 地图文档模板

* docs: 补充百度地图文档

* docs: 更新百度地图文档

---------

Co-authored-by: lzxue <[email protected]>
  • Loading branch information
LiuJianhuo and lzxue authored Nov 13, 2023
1 parent 6d5e23a commit d27815d
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 0 deletions.
130 changes: 130 additions & 0 deletions packages/site/docs/api/map/bmap.zh.md
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

20 changes: 20 additions & 0 deletions packages/site/docs/api/map/gaode.zh.md
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


## 引入

## 初始化化

### 地图配置



4 changes: 4 additions & 0 deletions packages/site/docs/api/map/mapbox.zh.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
title: MapBox 地图
order: 1
---
Empty file.
4 changes: 4 additions & 0 deletions packages/site/docs/api/map/tmap.zh.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
title: 腾讯地图
order: 1
---

0 comments on commit d27815d

Please sign in to comment.