fix(demo): demo

This commit is contained in:
thinkinggis 2019-11-20 22:43:44 +08:00
parent 28da85d18b
commit b644c2be01
20 changed files with 1032 additions and 24 deletions

56
.cache/redirects.json Normal file
View File

@ -0,0 +1,56 @@
[
{
"fromPath": "/en/docs/api",
"isPermanent": true,
"redirectInBrowser": true,
"toPath": "/en/docs/api/L7"
},
{
"fromPath": "/zh/docs/api",
"isPermanent": true,
"redirectInBrowser": true,
"toPath": "/zh/docs/api/L7"
},
{
"fromPath": "/zh/docs/tutorial",
"isPermanent": true,
"redirectInBrowser": true,
"toPath": "/zh/docs/api/quickstart"
},
{
"fromPath": "/en/docs/tutorial",
"isPermanent": true,
"redirectInBrowser": true,
"toPath": "/en/docs/api/quickstart"
},
{
"fromPath": "/zh/examples/raster/",
"isPermanent": true,
"redirectInBrowser": true,
"toPath": "/zh/examples/raster/basic"
},
{
"fromPath": "/zh/examples/polygon/",
"isPermanent": true,
"redirectInBrowser": true,
"toPath": "/zh/examples/polygon/3d"
},
{
"fromPath": "/zh/examples/heatmap/",
"isPermanent": true,
"redirectInBrowser": true,
"toPath": "/zh/examples/heatmap/heatmap"
},
{
"fromPath": "/en/examples",
"isPermanent": true,
"redirectInBrowser": true,
"toPath": "/en/examples/gallery/basic"
},
{
"fromPath": "/zh/examples",
"isPermanent": true,
"redirectInBrowser": true,
"toPath": "/zh/examples/gallery/basic"
}
]

BIN
.cache/redux.state Normal file

Binary file not shown.

View File

@ -4,4 +4,72 @@ 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 代表 Location7 代表世界七大洲寓意能为全球位置数据提供可视分析的能力。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>
## 核心特性
🌏 数据驱动可视化展示
数据驱动,从数到形,支持丰富的地图可视化类型,更好洞察数据。
🌏 2D3D 一体化的海量数据高性能渲染
百万级空间数据实时,动态渲染。
🌏 简单灵活的数据接入
支持CSVJSONgeojson等数据格式接入可以根据需求自定义数据格式无需复杂的空间数据转换。
🌏 多地图底图支持,支持离线内网部署
高德地图国内合法合规的地理底图Mapbox 满足国际化业务需求。
## 支持丰富的图表类型
### 点图层
- 气泡图
- 散点图
- 符号地图
- 3D柱状地图
- 聚合地图
- 复合图表地图
- 自定义Marker
### 线图层
- 路径地图
- 弧线支持2D弧线、3D弧线以及大圆航线
- 等值线
### 面图层
- 填充图
- 3D填充图
### 热力图
- 经典热力图
- 蜂窝热力图
- 网格热力图
### 栅格地图
- 图片
- Raster
## L7 2.0 Roadmap
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
更多技术细节,详细进展,请关注 [GitHub](https://github.com/antvis/L7),欢迎大家来给点点 Star让更多人看到这个开源的项目。

View File

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

View File

@ -1,5 +1,5 @@
---
title: sControl
title: Control
order: 1
---
# control

View File

@ -2,3 +2,204 @@
title: HeatmapLayer
order: 5
---
# heatmapLayer
### 简介
热力图图层,包含三种类型的,
- 方格热力图
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
- 六边形热力图
将一组点数据按照等大小的六边形网格进行聚合,一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
- 经典热力图
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理使用之前需要在source方法设置数据聚合方法
### source
热力图只支持点数据作为数据源
布局方法 通过source的 tansforms属性配置
- type  数据聚合类型 grid、hexagon
- size  网格半径 单位 米
- field  聚合字段
- method 聚合方法  count,max,min,sum,mean5个统计维度
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'grid',
size: 15000,
field:'v',
method:'sum'
}
],
}
```
### shape
不同类型热力图shape支持
| | 2D | 3d |
| --- | --- | --- |
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
| 普通热力图 | heatmap | heatmap |
热力图布局下只shape方法只支持常量的可视化。
```javascript
HeatmapLayer.shape('square');
HeatmapLayer.shape('hexagon');
// 默认类型可以不设置
```
### size
当前版本 shape 为gridhexagon不需要设置 size 映射
default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
**size(field,values) **
- field: 热力图权重字段
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
```javascript
HeatmapLayer.size ('field', [0, 1])
```
### color
default heatMap 类型不需设置 color映射
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
### style
grid hexagon 可以通过style 设置透明度
default热力图需要通过style配置参数热力图参数
- intensity   全局热力权重   推荐权重范围 1-5
- radius  热力半径单位像素
- rampColors 色带参数
- colors  颜色数组
- positions 数据区间
```javascript
HeatmapLayer.style({
intensity: 3,
radius: 20,
rampColors: {
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
}
})
```
### 完整代码示例
#### 普通热力图
```javascript
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
HeatmapLayer({
zIndex: 2
})
.source(data)
.size('mag', [ 0, 1 ]) // weight映射通道
.style({
intensity: 3,
radius: 20,
rampColors: {
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
}
})
```
#### 网格热力图
```javascript
var layer = scene.HeatmapLayer({
zIndex: 2
})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'grid',
size: 15000,
field:'v',
method:'sum'
}
]
})
.shape('grid')
.style({
coverage: 0.8
})
.color('count',
["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
```
#### 六边形热力图
```javascript
var layer = scene.HeatmapLayer({
zIndex: 2
}).
souce(data,{
parser:{
type:'csv',
x:lng,
y:lat,
},
transforms:[
{
type:'hexgon',
size:1500,
field:'count',
operation: 'sum',
}
]
})
.shape('hexgon')
.size(1000)
.color('sum')
.style({
coverage:0.8
})
render()
```

View File

@ -48,7 +48,7 @@ layer.source(data, {
field:'v',
method:'sum'
}
]
],
}
```
@ -186,12 +186,13 @@ var layer = scene.HeatmapLayer({
y:lat,
},
transforms:[
{
type:'hexgon',
size:1500,
field:'count'
operation: 'sum'
}
]
field:'count',
operation: 'sum',
},
],
})
.shape('hexgon')
.size(1000)

View File

@ -2,3 +2,22 @@
title: ImageLayer
order: 5
---
# ImageLayer
## 简介
将图片添加到地图上,需要指定图片的经纬度范围
### 代码示例
```javascript
const layer = new ImageLayer({});
layer.source(
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{
parser: {
type: 'image',
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
}
}
);
```

View File

@ -2,3 +2,321 @@
title: Map Layer
order: 0
---
# Layer
## 简介
L7 Layer 接口设计遵循图形语法,在可视表达上
语法示例
```javascript
new Layer(option)
.source()
.color()
.size()
.shape()
.style()
```
## 构造函数
## 配置项
### visable
图层是否可见   {bool } default true
### zIndex
 图层绘制顺序,数值越小优先绘制,可以控制图层绘制的上下层级 {int}   default 0
### minZoom
图层显示最小缩放等级0-18   {number}  default 0
### maxZoom
 图层显示最大缩放等级 0-18   {number}  default 18
## 鼠标事件
beta版当前不支持正式版会支持
```javascript
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
layer.on('dblclick', (ev)=>{}); // 鼠标左键双击图层事件
layer.on('mousemove', (ev)=>{}); // 鼠标在图层上移动时触发
layer.on('mouseover', (ev)=>{}); // 鼠标移入图层要素内时触发
layer.on('mouseout', (ev)=>{}); // 鼠标移出图层要素时触发
layer.on('mouseup', (ev)=>{}); // 鼠标在图层上单击抬起时触发
layer.on('mousedown', (ev)=>{}); // 鼠标在图层上单击按下时触发
layer.on('mouseleave', (ev)=>{}); // 鼠标离开图层要素
layer.on('rightclick', (ev)=>{}); // 鼠标右键图层要素
```
## 方法
### source
数据源为layer设置数据 source(data,config)
- data {geojson|json|csv}
      源数据
