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

Merge pull request #69 from antvis/site 

Site
This commit is contained in:
@thinkinggis 2019-11-21 20:33:14 +08:00 committed by GitHub
parent fd586c60ab e9f1c94ac6
commit 4dc4340aae
68 changed files with 238 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -5,15 +5,24 @@
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>
### Installation
```
npm install @antv/l7
npm install @antv/l7@beta
```
### Features
### Links

8
README.zh.md
View File

@ -20,19 +20,19 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
## 核心特性
### 🌏 数据驱动可视化展示
🌏 数据驱动可视化展示
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
### 🌏 2D，3D 一体化的海量数据高性能渲染
🌏 2D，3D 一体化的海量数据高性能渲染
百万级空间数据实时，动态渲染。
### 🌏简单灵活的数据接入
🌏 简单灵活的数据接入
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
### 🌏 多地图底图支持，支持离线内网部署
🌏 多地图底图支持，支持离线内网部署
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。

2
build/rollup.config.js
View File

@ -18,7 +18,7 @@ module.exports = [
{
input: resolveFile('build/bundle.ts'),
output: {
file: resolveFile('packages/l7/dist/bundle.js'),
file: resolveFile('packages/l7/dist/l7.js'),
format: 'umd',
name: 'L7',
globals: {

4
demos/raster/basic/demo/image.js
View File

@ -1,5 +1,5 @@
import { Scene } from '@l7/scene';
import { ImageLayer } from '@l7/layers'
import { Scene,ImageLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
docs/api/l7.en.md
View File

@ -4,7 +4,8 @@ order: 0
redirect_from:
- /en/docs/api
---
#### An open source large-scale geospatial data visualization analysis development framework powered by WebGL
An open source large-scale geospatial data visualization analysis development framework powered by WebGL.
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。

7
docs/api/quickstart.en.md
View File

@ -1,5 +1,5 @@
---
title: quickStart
title: QuickStart
order: 0
redirect_from:
- /en/docs/tutorial
@ -13,8 +13,7 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
首先在 `<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,7 +34,7 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
## 通过 Submodule 使用
首先通过 `npm/yarn` 安装 `@l7/scene` 和 `@l7/layers`：
首先通过 `npm/yarn` 安装 `@antv/l7` 和 `@l7/layers`：
```bash
npm install --save @l7/scene @l7/layers
// or

133
docs/api/scene.en.md
View File

@ -3,13 +3,38 @@ title: Scene
order: 1
---
## 简介
`Scene `基础的地图类,提供地图创建，图层创建，管理等功能
# 简介
## Scene
L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理
## Map
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理
只需要通过Scene传入地图配置项即可。
目前L7 支持两种地图底图
- 高德地图 国内业务场景 合规中国地图
- MapBox 国际业务，或者内网离线部署场景
### map
可以通过scene map 属性获取 map实例
```javascript
const map = scene.map
```
为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
示例代码
```javascript
import {Scene} from '@l7/scene';
import {Scene} from '@antv/scene';
const scene =new L7.Scene({
id:'map',
mapStyle:'dark',
@ -21,75 +46,15 @@ const scene =new L7.Scene({
### 构造函数
**Scene**<br />支持两种实例化方式
- 独立实例化 内部根据id自动穿件地图实例
- 传入地图实例
**Scene**
#### 独立实例化 Scene
```javascript
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark',
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 12,
maxZoom:20,
minZoom:0,
});
```
#### 根据map 实例创建Sence
_L7 基于高德地图3D模式开发的，因此传入Map实例 __viewModes需要设置成3d_<br />_
```javascript
var mapinstance = new AMap.Map('map',{
center: [ 120.19382669582967, 30.258134 ],
viewMode: '3D',
pitch: 0,
zoom: 12,
maxZoom:20,
minZoom:0,
});
const scene = new L7.Scene({
mapStyle: 'dark',
map:mapinstance
});
```
## map
L7 在scene 下保留了高德地图实例，可以通过scene.map 调用高德地图的map方法。<br />map 实例方法见[高德地图文档](https://lbs.amap.com/api/javascript-api/reference/map)
```javascript
scene.map
```
## 构造类
### PointLayer
新建点图层
### PolylineLayer
新建线图层
### PolygonLayer
新建面图层
### ImageLayer
新建图片图层
## 配置项
### 地图配置项
### id
需传入 dom 容器或者容器 id  {domObject || string} [必选]
@ -103,10 +68,23 @@ scene.map
### pitch
地图初始俯仰角度 {number}  default 0
### mapSyle
地图样式 {style} 目前仅支持高德地图。 default 'dark'<br />L7 内置三种种默认地图样式 dark | light|blank 空地图
### style
设置地图的显示样式，目前支持两种地图样式：<br />第一种：自定义地图样式，如`"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"`<br />可前往[地图自定义平台](https://lbs.amap.com/dev/mapstyle/index)定制自己的个性地图样式；<br />第二种：官方样式模版,如`"amap://styles/grey"`。<br />其他模版样式及自定义地图的使用说明见[开发指南](https://lbs.amap.com/api/javascript-api/guide/create-map/mapstye/)
简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
- dark
- light
- normal
除了内置的样式，你也可以传入自定义的其他属性。
比如高德地图
```javascript
{
style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
}
```
### minZoom
@ -227,21 +205,6 @@ scene.setPitch(pitch)
参数 :<br />   `pitch` {number}
###
### setStatus
设置当前地图显示状态，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等   
```javascript
scene.setStatus({
dragEnable: true,
keyboardEnable: true,
doubleClickZoom: true,
zoomEnable: true,
rotateEnable: true
});
```
### fitBounds
地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
@ -259,7 +222,7 @@ scene.fitBounds([112,32,114,35]);
scene.removeLayer(layer)
```
参数<br />`layer` {Layer}
参数 `layer` {Layer}
### getLayers
 获取所有的layer

52
docs/api/scene.zh.md
View File

@ -21,11 +21,20 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
- MapBox 国际业务，或者内网离线部署场景
### map
可以通过scene map 属性获取 map实例
```javascript
const map = scene.map
```
为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
示例代码
```javascript
import {Scene} from '@l7/scene';
import {Scene} from '@antv/scene';
const scene =new L7.Scene({
id:'map',
mapStyle:'dark',
@ -42,15 +51,6 @@ const scene =new L7.Scene({
## map
L7 在scene 下保留了高德地图实例，可以通过scene.map 调用高德地图的map方法。<br />map 实例方法见[高德地图文档](https://lbs.amap.com/api/javascript-api/reference/map)
```javascript
scene.map
```
## 配置项
### 地图配置项
@ -68,16 +68,23 @@ scene.map
### pitch
地图初始俯仰角度 {number}  default 0
### mapSyle
### style
简化地图样式设置，L7 内置了三种主题默认样式
简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
- dark
- light
- normal
地图样式 {style} 目前仅支持高德地图。 default 'dark'<br />L7 内置三种种默认地图样式 dark | light|blank 空地图
除了内置的样式，你也可以传入自定义的其他属性。
设置地图的显示样式，目前支持两种地图样式：<br />第一种：自定义地图样式，如`"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"`<br />可前往[地图自定义平台](https://lbs.amap.com/dev/mapstyle/index)定制自己的个性地图样式；<br />第二种：官方样式模版,如`"amap://styles/grey"`。<br />其他模版样式及自定义地图的使用说明见[开发指南](https://lbs.amap.com/api/javascript-api/guide/create-map/mapstye/)
比如高德地图
```javascript
{
style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
}
```
### minZoom
@ -198,21 +205,6 @@ scene.setPitch(pitch)
参数 :<br />   `pitch` {number}
###
### setStatus
设置当前地图显示状态，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等   
```javascript
scene.setStatus({
dragEnable: true,
keyboardEnable: true,
doubleClickZoom: true,
zoomEnable: true,
rotateEnable: true
});
```
### fitBounds
地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
@ -230,7 +222,7 @@ scene.fitBounds([112,32,114,35]);
scene.removeLayer(layer)
```
参数<br />`layer` {Layer}
参数 `layer` {Layer}
### getLayers
 获取所有的layer

3
examples/gallery/basic/demo/arcCircle.js
View File

@ -1,5 +1,4 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
examples/gallery/basic/demo/bus_dark.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
center: [ 103.83735604457024, 1.360253881403068 ],

4
examples/gallery/basic/demo/column_dark.js
View File

@ -1,6 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 35.210526315789465,

3
examples/gallery/basic/demo/light.js
View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

4
examples/gallery/basic/demo/normal.js
View File

@ -1,5 +1,5 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
type: 'amap',

3
examples/gallery/basic/demo/point.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 64.88,

3
examples/heatmap/grid/demo/china.js
View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'light',

3
examples/heatmap/grid/demo/grid1.js
View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

3
examples/heatmap/grid/demo/heatmap3.js
View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'light',

3
examples/heatmap/grid/demo/world.js
View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

3
examples/heatmap/heatmap/demo/heatmap.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { HeatmapLayer } from '@l7/layers';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

3
examples/heatmap/heatmap/demo/heatmap3d.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { HeatmapLayer } from '@l7/layers';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

3
examples/heatmap/heatmap/demo/heatmap_purple.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { HeatmapLayer } from '@l7/layers';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

3
examples/heatmap/hexagon/demo/china.js
View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

3
examples/heatmap/hexagon/demo/hexagon.js
View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'light',

3
examples/heatmap/hexagon/demo/light.js
View File

@ -1,5 +1,4 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'dark',

3
examples/heatmap/hexagon/demo/world.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { HeatmapLayer } from '@l7/layers';
import { Scene, HeatmapLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
style: 'light',

3
examples/line/arc/demo/arc.js
View File

@ -1,5 +1,4 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
examples/line/arc/demo/arcCircle.js
View File

@ -1,5 +1,4 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
examples/line/arc/demo/trip_arc.js
View File

@ -1,5 +1,4 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 60,

3
examples/line/arc/demo/trip_arc_dark.js
View File

@ -1,5 +1,4 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 60,

3
examples/line/isoline/demo/ele.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 53.6305,

3
examples/line/isoline/demo/ele_dark.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 26.842105263157915,

3
examples/line/isoline/demo/isoline.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
examples/line/line/demo/isoline.js
View File

@ -1,5 +1,4 @@
import { Scene } from './node_modules/@l7/scene';
import { LineLayer } from './node_modules/@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

5
examples/line/path/demo/bus_dark.js
View File

@ -1,8 +1,7 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
center: [ 103.83735604457024, 1.360253881403068 ],
center: [ 103.83735, 1.3602538 ],
pitch: 4.00000000000001,
zoom: 10.210275860702593,
rotation: 19.313180925794313,

3
examples/line/path/demo/bus_light.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
center: [ 103.83735604457024, 1.360253881403068 ],

3
examples/line/path/demo/road_dark.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
center: [ 116.3956, 39.9392 ],

3
examples/line/path/demo/road_light.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
import { Scene, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
center: [ 116.3956, 39.9392 ],

4
examples/point/bubble/demo/color.js
View File

@ -1,5 +1,5 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
examples/point/bubble/demo/point.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
examples/point/bubble/demo/scatter.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
type: 'amap',

3
examples/point/bubble/demo/world.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

5
examples/point/chart/demo/bar.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { Marker } from '@l7/component';
import { Scene, Marker } from '@antv/l7';
import * as G2 from '@antv/g2';
const scene = new Scene({
id: 'map',
@ -9,7 +8,7 @@ const scene = new Scene({
pitch: 0,
zoom: 4.19
});
scene.render();
scene.on('loaded', () => {
addChart();
});

6
examples/point/chart/demo/chart.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { Marker } from '@l7/component';
import { Scene, Marker } from '@antv/l7';
import * as G2 from '@antv/g2';
const scene = new Scene({
id: 'map',
@ -9,11 +8,10 @@ const scene = new Scene({
pitch: 0,
zoom: 4.19
});
scene.render();
scene.on('loaded', () => {
addChart();
});
window.mapScene = scene;
function addChart() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'

5
examples/point/chart/demo/ring.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { Marker } from '@l7/component';
import { Scene, Marker } from '@antv/l7';
import * as G2 from '@antv/g2';
const CSS = `.l7-marker .g2-guide-html {
@ -43,7 +42,7 @@ const scene = new Scene({
center: [ 52.21496184144132, 24.121126851768906 ],
zoom: 3.802
});
window.mapScene = scene;
scene.render();
scene.on('loaded', () => {
Promise.all([
fetch(

3
examples/point/column/demo/clumn_shape.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 66.02383,

3
examples/point/column/demo/clumn_shape_light.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 60,

3
examples/point/column/demo/column_dark.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',

3
examples/point/column/demo/column_light.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 48.62562,

3
examples/point/image/demo/image.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
examples/point/image/demo/locate.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
examples/point/image/demo/weather.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
type: 'amap',

5
examples/point/marker/demo/marker.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { Marker } from '@l7/component';
import { Scene, Marker } from '@antv/l7';
const scene = new Scene({
id: 'map',
type: 'amap',
@ -8,7 +7,7 @@ const scene = new Scene({
pitch: 0,
zoom: 4
});
scene.render();
scene.on('loaded', () => {
addMarkers();
});

3
examples/point/scatter/demo/normal.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
type: 'amap',

3
examples/point/scatter/demo/normal2.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
import { Scene, PointLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 64.88,

3
examples/polygon/3d/demo/polygon.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PolygonLayer } from '@l7/layers';
import { Scene, PolygonLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
examples/polygon/fill/demo/fill.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PolygonLayer, LineLayer } from '@l7/layers';
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

4
examples/polygon/fill/demo/polygon.js
View File

@ -1,5 +1,5 @@
import { Scene } from '@l7/scene';
import { PolygonLayer, LineLayer } from '@l7/layers';
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

3
examples/polygon/fill/demo/population.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { PolygonLayer, LineLayer } from '@l7/layers';
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,

10
examples/raster/basic/demo/image.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { ImageLayer } from '@l7/layers';
import { Scene, ImageLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,
@ -19,6 +18,7 @@ layer.source(
}
}
);
scene.on('loaded', () => {
scene.addLayer(layer);
});
scene.addLayer(layer);
// scene.on('loaded', () => {
// scene.addLayer(layer);
// });

8
examples/raster/basic/demo/radar.js
View File

@ -1,5 +1,4 @@
import { Scene } from '@l7/scene';
import { ImageLayer } from '@l7/layers';
import { Scene, ImageLayer } from '@antv/l7';
const scene = new Scene({
id: 'map',
pitch: 0,
@ -19,6 +18,5 @@ layer.source(
}
}
);
scene.on('loaded', () => {
scene.addLayer(layer);
});
scene.addLayer(layer);

2
gatsby-browser.js
View File

@ -6,4 +6,4 @@ 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");

2
gatsby-config.js
View File

@ -4,13 +4,13 @@ module.exports = {
resolve: '@antv/gatsby-theme-antv',
options: {
GATrackingId: 'UA-148148901-7',
pathPrefix: '/L7'
}
}
],
siteMetadata: {
title: 'L7',
description: 'Large-scale WebGL-powered Geospatial data visualization analysis framework',
siteUrl: 'https://l7.antv.vision',
githubUrl: 'https://github.com/antvis/L7',
navs: [
{

3
gatsby-node.js
View File

@ -11,6 +11,7 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
'@l7/renderer': path.resolve(__dirname, 'packages/renderer/src'),
'@l7/scene': path.resolve(__dirname, 'packages/scene/src'),
'@l7/source': path.resolve(__dirname, 'packages/source/src'),
'@l7/utils': path.resolve(__dirname, 'packages/utils/src')
'@l7/utils': path.resolve(__dirname, 'packages/utils/src'),
'@antv/l7': path.resolve(__dirname, 'packages/l7/src')
};
};

2
package.json
View File

@ -6,7 +6,7 @@
},
"devDependencies": {
"@antv/g2": "^3.5.9",
"@antv/gatsby-theme-antv": "^0.9.52",
"@antv/gatsby-theme-antv": "^0.9.92",
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-decorators": "^7.6.0",

7
packages/l7/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.0.0-beta.4",
"version": "2.0.0-beta.5",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "dist/bundle.js",
"sideEffects": true,
@ -25,6 +25,9 @@
"access": "public"
},
"dependencies": {
"@antv/l7": "2.0.0-beta.4"
"@l7/core": "0.0.1",
"@l7/scene": "0.0.1",
"@l7/layers": "0.0.1",
"@l7/component": "0.0.1"
}
}

7
packages/l7/src/index.ts Normal file
View File

@ -0,0 +1,7 @@
export * from '@l7/core';
// @ts-ignore
export * from '@l7/scene';
// @ts-ignore
export * from '@l7/layers';
// @ts-ignore
export * from '@l7/component';

4
site/locale.json
View File

@ -12,7 +12,7 @@
"继续了解": "More",
"更新": "Update",
"下载使用":"Download",
"浅色色板": "Light Theme",
"深色色板": "Dark Theme",
"浅版精彩案例": "Light Theme",
"深版精彩案例": "Dark Theme",
"一个个真实的地理数据可视化案例，将复杂的地理数据,通过简单，易用的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."
}

71
site/pages/index.zh.tsx
View File

@ -4,9 +4,9 @@ import Cases from '@antv/gatsby-theme-antv/site/components/Cases';
import Companies from '@antv/gatsby-theme-antv/site/components/Companies';
import Features from '@antv/gatsby-theme-antv/site/components/Features';
import SEO from '@antv/gatsby-theme-antv/site/components/Seo';
import '../css/home.css';
import React from 'react';
import { useTranslation } from 'react-i18next';
import '../css/home.css';
const IndexPage = () => {
const { t, i18n } = useTranslation();
@ -33,6 +33,48 @@ const IndexPage = () => {
description: t('支持海量数据，2D、3D，动态，可交互，高性能渲染'),
},
];
const companies = [
{
name: '阿里云',
img:
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ',
},
{
name: '支付宝',
img:
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ',
},
{
name: '天猫',
img:
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ',
},
{
name: '淘宝网',
img:
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ',
},
{
name: '网商银行',
img:
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ',
},
{
name: '盒马',
img:
'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ePJMQZCb8vkAAAAAAAAAAABkARQnAQ',
},
{
name: 'yunos',
img:
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ',
},
{
name: '菜鸟',
img:
'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ',
},
];
const bannerButtons = [
{
text: t('图表示例'),
@ -56,21 +98,27 @@ const IndexPage = () => {
const cases = [
{
logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ',
title: t('浅色色板'),
description: t('一个个真实的地理数据可视化案例，将复杂的地理数据,通过简单，易用的API接口,让用户达到开箱即用的效果。'),
logo:
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ',
title: t('浅版精彩案例'),
description: t(
'一个个真实的地理数据可视化案例，将复杂的地理数据,通过简单，易用的API接口,让用户达到开箱即用的效果。',
),
link: `/${i18n.language}/examples/gallery/basic`,
image:
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RPxeQZ8Uk7EAAAAAAAAAAABkARQnAQ',
},
{
logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ',
title: t('深色色板'),
description: t('一个个真实的地理数据可视化案例，将复杂的地理数据,通过简单，易用的API接口,让用户达到开箱即用的效果。'),
logo:
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ',
title: t('深版精彩案例'),
description: t(
'一个个真实的地理数据可视化案例，将复杂的地理数据,通过简单，易用的API接口,让用户达到开箱即用的效果。',
),
link: `/${i18n.language}/examples/gallery/basic`,
image:
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*B8rtTpvkqTgAAAAAAAAAAABkARQnAQ',
}
},
];
return (
@ -79,7 +127,9 @@ const IndexPage = () => {
<Banner
coverImage={
<img
className="cover-image"
width="100%"
class="Notification-module--number--31-3Z"
style={{ marginLeft: '125px', marginTop: '50px' }}
src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cCI7RaJs46AAAAAAAAAAAABkARQnAQ"
/>
}
@ -93,7 +143,8 @@ const IndexPage = () => {
githubStarLink="https://github.com/antvis/L7/stargazers"
/>
<Features features={features} style={{ width: '100%' }} />
<Cases cases={cases} />
<Cases style={{ width: '102%' }} cases={cases} />
<Companies title={t('感谢信赖')} companies={companies} />
</>
);
};