mirror of https://gitee.com/antv-l7/antv-l7
docs(docs): update tutorial
This commit is contained in:
thinkinggis
parent
d730c82af5
commit
dc302e7517
|
|
@ -5,6 +5,7 @@ redirect_from:
|
|||
- /en/docs/api
|
||||
---
|
||||
|
||||
|
||||
An open source large-scale geospatial data visualization analysis development framework powered by WebGL.
|
||||
|
||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
|
||||
|
|
@ -16,6 +17,10 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
</video>
|
||||
|
||||
2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
|
||||
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
## 核心特性
|
||||
|
||||
|
||||
|
|
@ -73,4 +78,4 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
|
||||
|
||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@ redirect_from:
|
|||
|
||||
# L7 地理空间数据可视分析引擎
|
||||
|
||||
2.0.beta 版本目前有些功能还未完善，
|
||||
|
||||
⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
|
||||
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
|
||||
|
||||
<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
|
||||
|
|
@ -73,4 +79,8 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
|
||||
|
||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||
|
||||
### 技术支持服务群
|
||||
L7 相关技术问题，需求反馈，我们会及时响应
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,166 @@
|
|||
---
|
||||
title: QuickStart
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /en/docs/manual
|
||||
---
|
||||
# 使用方法
|
||||
|
||||
L7 提供三种使用方式：CDN、Submodule。
|
||||
|
||||
## 通过 CDN 使用
|
||||
|
||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
||||
<!-- 上一步引入的 L7 JS 和 CSS -->
|
||||
</head>
|
||||
```
|
||||
⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
|
||||
|
||||
然后在 `<body>` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`：
|
||||
⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下：
|
||||
* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/)
|
||||
* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens)
|
||||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn`
|
||||
```bash
|
||||
npm install --save @antv/l7
|
||||
|
||||
yarn add npm install --save @antv/l7
|
||||
|
||||
```
|
||||
|
||||
然后就可以使用其中包含的场景和各类图层：
|
||||
```typescript
|
||||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
|
||||
(async function() {
|
||||
// 获取数据
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
// 创建场景
|
||||
const scene = new Scene({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
});
|
||||
|
||||
// 创建图层
|
||||
const layer = new PolygonLayer({});
|
||||
layer
|
||||
.source(data)
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
// 添加图层到场景中
|
||||
scene.addLayer(layer);
|
||||
|
||||
// 渲染场景
|
||||
scene.render();
|
||||
})();
|
||||
```
|
||||
|
||||
|
||||
L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
|
||||
* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
|
||||
* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
|
||||
|
||||
|
||||
## [WIP] React
|
||||
|
||||
React 组件待开发，目前可以暂时以 Submodule 方式使用：
|
||||
```tsx
|
||||
import { Scene, PolygonLayer} from '@antv/l7';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class AMap extends React.Component {
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
);
|
||||
const scene = new Scene({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
});
|
||||
const layer = new PolygonLayer({});
|
||||
|
||||
layer
|
||||
.source(await response.json())
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.render();
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
|
||||
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
---
|
||||
title: 快速上手
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/docs/manual
|
||||
---
|
||||
|
||||
# 使用方法
|
||||
|
||||
L7 提供三种使用方式：CDN、Submodule。
|
||||
|
||||
## 通过 CDN 使用
|
||||
|
||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
||||
<!-- 上一步引入的 L7 JS 和 CSS -->
|
||||
</head>
|
||||
```
|
||||
⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
|
||||
|
||||
然后在 `<body>` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`：
|
||||
⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下：
|
||||
* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/)
|
||||
* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens)
|
||||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn`
|
||||
```bash
|
||||
npm install --save @antv/l7
|
||||
|
||||
yarn add npm install --save @antv/l7
|
||||
|
||||
```
|
||||
|
||||
然后就可以使用其中包含的场景和各类图层：
|
||||
```typescript
|
||||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
|
||||
(async function() {
|
||||
// 获取数据
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
// 创建场景
|
||||
const scene = new Scene({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
});
|
||||
|
||||
// 创建图层
|
||||
const layer = new PolygonLayer({});
|
||||
layer
|
||||
.source(data)
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
// 添加图层到场景中
|
||||
scene.addLayer(layer);
|
||||
|
||||
// 渲染场景
|
||||
scene.render();
|
||||
})();
|
||||
```
|
||||
|
||||
|
||||
L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
|
||||
* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
|
||||
* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
|
||||
|
||||
|
||||
## [WIP] React
|
||||
|
||||
React 组件待开发，目前可以暂时以 Submodule 方式使用：
|
||||
```tsx
|
||||
import { Scene, PolygonLayer} from '@antv/l7';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class AMap extends React.Component {
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
);
|
||||
const scene = new Scene({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
});
|
||||
const layer = new PolygonLayer({});
|
||||
|
||||
layer
|
||||
.source(await response.json())
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.render();
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
|
||||
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
---
|
||||
title: data
|
||||
order: 1
|
||||
---
|
||||
|
||||
## 数据
|
||||
|
||||
目前L7支持的数据格式有GeoJson,CSV,JSon Image
|
||||
|
||||
GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
|
||||
|
||||
|
||||
## GeoJSON
|
||||
|
||||
> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
|
||||
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
110.478515625,
|
||||
32.76880048488168
|
||||
],
|
||||
[
|
||||
117.68554687499999,
|
||||
32.76880048488168
|
||||
],
|
||||
[
|
||||
117.68554687499999,
|
||||
37.64903402157866
|
||||
],
|
||||
[
|
||||
110.478515625,
|
||||
37.64903402157866
|
||||
],
|
||||
[
|
||||
110.478515625,
|
||||
32.76880048488168
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 地理统计分析工具
|
||||
[turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的Javascript 库
|
||||
|
||||
## 在线工具
|
||||
|
||||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改GeoJSON数据
|
||||
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
title: 数据
|
||||
order: 1
|
||||
---
|
||||
|
||||
## 数据
|
||||
|
||||
目前L7支持的数据格式有GeoJson,CSV,JSon Image
|
||||
|
||||
GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
|
||||
|
||||
|
||||
## GeoJSON
|
||||
|
||||
> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
|
||||
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
110.478515625,
|
||||
32.76880048488168
|
||||
],
|
||||
[
|
||||
117.68554687499999,
|
||||
32.76880048488168
|
||||
],
|
||||
[
|
||||
117.68554687499999,
|
||||
37.64903402157866
|
||||
],
|
||||
[
|
||||
110.478515625,
|
||||
37.64903402157866
|
||||
],
|
||||
[
|
||||
110.478515625,
|
||||
32.76880048488168
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 地理统计分析工具
|
||||
[turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的Javascript 库
|
||||
|
||||
## 在线工具
|
||||
|
||||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改GeoJSON数据
|
||||
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据
|
||||
|
||||
## 数据资源
|
||||
|
||||
#### 全国行政区划边界
|
||||
[支持 geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
|
||||
|
||||
#### HighCharts 全球行政区划数据集
|
||||
|
||||
[https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/)
|
||||
|
|
@ -4,7 +4,6 @@ order: 0
|
|||
redirect_from:
|
||||
- /zh/docs/tutorial
|
||||
---
|
||||
# 使用方法
|
||||
|
||||
# 使用方法
|
||||
|
||||
|
|
@ -21,6 +21,13 @@ module.exports = {
|
|||
},
|
||||
redirect: 'api/l7'
|
||||
},
|
||||
{
|
||||
slug: 'docs/tutorial',
|
||||
title: {
|
||||
zh: '教程',
|
||||
en: 'tutorial'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'examples',
|
||||
title: {
|
||||
|
|
@ -41,10 +48,10 @@ module.exports = {
|
|||
order: 0
|
||||
},
|
||||
{
|
||||
slug: 'api/quickstart',
|
||||
slug: '/tutorial',
|
||||
title: {
|
||||
zh: '快速入门',
|
||||
en: 'quickstart'
|
||||
en: 'Quickstart'
|
||||
},
|
||||
order: 0
|
||||
},
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
"babel-plugin-transform-import-styles": "^0.0.11",
|
||||
"babel-plugin-transform-postcss": "^0.3.0",
|
||||
"babel-preset-gatsby": "^0.2.22",
|
||||
"babel-template": "^6.26.0",
|
||||
"clean-webpack-plugin": "^0.1.19",
|
||||
"commitizen": "^4.0.3",
|
||||
"copy-webpack-plugin": "^4.5.2",
|
||||
|
|
|
|||
Loading…
Reference in New Issue