mirror of https://gitee.com/antv-l7/antv-l7
Merge pull request #71 from antvis/site
docs(image): udpate demo image url
This commit is contained in:
@thinkinggis
GitHub
commit
74a64aaa69
|
|
@ -2,11 +2,14 @@ sudo: false
|
|||
language: node_js
|
||||
node_js:
|
||||
- '12'
|
||||
env:
|
||||
matrix:
|
||||
- TEST_TYPE=ci
|
||||
- NODE_ENV=test
|
||||
branches:
|
||||
only:
|
||||
- next
|
||||
- master
|
||||
install:
|
||||
- yarn install
|
||||
script:
|
||||
- yarn test
|
||||
- yarn coveralls
|
||||
- yarn run lint
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
## 2019.11.22
|
||||
|
||||
### L7 2.0 beta
|
||||
|
||||
- 新架构
|
||||
- 多地图引擎
|
||||
|
||||
|
||||
|
||||
|
|
@ -5,13 +5,9 @@
|
|||
L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
|
||||
|
||||
|
||||
<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
|
||||
<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
|
||||
<source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
|
||||
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
</video>
|
||||
## l7 visualization demos
|
||||
|
||||
|
||||
|
||||
### Installation
|
||||
|
||||
|
|
|
|||
12
README.zh.md
12
README.zh.md
|
|
@ -2,12 +2,10 @@
|
|||
|
||||
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">
|
||||
<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
|
||||
<source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
|
||||
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
</video>
|
||||
|
||||
## l7 visualization demos
|
||||
|
||||
|
||||
|
||||
|
||||
### Installation
|
||||
|
|
@ -122,4 +120,4 @@ yarn workspaces run add lodash
|
|||
将 typescript 设置为 root 的开发依赖
|
||||
```bash
|
||||
yarn add -W -D typescript jest
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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 相关技术问题，需求反馈，我们会及时响应
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ order: 2
|
|||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
|
|||
示例代码
|
||||
|
||||
```javascript
|
||||
import {Scene} from '@antv/scene';
|
||||
import { Scene } from '@antv/l7';
|
||||
const scene =new L7.Scene({
|
||||
id:'map',
|
||||
mapStyle:'dark',
|
||||
|
|
|
|||
|
|
@ -95,7 +95,8 @@ const data = [{
|
|||
lng2:112.345,
|
||||
lat2:30.455,
|
||||
value: 10
|
||||
},{
|
||||
},
|
||||
{
|
||||
lng1:114.345,
|
||||
lat1:31.455,
|
||||
lng2:112.345,
|
||||
|
|
|
|||
|
|
@ -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/)
|
||||
|
|
@ -6,7 +6,7 @@ redirect_from:
|
|||
---
|
||||
# 使用方法
|
||||
|
||||
L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
|
||||
L7 提供三种使用方式：CDN、Submodule。
|
||||
|
||||
## 通过 CDN 使用
|
||||
|
||||
|
|
@ -34,17 +34,17 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
|
|||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn` 安装 `@antv/l7` 和 `@l7/layers`：
|
||||
首先通过 `npm/yarn`
|
||||
```bash
|
||||
npm install --save @l7/scene @l7/layers
|
||||
// or
|
||||
yarn add @l7/scene @l7/layers
|
||||
npm install --save @antv/l7
|
||||
|
||||
yarn add npm install --save @antv/l7
|
||||
|
||||
```
|
||||
|
||||
然后就可以使用其中包含的场景和各类图层：
|
||||
```typescript
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers';
|
||||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
|
||||
(async function() {
|
||||
// 获取数据
|
||||
|
|
@ -90,12 +90,6 @@ import { PolygonLayer } from '@l7/layers';
|
|||
})();
|
||||
```
|
||||
|
||||
最后在 `<head>` 中引入 L7 CDN 版本的 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<link href='https://api.l7/v2.0.0-beta/l7.css' rel='stylesheet' />
|
||||
</head>
|
||||
```
|
||||
|
||||
L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
|
||||
* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
|
||||
|
|
@ -106,8 +100,7 @@ L7 目前的文档都通过这种方式使用，可以参考项目中的 stories
|
|||
|
||||
React 组件待开发，目前可以暂时以 Submodule 方式使用：
|
||||
```tsx
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers';
|
||||
import { Scene, PolygonLayer} from '@antv/l7';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class AMap extends React.Component {
|
||||
|
|
@ -4,17 +4,17 @@ order: 0
|
|||
redirect_from:
|
||||
- /zh/docs/tutorial
|
||||
---
|
||||
|
||||
# 使用方法
|
||||
|
||||
L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
|
||||
L7 提供三种使用方式：CDN、Submodule。
|
||||
|
||||
## 通过 CDN 使用
|
||||
|
||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://api.l7/v2.0.0-beta/l7.js'></script>
|
||||
<link href='https://api.l7/v2.0.0-beta/l7.css' rel='stylesheet' />
|
||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
|
|
@ -35,17 +35,17 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
|
|||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn` 安装 `@l7/scene` 和 `@l7/layers`：
|
||||
首先通过 `npm/yarn`
|
||||
```bash
|
||||
npm install --save @l7/scene @l7/layers
|
||||
// or
|
||||
yarn add @l7/scene @l7/layers
|
||||
npm install --save @antv/l7
|
||||
|
||||
yarn add npm install --save @antv/l7
|
||||
|
||||
```
|
||||
|
||||
然后就可以使用其中包含的场景和各类图层：
|
||||
```typescript
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers';
|
||||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
|
||||
(async function() {
|
||||
// 获取数据
|
||||
|
|
@ -91,12 +91,6 @@ import { PolygonLayer } from '@l7/layers';
|
|||
})();
|
||||
```
|
||||
|
||||
最后在 `<head>` 中引入 L7 CDN 版本的 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<link href='https://api.l7/v2.0.0-beta/l7.css' rel='stylesheet' />
|
||||
</head>
|
||||
```
|
||||
|
||||
L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
|
||||
* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
|
||||
|
|
@ -107,8 +101,7 @@ L7 目前的文档都通过这种方式使用，可以参考项目中的 stories
|
|||
|
||||
React 组件待开发，目前可以暂时以 Submodule 方式使用：
|
||||
```tsx
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers';
|
||||
import { Scene, PolygonLayer} from '@antv/l7';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class AMap extends React.Component {
|
||||
|
|
@ -7,33 +7,33 @@
|
|||
{
|
||||
"filename": "column_dark.js",
|
||||
"title": "",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*WkpEQqzuM-oAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7COqR4wCc6QAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "arcCircle.js",
|
||||
"title": "",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FTp1Roy34qgAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "bus_dark.js",
|
||||
"title": "",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j-P8RaJMEvAAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "light.js",
|
||||
"title": "",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HxpoRIcBA80AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "point.js",
|
||||
"title": "",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Xp7iRaORYuIAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
,
|
||||
{
|
||||
"filename": "normal.js",
|
||||
"title": "",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,24 +7,24 @@
|
|||
{
|
||||
"filename": "china.js",
|
||||
"title": "网格热力图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*anD-Q4u83R0AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*XPBuSIPPgsgAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "grid1.js",
|
||||
"title": "",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tAGKS6EClQ4AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Uo9oQolgoxYAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
},
|
||||
{
|
||||
"filename": "heatmap3.js",
|
||||
"title": "网格布局 圆形",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6cA0R6us9osAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Ucz6SJ5wU_0AAAAAAAAAAABkARQnAQ"
|
||||
|
||||
},
|
||||
{
|
||||
"filename": "world.js",
|
||||
"title": "网格热力图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6danQJDzkyoAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f1IDQ7AG-00AAAAAAAAAAABkARQnAQ"
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@
|
|||
{
|
||||
"filename": "heatmap.js",
|
||||
"title": "经典热力图2D",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9zUcSK07PHgAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*QstiQq4JBOIAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "heatmap_purple.js",
|
||||
"title": "经典热力图2D",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DFwET7xJTA8AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*GD2bR7pb-yIAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "heatmap3d.js",
|
||||
"title": "经典热力图3D",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K_nOTa1C7PoAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmhzTqrHpR4AAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -6,22 +6,22 @@
|
|||
"demos": [ {
|
||||
"filename": "china.js",
|
||||
"title": "蜂窝热力图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bx-9TqimungAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*hLVeSqPl9asAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "light.js",
|
||||
"title": "蜂窝热力图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HxpoRIcBA80AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "hexagon.js",
|
||||
"title": "蜂窝热力图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JBibTKlhhWQAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "world.js",
|
||||
"title": "蜂窝热力图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*C3V7ToIoEvkAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0uVgSoxXP-cAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,23 +7,23 @@
|
|||
{
|
||||
"filename": "arcCircle.js",
|
||||
"title": "大圆弧线",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FTp1Roy34qgAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "arc.js",
|
||||
"title": "弧线",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ue-SRJEKUqwAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "trip_arc_dark.js",
|
||||
"title": "3D 弧线",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jXsbSYCqLu8AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ"
|
||||
|
||||
},
|
||||
{
|
||||
"filename": "trip_arc.js",
|
||||
"title": "3D 弧线",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*29BZTqIJkuEAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xvaaQo2c0gMAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@
|
|||
{
|
||||
"filename": "ele.js",
|
||||
"title": "等高线",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FGliTJ7eSBIAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*p6LsTp3M144AAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "ele_dark.js",
|
||||
"title": "等高线",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*X1LgSKQbrD0AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jJd0Qq_E3_UAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "isoline.js",
|
||||
"title": "等高线",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YBNRRrk5IV4AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RLvsSbS4PJMAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,22 +7,22 @@
|
|||
{
|
||||
"filename": "bus_light.js",
|
||||
"title": "公交线路",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*fuSLRL8Ym4kAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YtfjQr5vRS4AAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "bus_dark.js",
|
||||
"title": "公交线路",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j-P8RaJMEvAAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "road_light.js",
|
||||
"title": "路径",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1gddQ6x8Jq4AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LuXiTZAq_84AAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "road_dark.js",
|
||||
"title": "路径",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1FVsSLUncw4AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DDjQRLEnwpoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,25 +7,25 @@
|
|||
{
|
||||
"filename": "point.js",
|
||||
"title": "气泡图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_9ETS5_1yCEAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*fNGiS7YI1tIAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
},
|
||||
{
|
||||
"filename": "color.js",
|
||||
"title": "形状映射",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K8ACRr5TY7UAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iN0nTYRDd3AAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "world.js",
|
||||
"title": "气泡图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DMREQYwsCF4AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*v5j_QZEL-1YAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
}, {
|
||||
"filename": "scatter.js",
|
||||
"title": "定点图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Jt3ZSb8VH98AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LnlmQ7sFWigAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@
|
|||
{
|
||||
"filename": "bar.js",
|
||||
"title": "柱图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-Tw3TLzyJ5wAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6AR6Qq0Bq-MAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "chart.js",
|
||||
"title": "环图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Uq_RQqyMrbQAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*X06uT50Ll7QAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "ring.js",
|
||||
"title": "环图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*zUu0RYKaF28AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-oG0T64BnZoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,24 +7,24 @@
|
|||
{
|
||||
"filename": "column_light.js",
|
||||
"title": "3D柱图_浅色底图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*5WdiT7MmU_cAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kjvTRLNtckIAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
},
|
||||
{
|
||||
"filename": "clumn_shape_light.js",
|
||||
"title": "3D 浅色柱图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*pAKGQrCFSjAAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RVw4QKTJe7kAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
},
|
||||
{
|
||||
"filename": "column_dark.js",
|
||||
"title": "3D柱图_深色底图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*WkpEQqzuM-oAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7COqR4wCc6QAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "clumn_shape.js",
|
||||
"title": "3D 深色柱图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HNbARpUVOdYAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tvpvQZLv_xYAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -6,18 +6,18 @@
|
|||
"demos": [
|
||||
{
|
||||
"filename": "image.js",
|
||||
"title": "气泡图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c0IDRIg_n4MAAAAAAAAAAABkARQnAQ"
|
||||
"title": "符号图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oVyHT5S3sv0AAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "locate.js",
|
||||
"title": "顶点符号",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jrFoQrZNL3wAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DgoWS7-XKdUAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "weather.js",
|
||||
"title": "天气",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*a_rnSI6p6RoAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-nk1RZJeGooAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
{
|
||||
"filename": "marker.js",
|
||||
"title": "温度",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oPofT5YBOksAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*aTDtTL1qls0AAAAAAAAAAABkARQnAQ"
|
||||
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@
|
|||
{
|
||||
"filename": "normal2.js",
|
||||
"title": "城市亮度图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Xp7iRaORYuIAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "normal.js",
|
||||
"title": "海量点",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
{
|
||||
"filename": "polygon.js",
|
||||
"title": "3D 建筑面",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JgXVSoV03n4AAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RCaZSLthUn0AAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@
|
|||
{
|
||||
"filename": "polygon.js",
|
||||
"title": "全国地图行政区划",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*AoD6SZ4kz0wAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "fill.js",
|
||||
"title": "连续填充图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*g93EQYYz9HEAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ouhFSJNcNvkAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "population.js",
|
||||
"title": "世界地图 女性人口比例",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j6OrT7kgAnAAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7c0eQYMfxwoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
|
||||
require('./site/css/demo.css');
|
||||
require('./packages/component/src/css/l7.css');
|
||||
window.geotiff = require('geotiff/dist/geotiff.bundle.min.js');
|
||||
window.scene = require('./packages/scene/src');
|
||||
window.layers = require('./packages/layers/src');
|
||||
window.component = require('./packages/component/src');
|
||||
// window.geotiff = require('geotiff/dist/geotiff.bundle.min.js');
|
||||
// window.scene = require('./packages/scene/src');
|
||||
// window.layers = require('./packages/layers/src');
|
||||
// window.component = require('./packages/component/src');
|
||||
window.g2 = require('@antv/g2');
|
||||
window.l7 = require("@antv/l7");
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ module.exports = {
|
|||
{
|
||||
resolve: '@antv/gatsby-theme-antv',
|
||||
options: {
|
||||
GATrackingId: 'UA-148148901-7',
|
||||
GATrackingId: 'UA-148148901-7'
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@
|
|||
"babel-plugin-lodash": "^3.3.4",
|
||||
"babel-plugin-transform-import-styles": "^0.0.11",
|
||||
"babel-plugin-transform-postcss": "^0.3.0",
|
||||
"babel-preset-gatsby": "^0.2.20",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
# L7
|
||||
|
||||
|
||||
|
||||
L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
|
||||
|
||||
## l7 visualization demos
|
||||
|
||||
|
||||
|
||||
### Installation
|
||||
|
||||
```
|
||||
npm install @antv/l7@beta
|
||||
|
||||
```
|
||||
|
||||
### Features
|
||||
|
||||
|
||||
### Links
|
||||
|
||||
|
||||
## Development
|
||||
|
||||
使用 Yarn Workspace 完成依赖安装以及各包之间的 link 工作：
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
开发模式：
|
||||
```bash
|
||||
yarn watch
|
||||
```
|
||||
|
||||
运行 Demo
|
||||
```bash
|
||||
yarn storybook
|
||||
```
|
||||
|
||||
代替 `git commit` 提交：
|
||||
```bash
|
||||
yarn commit
|
||||
```
|
||||
|
||||
## view doc example
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
visit http://localhost:8000/
|
||||
|
||||
## Add Package
|
||||
|
||||
add new package：
|
||||
```bash
|
||||
lerna create my-pack -y
|
||||
```
|
||||
|
||||
将 ui-lib 作为 my-pack 的依赖：
|
||||
```bash
|
||||
yarn workspace my-pack add ui-lib/1.0.0
|
||||
```
|
||||
|
||||
将 lodash 添加为所有 package 的依赖(不包含root）
|
||||
```bash
|
||||
yarn workspaces run add lodash
|
||||
```
|
||||
|
||||
将 typescript 设置为 root 的开发依赖
|
||||
```bash
|
||||
yarn add -W -D typescript jest
|
||||
```
|
||||
|
|
@ -14,5 +14,6 @@
|
|||
"下载使用":"Download",
|
||||
"浅版精彩案例": "Light Theme",
|
||||
"深版精彩案例": "Dark Theme",
|
||||
"感谢信赖":"WE ARE TRUSTED BY",
|
||||
"一个个真实的地理数据可视化案例，将复杂的地理数据,通过简单，易用的API接口,让用户达到开箱即用的效果。" : "We have summarized a series of story design templates from lots of real geospatial data visualization cases, so that users can use them directly."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ const IndexPage = () => {
|
|||
),
|
||||
link: `/${i18n.language}/examples/gallery/basic`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RPxeQZ8Uk7EAAAAAAAAAAABkARQnAQ',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*h1vhT6eSVPkAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
logo:
|
||||
|
|
@ -117,7 +117,7 @@ const IndexPage = () => {
|
|||
),
|
||||
link: `/${i18n.language}/examples/gallery/basic`,
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*B8rtTpvkqTgAAAAAAAAAAABkARQnAQ',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-gtxQbUPoGQAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -128,9 +128,9 @@ const IndexPage = () => {
|
|||
coverImage={
|
||||
<img
|
||||
width="100%"
|
||||
class="Notification-module--number--31-3Z"
|
||||
className="Notification-module--number--31-3Z"
|
||||
style={{ marginLeft: '125px', marginTop: '50px' }}
|
||||
src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cCI7RaJs46AAAAAAAAAAAABkARQnAQ"
|
||||
src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*o40BRo-ANLoAAAAAAAAAAABkARQnAQ"
|
||||
/>
|
||||
}
|
||||
title={t('L7 地理空间数据可视分析引擎')}
|
||||
|
|
@ -138,7 +138,7 @@ const IndexPage = () => {
|
|||
'L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于WebGL的开源大规模地理空间数据可视分析开发框架。',
|
||||
)}
|
||||
buttons={bannerButtons}
|
||||
notifications={notifications}
|
||||
// notifications={notifications}
|
||||
className="banner"
|
||||
githubStarLink="https://github.com/antvis/L7/stargazers"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue