mirror of https://gitee.com/antv-l7/antv-l7
docs(layer): add layer docs
This commit is contained in:
thinkinggis
parent
e250a4c491
commit
8d72bc03b0
|
|
@ -3,14 +3,8 @@
|
|||
"eslint-config-egg"
|
||||
],
|
||||
"globals": {
|
||||
"$": true,
|
||||
"AMap": true,
|
||||
"L7": true,
|
||||
"AMapUI": true,
|
||||
"DataSet": true,
|
||||
"G2": true,
|
||||
"_": true,
|
||||
"mapboxgl":true,
|
||||
},
|
||||
"env": {
|
||||
"browser": true,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
|
|||
### Installation
|
||||
|
||||
```
|
||||
npm install @l7/l7
|
||||
npm install @antv/l7
|
||||
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,125 @@
|
|||
## L7 地理空间数据可视分析引擎
|
||||
|
||||
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>
|
||||
|
||||
|
||||
### Installation
|
||||
|
||||
```
|
||||
npm install @antv/l7
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 核心特性
|
||||
|
||||
### 🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
||||
### 🌏 2D，3D 一体化的海量数据高性能渲染
|
||||
|
||||
百万级空间数据实时，动态渲染。
|
||||
|
||||
### 🌏简单灵活的数据接入
|
||||
|
||||
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
|
||||
### 🌏 多地图底图支持，支持离线内网部署
|
||||
|
||||
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
|
||||
|
||||
## 支持丰富的图表类型
|
||||
|
||||
### 点图层
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义Marker
|
||||
|
||||
### 线图层
|
||||
|
||||
- 路径地图
|
||||
- 弧线，支持2D弧线、3D弧线以及大圆航线
|
||||
- 等值线
|
||||
|
||||
### 面图层
|
||||
|
||||
- 填充图
|
||||
- 3D填充图
|
||||
|
||||
### 热力图
|
||||
|
||||
- 经典热力图
|
||||
- 蜂窝热力图
|
||||
- 网格热力图
|
||||
|
||||
### 栅格地图
|
||||
- 图片
|
||||
- Raster
|
||||
|
||||
## L7 2.0 Roadmap
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
```
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
|
||||
module.exports = (api) => {
|
||||
module.exports = api => {
|
||||
api.cache(() => process.env.NODE_ENV);
|
||||
|
||||
const isSite = api.env('site');
|
||||
|
|
@ -10,16 +10,16 @@ module.exports = (api) => {
|
|||
|
||||
if (isSite) { //
|
||||
return {
|
||||
"presets": [
|
||||
"babel-preset-gatsby"
|
||||
presets: [
|
||||
'babel-preset-gatsby'
|
||||
],
|
||||
"plugins": [
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
'@babel/plugin-proposal-nullish-coalescing-operator',
|
||||
[
|
||||
'@babel/plugin-proposal-decorators',
|
||||
{
|
||||
legacy: true,
|
||||
legacy: true
|
||||
}
|
||||
],
|
||||
[
|
||||
|
|
@ -29,10 +29,10 @@ module.exports = (api) => {
|
|||
extensions: [
|
||||
// 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
|
||||
// '.json',
|
||||
'.glsl',
|
||||
'.glsl'
|
||||
]
|
||||
}
|
||||
],
|
||||
]
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -43,20 +43,20 @@ module.exports = (api) => {
|
|||
{
|
||||
targets: {
|
||||
browsers: 'Last 2 Chrome versions, Firefox ESR',
|
||||
node: 'current',
|
||||
node: 'current'
|
||||
},
|
||||
// set `modules: false` when building CDN bundle, let rollup do commonjs works
|
||||
// @see https://github.com/rollup/rollup-plugin-babel#modules
|
||||
modules: (isCDNBundle || isESModule) ? false : 'auto',
|
||||
},
|
||||
modules: (isCDNBundle || isESModule) ? false : 'auto'
|
||||
}
|
||||
],
|
||||
[
|
||||
'@babel/preset-react',
|
||||
{
|
||||
development: isCommonJS,
|
||||
},
|
||||
development: isCommonJS
|
||||
}
|
||||
],
|
||||
'@babel/preset-typescript',
|
||||
'@babel/preset-typescript'
|
||||
],
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
|
|
@ -64,14 +64,14 @@ module.exports = (api) => {
|
|||
[
|
||||
'@babel/plugin-proposal-decorators',
|
||||
{
|
||||
legacy: true,
|
||||
legacy: true
|
||||
}
|
||||
],
|
||||
[
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
{
|
||||
// @see https://github.com/storybookjs/storybook/issues/6069#issuecomment-472544973
|
||||
loose: true,
|
||||
loose: true
|
||||
}
|
||||
],
|
||||
'@babel/plugin-syntax-dynamic-import',
|
||||
|
|
@ -87,7 +87,7 @@ module.exports = (api) => {
|
|||
extensions: [
|
||||
// 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
|
||||
// '.json',
|
||||
'.glsl',
|
||||
'.glsl'
|
||||
]
|
||||
}
|
||||
],
|
||||
|
|
@ -95,13 +95,13 @@ module.exports = (api) => {
|
|||
// @see https://github.com/babel/babel/issues/8741#issuecomment-509041135
|
||||
'const-enum',
|
||||
{
|
||||
transform: 'constObject',
|
||||
transform: 'constObject'
|
||||
}
|
||||
],
|
||||
// 按需引用 @see https://github.com/lodash/babel-plugin-lodash
|
||||
'lodash',
|
||||
// 内联 WebGL 常量 @see https://www.npmjs.com/package/babel-plugin-inline-webgl-constants
|
||||
isCDNBundle ? 'inline-webgl-constants' : {},
|
||||
isCDNBundle ? 'inline-webgl-constants' : {}
|
||||
],
|
||||
ignore: [
|
||||
'node_modules',
|
||||
|
|
@ -113,8 +113,8 @@ module.exports = (api) => {
|
|||
'__tests__',
|
||||
'__stories__',
|
||||
'**/*/__snapshots__',
|
||||
'**/*/__tests__',
|
||||
]: [],
|
||||
],
|
||||
'**/*/__tests__'
|
||||
] : []
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
extends: [
|
||||
"@commitlint/config-conventional"
|
||||
'@commitlint/config-conventional'
|
||||
]
|
||||
};
|
||||
|
|
@ -18,19 +18,20 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
## 核心特性
|
||||
|
||||
### 数据驱动可视化展示
|
||||
|
||||
### 🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
||||
### 2D，3D 一体化的海量数据高性能渲染
|
||||
### 🌏 2D，3D 一体化的海量数据高性能渲染
|
||||
|
||||
百万级空间数据实时，动态渲染。
|
||||
|
||||
### 简单灵活的数据接入
|
||||
### 🌏 简单灵活的数据接入
|
||||
|
||||
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
|
||||
### 多地图底图支持，支持离线内网部署
|
||||
### 🌏 多地图底图支持，支持离线内网部署
|
||||
|
||||
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
|
||||
|
||||
|
|
|
|||
|
|
@ -16,10 +16,12 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
|
|||
只需要通过Scene传入地图配置项即可。
|
||||
|
||||
目前L7 支持两种地图底图
|
||||
|
||||
- 高德地图 国内业务场景 合规中国地图
|
||||
- MapBox 国际业务，或者内网离线部署场景
|
||||
|
||||
|
||||
|
||||
示例代码
|
||||
|
||||
```javascript
|
||||
|
|
@ -35,49 +37,12 @@ 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)
|
||||
|
|
@ -86,24 +51,10 @@ L7 在scene 下保留了高德地图实例，可以通过scene.map 调用高德
|
|||
scene.map
|
||||
```
|
||||
|
||||
|
||||
## 构造类
|
||||
|
||||
### PointLayer
|
||||
新建点图层
|
||||
|
||||
### PolylineLayer
|
||||
新建线图层
|
||||
|
||||
### PolygonLayer
|
||||
新建面图层
|
||||
|
||||
### ImageLayer
|
||||
新建图片图层
|
||||
|
||||
|
||||
## 配置项
|
||||
|
||||
### 地图配置项
|
||||
|
||||
### id
|
||||
需传入 dom 容器或者容器 id {domObject || string} [必选]
|
||||
|
||||
|
|
@ -118,6 +69,12 @@ scene.map
|
|||
地图初始俯仰角度 {number} default 0
|
||||
|
||||
### mapSyle
|
||||
|
||||
简化地图样式设置，L7 内置了三种主题默认样式
|
||||
- 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/)
|
||||
|
|
|
|||
|
|
@ -2,3 +2,202 @@
|
|||
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 为grid，hexagon不需要设置 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()
|
||||
```
|
||||
|
|
@ -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 ]
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ layer.source(data, {
|
|||
### scale
|
||||
|
||||
|
||||
#### scale('field', scaleConfig)
|
||||
cscle('field', scaleConfig)
|
||||
|
||||
(field: string, scaleConfig: object)
|
||||
|
||||
|
|
@ -127,9 +127,12 @@ layer.source(data, {
|
|||
```
|
||||
|
||||
### size
|
||||
|
||||
将数据值映射到图形的大小上的方法。
|
||||
|
||||
**注意：** 不同图层的 size 的含义有所差别：
|
||||
**注意：**
|
||||
|
||||
不同图层的 size 的含义有所差别：
|
||||
|
||||
- point 图形的 size 影响点的半径大小和高度；
|
||||
|
||||
|
|
@ -153,6 +156,7 @@ pointLayer.size('type', (type) => { // 回调函数
|
|||
|
||||
|
||||
#### size(value）
|
||||
|
||||
传入数字常量，如 `pointLayer.size(20)`
|
||||
|
||||
#### size(field)
|
||||
|
|
@ -196,6 +200,8 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数
|
|||
|
||||
|
||||
#### color(value)
|
||||
|
||||
|
||||
参数：`value` ：string
|
||||
只支持接收一个参数，value 可以是：
|
||||
|
||||
|
|
@ -212,6 +218,7 @@ layer.color('white') // 指定颜色
|
|||
|
||||
|
||||
#### color(field, colors)
|
||||
|
||||
参数：
|
||||
|
||||
- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
|
||||
|
|
@ -248,7 +255,8 @@ layer.color('gender*age', (gender, age) => {
|
|||
### shape
|
||||
将数据值映射到图形的形状上的方法。
|
||||
|
||||
#### shape(shape)
|
||||
**shape(shape)**
|
||||
|
||||
参数`shape` string
|
||||
|
||||
只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
|
||||
|
|
@ -260,9 +268,9 @@ layer.color('gender*age', (gender, age) => {
|
|||
| polygon | fill,line, extrude | |
|
||||
|
||||
|
||||
#### shape(field, shapes)
|
||||
**shape(field, shapes)**
|
||||
|
||||
#### shape(field, callback)
|
||||
**shape(field, callback)**
|
||||
|
||||
|
||||
### style
|
||||
|
|
@ -287,50 +295,6 @@ layer.style({
|
|||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### filter
|
||||
|
||||
2.0 beta 版本还为支持，正式版本支持
|
||||
|
||||
数据过滤
|
||||
|
||||
#### filter(field,callback)
|
||||
参数：
|
||||
- field 数据源字段名，根据源数据字段过滤数据，也支持指定多个参数。
|
||||
|
||||
- callback 回调函数，回调函数的参数为对应字段的数值，具体使用如下，当 filter 映射为多个字段时，参数按照字段声明的顺序传入.显示数据返回true ，需要过滤掉的返回false
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
layer.filter('gender',(gender)=>{
|
||||
if(gender==="男")
|
||||
return true; // 显示男性的数据
|
||||
else
|
||||
return false; // 非男性将过滤掉
|
||||
})
|
||||
layer.filter('gender*age',(gender,age)=>{
|
||||
if(gender === '男' && age < 20) // 根据年龄和性别过滤数据
|
||||
return true;
|
||||
else
|
||||
return false;
|
||||
})
|
||||
```
|
||||
|
||||
### active
|
||||
|
||||
|
||||
开启或者关闭 shape 对于鼠标 hover 时的响应效果，L7 默认为各个 shape 内置了 active 效果 。
|
||||
|
||||
```javascript
|
||||
layer.active(false); // 关闭默认响应
|
||||
layer.active(true); // 开启默认响应
|
||||
layer.active({fill:'red'});
|
||||
```
|
||||
|
||||
|
||||
|
||||
### show
|
||||
图层显示
|
||||
|
||||
|
|
@ -354,15 +318,5 @@ layer.hide();
|
|||
|
||||
```javascript
|
||||
layer.fitBounds()
|
||||
```
|
||||
|
||||
### setActive
|
||||
|
||||
- id 要素ID，一般来自 click，和 mousemove事件返回值
|
||||
- color 指定高亮颜色
|
||||
|
||||
设置指定要素的
|
||||
|
||||
```javascript
|
||||
layer.setActive(id,color)
|
||||
|
||||
```
|
||||
|
|
@ -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
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,77 @@
|
|||
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')
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,174 @@
|
|||
---
|
||||
title: 快速上手
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/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()` 手动销毁场景。
|
||||
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
title: 快速上手
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/docs/tutorial
|
||||
---
|
||||
|
||||
内容
|
||||
|
|
@ -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.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.layers = require('./packages/layers/src');
|
||||
window.component = require('./packages/component/src');
|
||||
window.g2 = require('@antv/g2');
|
||||
//
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ module.exports = {
|
|||
resolve: '@antv/gatsby-theme-antv',
|
||||
options: {
|
||||
GATrackingId: 'UA-148148901-7',
|
||||
pathPrefix: '/L7',
|
||||
},
|
||||
},
|
||||
pathPrefix: '/L7'
|
||||
}
|
||||
}
|
||||
],
|
||||
siteMetadata: {
|
||||
title: 'L7',
|
||||
|
|
@ -17,51 +17,44 @@ module.exports = {
|
|||
slug: 'docs/api',
|
||||
title: {
|
||||
zh: '文档',
|
||||
en: 'Document',
|
||||
en: 'Document'
|
||||
},
|
||||
redirect: 'api/l7',
|
||||
},
|
||||
{
|
||||
slug: 'docs/tutorial',
|
||||
title: {
|
||||
zh: '教程',
|
||||
en: 'Tutorial',
|
||||
},
|
||||
redirect: 'tutorial/quickstart',
|
||||
redirect: 'api/l7'
|
||||
},
|
||||
{
|
||||
slug: 'examples',
|
||||
title: {
|
||||
zh: '图表演示',
|
||||
en: 'Examples',
|
||||
},
|
||||
redirect: 'gallery/basic',
|
||||
en: 'Examples'
|
||||
},
|
||||
redirect: 'gallery/basic'
|
||||
}
|
||||
// target: '_blank',
|
||||
],
|
||||
docs: [
|
||||
{
|
||||
slug: 'manual/tutorial',
|
||||
title: {
|
||||
zh: '教程',
|
||||
en: 'Tutorial',
|
||||
},
|
||||
},
|
||||
{
|
||||
slug: 'api/l7',
|
||||
title: {
|
||||
zh: '简介 L7',
|
||||
en: 'Introduction',
|
||||
en: 'Introduction'
|
||||
},
|
||||
order:0,
|
||||
order: 0
|
||||
},
|
||||
{
|
||||
slug: 'api/quickstart',
|
||||
title: {
|
||||
zh: '快速入门',
|
||||
en: 'quickstart'
|
||||
},
|
||||
order: 0
|
||||
},
|
||||
{
|
||||
slug: 'api/scene',
|
||||
title: {
|
||||
zh: '场景 Scene',
|
||||
en: 'Scene',
|
||||
en: 'Scene'
|
||||
},
|
||||
order:1,
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
slug: 'api/layer',
|
||||
|
|
@ -69,24 +62,24 @@ module.exports = {
|
|||
zh: '图层 Layer',
|
||||
en: 'Layer'
|
||||
},
|
||||
order:2,
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
slug: 'api/source',
|
||||
title: {
|
||||
zh: '数据 Source',
|
||||
en: 'Source',
|
||||
en: 'Source'
|
||||
},
|
||||
order:3,
|
||||
order: 3
|
||||
},
|
||||
{
|
||||
slug: 'api/component',
|
||||
title: {
|
||||
zh: '组件 Component',
|
||||
en: 'Component',
|
||||
},
|
||||
order:4,
|
||||
en: 'Component'
|
||||
},
|
||||
order: 4
|
||||
}
|
||||
],
|
||||
examples: [
|
||||
{
|
||||
|
|
@ -94,61 +87,61 @@ module.exports = {
|
|||
icon: 'gallery',
|
||||
title: {
|
||||
zh: 'Gallery',
|
||||
en: 'Gallery',
|
||||
},
|
||||
en: 'Gallery'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'point',
|
||||
icon: 'point',
|
||||
title: {
|
||||
zh: '点图层',
|
||||
en: 'Point Layer',
|
||||
},
|
||||
en: 'Point Layer'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'line',
|
||||
icon: 'line',
|
||||
title: {
|
||||
zh: '线图层',
|
||||
en: 'Line Layer',
|
||||
},
|
||||
en: 'Line Layer'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'polygon',
|
||||
icon: 'polygon',
|
||||
title: {
|
||||
zh: '面图层',
|
||||
en: 'Polygon Layer',
|
||||
},
|
||||
en: 'Polygon Layer'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'heatmap',
|
||||
icon: 'heatmap',
|
||||
title: {
|
||||
zh: '热力图',
|
||||
en: 'HeatMap Layer',
|
||||
en: 'HeatMap Layer'
|
||||
},
|
||||
order:5,
|
||||
order: 5
|
||||
},
|
||||
{
|
||||
slug: 'raster',
|
||||
icon: 'raster',
|
||||
title: {
|
||||
zh: '栅格图层',
|
||||
en: 'Raster Layer',
|
||||
},
|
||||
en: 'Raster Layer'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'tutorial',
|
||||
icon: 'map',
|
||||
title: {
|
||||
zh: '教程示例',
|
||||
en: 'Tutorial demo',
|
||||
},
|
||||
},
|
||||
en: 'Tutorial demo'
|
||||
}
|
||||
}
|
||||
],
|
||||
playground: {
|
||||
container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
|
||||
},
|
||||
},
|
||||
container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const path = require('path');
|
||||
exports.onCreateWebpackConfig = ({ getConfig, stage, plugins }) => {
|
||||
exports.onCreateWebpackConfig = ({ getConfig }) => {
|
||||
const config = getConfig();
|
||||
config.resolve.extensions.push('.glsl');
|
||||
config.resolve.alias = {
|
||||
|
|
@ -11,6 +11,6 @@ exports.onCreateWebpackConfig = ({ getConfig, stage, plugins }) => {
|
|||
'@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')
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@ module.exports = {
|
|||
'!**/*.d.ts'
|
||||
],
|
||||
coverageDirectory: 'coverage',
|
||||
coverageReporters: ['text', 'clover'],
|
||||
coverageReporters: [ 'text', 'clover' ],
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
branches: 80,
|
||||
functions: 80,
|
||||
lines: 80,
|
||||
statements: 80,
|
||||
},
|
||||
statements: 80
|
||||
}
|
||||
},
|
||||
// globals: {
|
||||
// 'ts-jest': {
|
||||
|
|
@ -23,20 +23,20 @@ module.exports = {
|
|||
// babelConfig: require('./babel.config.js'),
|
||||
// },
|
||||
// },
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js'],
|
||||
modulePathIgnorePatterns: ['dist'],
|
||||
moduleFileExtensions: [ 'ts', 'tsx', 'js' ],
|
||||
modulePathIgnorePatterns: [ 'dist' ],
|
||||
moduleNameMapper: {
|
||||
'@l7/(.+)$': '<rootDir>packages/$1/src',
|
||||
'@l7/(.+)$': '<rootDir>packages/$1/src'
|
||||
},
|
||||
notify: true,
|
||||
notifyMode: 'always',
|
||||
roots: ['<rootDir>packages'],
|
||||
testMatch: ['**/__tests__/*.spec.+(ts|tsx|js)', '**/*.test.+(ts|tsx|js)','**/__tests__/*/*.spec.+(ts|tsx|js)'],
|
||||
roots: [ '<rootDir>packages' ],
|
||||
testMatch: [ '**/__tests__/*.spec.+(ts|tsx|js)', '**/*.test.+(ts|tsx|js)', '**/__tests__/*/*.spec.+(ts|tsx|js)' ],
|
||||
transform: {
|
||||
// '^.+\\.(ts|tsx)$': 'ts-jest',
|
||||
// @see https://github.com/kulshekhar/ts-jest/issues/1130
|
||||
'^.+\\.(ts|tsx)$': 'babel-jest',
|
||||
'^.+\\.(ts|tsx)$': 'babel-jest'
|
||||
},
|
||||
setupFilesAfterEnv: ['<rootDir>jest/setupTests.ts'],
|
||||
snapshotSerializers: ['enzyme-to-json/serializer'],
|
||||
setupFilesAfterEnv: [ '<rootDir>jest/setupTests.ts' ],
|
||||
snapshotSerializers: [ 'enzyme-to-json/serializer' ]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default class LineModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
const { size = 1 } = feature;
|
||||
return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -60,8 +60,8 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
|
|||
},
|
||||
size: 4,
|
||||
update: (feature: IEncodeFeature, featureIdx: number) => {
|
||||
const { color } = feature;
|
||||
return !color || !color.length ? [0, 0, 0, 0] : color;
|
||||
const { color = [1.0, 1.0, 1.0, 1.0] } = feature;
|
||||
return color;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import LineModel from '../../line/models/line';
|
||||
import ExtrudeModel from './extrude';
|
||||
import FillModel from './fill';
|
||||
|
||||
export type PolygonModelType = 'fill' | 'extrude';
|
||||
export type PolygonModelType = 'fill' | 'extrude' | 'line';
|
||||
|
||||
const PolygonModels: { [key in PolygonModelType]: any } = {
|
||||
fill: FillModel,
|
||||
line: LineModel,
|
||||
extrude: ExtrudeModel,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
import { AttributeType, gl, IEncodeFeature, ILayer } from '@l7/core';
|
||||
import BaseLayer from '../core/BaseLayer';
|
||||
import { PolygonExtrudeTriangulation } from '../core/triangulation';
|
||||
import polygonExtrudeFrag from './shaders/polygon_extrude_frag.glsl';
|
||||
import polygonExtrudeVert from './shaders/polygon_extrude_vert.glsl';
|
||||
interface IPointLayerStyleOptions {
|
||||
opacity: number;
|
||||
}
|
||||
export default class PolygonLayer extends BaseLayer<IPointLayerStyleOptions> {
|
||||
public name: string = 'PolygonLayer';
|
||||
|
||||
protected getConfigSchema() {
|
||||
return {
|
||||
properties: {
|
||||
opacity: {
|
||||
type: 'number',
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected renderModels() {
|
||||
const { opacity } = this.getStyleOptions();
|
||||
this.models.forEach((model) =>
|
||||
model.draw({
|
||||
uniforms: {
|
||||
u_opacity: opacity || 1.0,
|
||||
},
|
||||
}),
|
||||
);
|
||||
return this;
|
||||
}
|
||||
|
||||
protected buildModels() {
|
||||
this.registerBuiltinAttributes(this);
|
||||
this.models = [
|
||||
this.buildLayerModel({
|
||||
moduleName: 'polygonExtrude',
|
||||
vertexShader: polygonExtrudeVert,
|
||||
fragmentShader: polygonExtrudeFrag,
|
||||
triangulation: PolygonExtrudeTriangulation,
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
private registerBuiltinAttributes(layer: ILayer) {
|
||||
// point layer size;
|
||||
layer.styleAttributeService.registerStyleAttribute({
|
||||
name: 'normal',
|
||||
type: AttributeType.Attribute,
|
||||
descriptor: {
|
||||
name: 'a_Normal',
|
||||
buffer: {
|
||||
// give the WebGL driver a hint that this buffer may change
|
||||
usage: gl.STATIC_DRAW,
|
||||
data: [],
|
||||
type: gl.FLOAT,
|
||||
},
|
||||
size: 3,
|
||||
update: (
|
||||
feature: IEncodeFeature,
|
||||
featureIdx: number,
|
||||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
normal: number[],
|
||||
) => {
|
||||
return normal;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
layer.styleAttributeService.registerStyleAttribute({
|
||||
name: 'size',
|
||||
type: AttributeType.Attribute,
|
||||
descriptor: {
|
||||
name: 'a_Size',
|
||||
buffer: {
|
||||
// give the WebGL driver a hint that this buffer may change
|
||||
usage: gl.DYNAMIC_DRAW,
|
||||
data: [],
|
||||
type: gl.FLOAT,
|
||||
},
|
||||
size: 1,
|
||||
update: (
|
||||
feature: IEncodeFeature,
|
||||
featureIdx: number,
|
||||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -2,9 +2,9 @@
|
|||
"L7 地理空间数据可视分析引擎": "L7 Geospatial Visualization Analysis",
|
||||
"地理空间数据可视化": "Geospatial Data Visualization Analysis Framework",
|
||||
"L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于WebGL的开源大规模地理空间数据可视分析开发框架。": "Large-scale WebGL-powered Geospatial data visualization analysis framework",
|
||||
"架构上灵活可扩展":"Flexible and Scalable",
|
||||
"业务上简洁且通用":"Simple and Universal",
|
||||
"可视化上酷炫动感":"Cool and Dynamic",
|
||||
"架构灵活且自由":"Flexible and Scalable",
|
||||
"业务专业且通用":"Simple and Universal",
|
||||
"视觉酷炫且动感":"Cool and Dynamic",
|
||||
"支持地图底图，渲染引擎，图层自由定制、扩展，组合":"Support many basemap, many rendering engine, and layer free customization, extension, combination",
|
||||
"以图形符号学地理设计体系理论基础，易用、易理解、专业、专注":"Base on Semiology of Graphics , easy to use, easy to understand, professional, focused",
|
||||
"支持海量数据，2D、3D，动态，可交互，高性能渲染":"Support multiple basemaps, rendering engines, layers can be customized, expanded and combined freely",
|
||||
|
|
@ -14,5 +14,5 @@
|
|||
"下载使用":"Download",
|
||||
"浅色色板": "Light Theme",
|
||||
"深色色板": "Dark Theme",
|
||||
"一个个真实的数据可视化案例，复杂的地理数据,简单，易用的API接口,让用户达到开箱即用的效果." : "many real data visualization case"
|
||||
"一个个真实的地理数据可视化案例，将复杂的地理数据,通过简单，易用的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."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@ const IndexPage = () => {
|
|||
{
|
||||
icon:
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/ca2168d1-ae50-4929-8738-c6df62231de3.svg',
|
||||
title: t('架构上灵活可扩展'),
|
||||
title: t('架构灵活且自由'),
|
||||
description: t('支持地图底图，渲染引擎，图层自由定制、扩展，组合'),
|
||||
},
|
||||
{
|
||||
icon:
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/0ccf4dcb-1bac-4f4e-8d8d-f1031c77c9c8.svg',
|
||||
title: t('业务上简洁且通用'),
|
||||
title: t('业务专业且通用'),
|
||||
description: t(
|
||||
'以图形符号学地理设计体系理论基础，易用、易理解、专业、专注',
|
||||
),
|
||||
|
|
@ -29,7 +29,7 @@ const IndexPage = () => {
|
|||
{
|
||||
icon:
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/fd232581-14b3-45ec-a85c-fb349c51b376.svg',
|
||||
title: t('可视化上酷炫动感'),
|
||||
title: t('视觉酷炫且动感'),
|
||||
description: t('支持海量数据，2D、3D，动态，可交互，高性能渲染'),
|
||||
},
|
||||
];
|
||||
|
|
@ -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',
|
||||
|
|
@ -66,7 +66,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*B8rtTpvkqTgAAAAAAAAAAABkARQnAQ',
|
||||
|
|
|
|||
Loading…
Reference in New Issue