- config  可选 数据源配置项
- parser 数据解析默认是解析层geojson
- transforms [transformtransform ]  数据处理转换 可设置多个
 parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source)
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'map',
callback:function(item){
const [x, y] = item.coordinates;
item.lat = item.lat*1;
item.lng = item.lng*1;
item.v = item.v *1;
item.coordinates = [x*1,y*1];
return item;
}
},
{
type: 'hexagon',
size: 6000,
field:'v',
method:'sum'
}
]
})
```
###
### scale
cscle('field', scaleConfig)
(field: string, scaleConfig: object)
为指定的数据字段进行列定义,返回 layer 实例。
- `field` 字段名。
- `scaleConfig` 列定义配置,对象类型,可配置的属性如下:
```javascript
{
type: "linear" // 指定数据类型可声明的类型为identity、linear、cat、time、timeCat、log、pow, quantile,quantize
}
```
### size
将数据值映射到图形的大小上的方法。
**注意:** 
不同图层的 size 的含义有所差别:
- point 图形的 size 影响点的半径大小和高度;
- line, arc, path 中的 size 影响线的粗细,和高度;
- polygon size 影响的是高度
```javascript
pointLayer.size(10); // 常量
pointLayer.size('type'); // 使用字段映射到大小
pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小,并指定最大值和最小值
pointLayer.size('type', (type) => { // 回调函数
if(type === 'a') {
return 10;
}
return 5;
});
```
#### size(value
传入数字常量,如 `pointLayer.size(20)`
#### size(field)
根据 field 字段的值映射大小,使用默认的`最大值 max:10` 和`最小值 min: 1`。
#### size(field, callback)
使用回调函数控制图形大小。
- `callback`: function 回调函数。
```javascript
pointLayer.size('age', (value) => {
if(value === 1) {
return 5;
}
return 10;
});
```
### color
将数据值映射到图形的颜色上的方法。
```javascript
layer.color('red'); // 常量颜色
layer.color('type'); // 对 type 字段进行映射,使用内置的颜色
layer.color('type', [ 'red', 'blue' ]) // 指定颜色
layer.color('type', (type) => { // 通过回调函数
if (type === 'a') {
return 'red';
}
return 'blue';
});
layer.color('type*value', (type, value) => { //多个参数,通过回调函数
if (type === 'a' && value > 100) {
return 'red';
}
return 'blue';
});
```
#### color(value)
参数:`value` string
只支持接收一个参数value 可以是:
- 映射至颜色属性的数据源字段名,如果数据源中不存在这个字段名的话,则按照常量进行解析,这个时候会使用 L7 默认提供的颜色。
- 也可以直接指定某一个具体的颜色值 color如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
示例
```javascript
layer.color('name') // 映射数据字段
layer.color('white') // 指定颜色
```
#### color(field, colors)
参数:
- `field`: stringfield 为映射至颜色属性的数据源字段名,也支持指定多个参数。
-  `colors`: string | array | function
colors 的参数有以下情况: 如果为空,即未指定颜色的数组,那么使用内置的全局的颜色;如果需要指定颜色,则需要以数组格式传入,那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
```javascript
layer.color('name'); // 使用默认的颜色
layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色
```
- colors 如果是回调函数,则该回调函数的参数为对应字段的数值,具体使用如下,当 color 映射为多个字段时,参数按照字段声明的顺序传入:
```javascript
layer.color('gender', (value) => {
if(value === 1) {
return 'red'
}
return 'blue';
});
layer.color('gender*age', (gender, age) => {
if(age === 20 && gender ==' 男' ) {
return 'red'
}
return 'blue';
});
```
### shape
将数据值映射到图形的形状上的方法。
**shape(shape)**
参数`shape` string
只支持接收一个参数,指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
| layer类型 | shape类型 | 备注 |
| --- | --- | --- |
| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | |
| line | line,arc, arc3d, greatcircle | |
| polygon | fill,line, extrude | |
**shape(field, shapes)**
**shape(field, callback)**
### style
用于配置几何体显示图像属性目前支持以下属性,其他属性会逐步开放
- fill
- opacity  设置透明度
- stroke 线填充颜色
- strokeWidth 线的宽度
```javascript
layer.style({
fill:'red',
opacity:0.8,
stroke:'white'
})
```
### show
图层显示
```javascript
layer.show();
```
### hide
图层隐藏
```javascript
layer.hide();
```
### fitBounds
缩放到图层范围
```javascript
layer.fitBounds()
```

View File

@ -2,3 +2,71 @@
title: LineLayer
order: 2
---
## 线图层
### shape
线图层支持4种 shape
- line 绘制路径图,
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线
- arc3d 3d弧线地图 3D视角
⚠️ 弧线只需要设置起始点坐标即可
```
new LineLayer()
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
```
如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点,第二对为终点
```
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
106.5234375,
57.51582286553883
],
[
136.40625,
61.77312286453146
]
]
}
}
]
}
```
### size
线图层 可以设置高度
- size 类型为number 则表示 line的宽度
- size 类型为 [number , number] 分别表示宽度和高度
```javascript
lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1,2]); // 宽度为1高度2
```

View File

@ -2,3 +2,76 @@
title: PointLayer
order: 1
---
# PointLayer
## 简介
点数据的展示数据源支持JSON,GeoJSON,CSV 三种数据格式。
shape 支持
**3D类型 柱图**
```
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
```
**2D 符号图**
```
'circle', 'square', 'hexagon', 'triangle' 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica',
```
**图片标注**
通过 ```Scene.addImage()``` 可以添加图片资源,
### 代码示例
#### 基本图形显示示例
```javascript
import { PointLayer } from "@antv/l7"
const layer = PointLayer({
zIndex: 2
})
.source(data.list, {
type: 'array',
x: 'j',
y: 'w',
})
.shape('cylinder')
.size('t',(level)=> {
return [4,4,(level+40)];
})
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
```
#### 符号图
使用图片添加地图标注
```javascript
scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
const layer = new PointLayer({
zIndex: 4
})
.source(city)
.size(20.0)
.shape('local')
.color('#0D408C')
```

View File

@ -2,3 +2,25 @@
title: PolygonLayer
order: 3
---
# 填充图
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
### shape
填充图支持3种shape
- fill 绘制填充面 不支持数据映射
- line 绘制填充图描边 不支持数据映射
- extrude 对填充图3D拉伸 不支持数据映射
``` javascript
PolyonLayer.shape('fill');
PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude'); // size 表示高度
```
其他方法,事件,同基类 [Layer](/zh/docs/api/layer/layer)

View File

@ -4,3 +4,171 @@ order: 0
redirect_from:
- /en/docs/tutorial
---
# 使用方法
L7 提供三种使用方式CDN、Submodule 以及 React 组件。
## 通过 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' />
</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` 安装 `@l7/scene``@l7/layers`
```bash
npm install --save @l7/scene @l7/layers
// or
yarn add @l7/scene @l7/layers
```
然后就可以使用其中包含的场景和各类图层:
```typescript
import { Scene } from '@l7/scene';
import { PolygonLayer } from '@l7/layers';
(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();
})();
```
最后在 `<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)
* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
## [WIP] React
React 组件待开发,目前可以暂时以 Submodule 方式使用:
```tsx
import { Scene } from '@l7/scene';
import { PolygonLayer } from '@l7/layers';
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()` 手动销毁场景。

View File

@ -1,5 +1,7 @@
---
title: 经典热力图
order: 0
redirect_from:
- /zh/examples/heatmap/
---
区域范围内数据具有的一定热度分级分布情况的聚合面状现象,常用于描述人群分布、密度和变化趋势等。

View File

@ -1,5 +1,7 @@
---
title: 3D填充图
order: 0
redirect_from:
- /zh/examples/polygon/
---
填充地图的增强实现,通过三维视角中的高度体现数据差异。

View File

@ -1,4 +1,6 @@
---
title: 栅格图层
order: 0
redirect_from:
- /zh/examples/raster/
---

View File

@ -42,4 +42,12 @@ export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
const shape = shapeAttribute?.scale?.field as LineModelType;
return shape || 'line';
}
// 拆分的动画插件
private initAnimate() {
const { enable } = this.animateOptions;
if (enable) {
this.layerService.startAnimate();
this.animateStartTime = this.layerService.clock.getElapsedTime();
}
}
}

View File

@ -60,8 +60,8 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
},
size: 4,
update: (feature: IEncodeFeature, featureIdx: number) => {
const { color = [1.0, 1.0, 1.0, 1.0] } = feature;
return color;
const { color } = feature;
return !color || !color.length ? [0, 0, 0, 0] : color;
},
},
});

View File

@ -1,5 +1,5 @@
import { IEncodeFeature } from '@l7/core';
import { polygonTriangulation } from '..';
import { polygonTriangulation } from '../../core/triangulation';
describe('PolygonTriangulation', () => {
it('should do triangulation with a polygon correctly', () => {

View File

@ -58,7 +58,7 @@ const IndexPage = () => {
{
logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ',
title: t('浅色色板'),
description: t('将复杂的地理数据通过简单易用的API转化成一个个真实的可视化案例达到开箱即用的效果。'),
description: t('一个个真实的地理数据可视化案例,将复杂的地理数据,通过简单易用的API接口,让用户达到开箱即用的效果。'),
link: `/${i18n.language}/examples/gallery/basic`,
image:
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RPxeQZ8Uk7EAAAAAAAAAAABkARQnAQ',