p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs(tutorial): map init document

This commit is contained in:
thinkinggis 2019-11-28 17:49:04 +08:00
parent 8dabe4c9c1
commit d10048593f
5 changed files with 109 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api/layer/layer.en.md
View File

@ -40,7 +40,7 @@ new Layer(option)
## 鼠标事件
beta版当前不支持，正式版会支持
⚠️ beta版当前不支持，正式版会支持
```javascript
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件

2
docs/api/layer/layer.zh.md
View File

@ -40,7 +40,7 @@ new Layer(option)
## 鼠标事件
beta版当前不支持，正式版会支持
⚠️ beta版当前不支持，正式版会支持
```javascript
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件

30
docs/tutorial/map/mapbox.zh.md
View File

@ -39,18 +39,21 @@ order: 0
### 初始化 L7 Scene
``` javascript
``` javascript
const scene = new L7.Scene({
id: 'map',
style: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 12,
type:'mapbox',
token: 'mapbox token'
map: new L7.Mapbox({
style: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 12,
token: 'mapbox token',
}),
});
```
这样我们就完成了通过L7 实例化mapbox地图
@ -116,12 +119,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
<script>
const scene = new L7.Scene({
id: 'map',
style: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 12,
type:'amap',
map: new L7.Mapbox({
style: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 12,
token: 'mapbox token',
}),
});
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')

48
docs/tutorial/quickstart.en.md
View File

@ -11,7 +11,8 @@ Current version: 2.0.0-beta.10
# 使用方法
## 通过 L7 CDN 使用
## 通过L7 CDN 使用
Include the L7 JS JavaScript <head> of your HTML file.
@ -33,9 +34,50 @@ Install the npm package.
```bash
// L7 依赖
npm install --save @antv/l7@beta
// 或者
yarn add --save @antv/l7@beta
// 第三方底图依赖
npm install --save @antv/l7-maps;
```
### 初始化地图
#### 使用 Mapbox 底图
```javascript
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 35.210526315789465,
style: 'dark',
center: [ 104.288144, 31.239692 ],
zoom: 4.4
})
});
```
#### 使用Mapbox 底图
```javascript
import { Scene, HeatmapLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'dark',
pitch: 0,
center: [ 127.5671666579043, 7.445038892195569 ],
zoom: 2.632456779444394
})
});
```

45
docs/tutorial/quickstart.zh.md
View File

@ -33,9 +33,50 @@ Install the npm package.
```bash
// L7 依赖
npm install --save @antv/l7@beta
// 或者
yarn add --save @antv/l7@beta
// 第三方底图依赖
npm install --save @antv/l7-maps;
```
### 初始化地图
#### 使用 Mapbox 底图
```javascript
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 35.210526315789465,
style: 'dark',
center: [ 104.288144, 31.239692 ],
zoom: 4.4
})
});
```
#### 使用Mapbox 底图
```javascript
import { Scene, HeatmapLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'dark',
pitch: 0,
center: [ 127.5671666579043, 7.445038892195569 ],
zoom: 2.632456779444394
})
});
```