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

Merge branch 'master' into source

This commit is contained in:
thinkinggis 2019-12-07 00:33:11 +08:00
parent 2d396504ce ac7a83877a
commit 5a06000a20
9 changed files with 80 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@ -49,34 +49,35 @@ npm install @antv/l7@beta
```javascript
import { Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
new Scene({
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'light',
pitch: 0,
center: [ 107.054293, 35.246265 ],
zoom: 4.056
})
})
}),
});
```
### Add Layer
```javascript
```javascript
import { PointLayer } from '@antv/l7';
const pointLayer = new PointLayer()
.source(data)
.shape('circle')
.size('mag', [ 1, 25 ])
.color('mag',['#5B8FF9', '#5CCEA1'])
.style({
opacity: 0.3,
strokeWidth: 1
});
const pointLayer = new PointLayer()
.source(data)
.shape('circle')
.size('mag', [ 1, 25 ])
.color('mag',['#5B8FF9', '#5CCEA1'])
.style({
opacity: 0.3,
strokeWidth: 1,
});
scene.addLayer(pointLayer);
```
## :memo: Documentation

4
docs/tutorial/map/amap.en.md
View File

@ -18,7 +18,7 @@ order: 0
2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token
```html
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.17/dist/l7.js"></script>
```
### 添加div 标签指定地图容器
@ -106,7 +106,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
</head>
<body>
<div id="map"></div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.17/dist/l7.js"></script>
<script>
const scene = new L7.Scene({

4
docs/tutorial/map/amap.zh.md
View File

@ -18,7 +18,7 @@ order: 0
2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token
```html
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.17/dist/l7.js"></script>
```
### 添加div 标签指定地图容器
@ -106,7 +106,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
</head>
<body>
<div id="map"></div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.17/dist/l7.js"></script>
<script>
const scene = new L7.Scene({

27
docs/tutorial/map/blankmap.en.md Normal file
View File

@ -0,0 +1,27 @@
---
title: Blank BaseMap With Mapbox
order: 2
---
很多情况下我们只是做些简单的地理可视化，不需要加载地图.
本教程就是告诉大家如果在L7中使用无底图模式。
L7 在地图样式层面增加了无底图样式```blank``` 无底图模式
😃不需要使用mapbox token 拿来就用，不要注册mapbox账户
```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
})
});
```
如果你只是需要做个中国地图，世界地图这样填充图，建议你采用这样的模式
离线，无token使用 ![mapbox demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)

27
docs/tutorial/map/blankmap.zh.md Normal file
View File

@ -0,0 +1,27 @@
---
title: 使用无地图模式
order: 2
---
很多情况下我们只是做些简单的地理可视化，不需要加载地图.
本教程就是告诉大家如果在L7中使用无底图模式。
L7 在地图样式层面增加了无底图样式```blank``` 无底图模式
😃不需要使用mapbox token 拿来就用，不要注册mapbox账户
```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
})
});
```
如果你只是需要做个中国地图，世界地图这样填充图，建议你采用这样的模式
离线，无token使用 ![mapbox demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)

4
docs/tutorial/map/mapbox.en.md
View File

@ -24,7 +24,7 @@ order: 0
```html
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.17/dist/l7.js"></script>
```
@ -115,7 +115,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
</head>
<body>
<div id="map"></div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.17/dist/l7.js"></script>
<script>
const scene = new L7.Scene({
id: 'map',

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

@ -24,7 +24,7 @@ order: 0
```html
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.17/dist/l7.js"></script>
```
@ -113,7 +113,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
</head>
<body>
<div id="map"></div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.17/dist/l7.js"></script>
<script>
const scene = new L7.Scene({
id: 'map',

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

@ -18,7 +18,7 @@ Include the L7 JS JavaScript <head> of your HTML file.
```html
<head>
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js'>
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.17/dist/l7.js'>
</script>
</head>
```

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

@ -17,7 +17,7 @@ Include the L7 JS JavaScript <head> of your HTML file.
```html
<head>
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js'>
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.17/dist/l7.js'>
</script>
</head>
```