mirror of https://gitee.com/antv-l7/antv-l7
@thinkinggis
GitHub
commit
4b865796ed
|
|
@ -1,3 +1,3 @@
|
|||
// import '@storybook/addon-actions/register';
|
||||
import '@storybook/addon-notes/register';
|
||||
import '@storybook/addon-storysource/register';
|
||||
// import '@storybook/addon-notes/register';
|
||||
// import '@storybook/addon-storysource/register';
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
// tslint:disable-next-line:no-submodule-imports
|
||||
import '!style-loader!css-loader!sass-loader!./iframe.scss';
|
||||
// import '@storybook/addon-console';
|
||||
import { addParameters, configure } from '@storybook/react';
|
||||
import { create } from '@storybook/theming';
|
||||
|
||||
addParameters({
|
||||
options: {
|
||||
isFullscreen: false,
|
||||
showAddonsPanel: true,
|
||||
showAddonsPanel: false,
|
||||
showSearchBox: false,
|
||||
panelPosition: 'bottom',
|
||||
hierarchySeparator: /\./,
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ module.exports = ({ config }) => {
|
|||
|
||||
config.module.rules.push({
|
||||
test: /\.stories\.tsx?$/,
|
||||
loaders: [
|
||||
{
|
||||
loader: require.resolve('@storybook/addon-storysource/loader'),
|
||||
options: { parser: 'typescript' },
|
||||
},
|
||||
],
|
||||
// loaders: [
|
||||
// {
|
||||
// loader: require.resolve('@storybook/addon-storysource/loader'),
|
||||
// options: { parser: 'typescript' },
|
||||
// },
|
||||
// ],
|
||||
enforce: 'pre',
|
||||
},{
|
||||
test: /\.stories\.css?$/,
|
||||
|
|
|
|||
19
CHANGELOG.md
19
CHANGELOG.md
|
|
@ -3,6 +3,25 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [2.0.0-beta.20](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.20) (2019-12-12)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||
|
||||
### Features
|
||||
|
||||
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||
|
||||
# [2.0.0-beta.19](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.19) (2019-12-08)
|
||||
|
||||
### Bug Fixes
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ 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 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
|
||||
|
|
@ -17,13 +16,12 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
</video>
|
||||
|
||||
2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
2.0.beta 版本目前有些功能还未完善，1 月 6 号我们正式版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
|
||||
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
## 核心特性
|
||||
|
||||
|
||||
🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
|
@ -34,34 +32,34 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
🌏 简单灵活的数据接入
|
||||
|
||||
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
|
||||
🌏 多地图底图支持，支持离线内网部署
|
||||
🌏 多地图底图支持，支持离线内网部署
|
||||
|
||||
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
|
||||
|
||||
## 支持丰富的图表类型
|
||||
|
||||
### 点图层
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义Marker
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D 柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义 Marker
|
||||
|
||||
### 线图层
|
||||
|
||||
- 路径地图
|
||||
- 弧线，支持2D弧线、3D弧线以及大圆航线
|
||||
- 弧线，支持 2D 弧线、3D 弧线以及大圆航线
|
||||
- 等值线
|
||||
|
||||
### 面图层
|
||||
|
||||
- 填充图
|
||||
- 3D填充图
|
||||
- 3D 填充图
|
||||
|
||||
### 热力图
|
||||
|
||||
|
|
@ -70,6 +68,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
- 网格热力图
|
||||
|
||||
### 栅格地图
|
||||
|
||||
- 图片
|
||||
- Raster
|
||||
|
||||
|
|
@ -77,5 +76,4 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
|
||||
|
||||
|
||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ redirect_from:
|
|||
|
||||
2.0.beta 版本目前有些功能还未完善，
|
||||
|
||||
⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
⚠️ 1 月 6 号 正式版发版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
|
||||
|
||||
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
|
|
@ -24,7 +24,6 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
## 核心特性
|
||||
|
||||
|
||||
🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
|
@ -35,34 +34,34 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
🌏 简单灵活的数据接入
|
||||
|
||||
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
|
||||
🌏 多地图底图支持，支持离线内网部署
|
||||
🌏 多地图底图支持，支持离线内网部署
|
||||
|
||||
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
|
||||
|
||||
## 支持丰富的图表类型
|
||||
|
||||
### 点图层
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义Marker
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D 柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义 Marker
|
||||
|
||||
### 线图层
|
||||
|
||||
- 路径地图
|
||||
- 弧线，支持2D弧线、3D弧线以及大圆航线
|
||||
- 弧线，支持 2D 弧线、3D 弧线以及大圆航线
|
||||
- 等值线
|
||||
|
||||
### 面图层
|
||||
|
||||
- 填充图
|
||||
- 3D填充图
|
||||
- 3D 填充图
|
||||
|
||||
### 热力图
|
||||
|
||||
|
|
@ -71,6 +70,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
- 网格热力图
|
||||
|
||||
### 栅格地图
|
||||
|
||||
- 图片
|
||||
- Raster
|
||||
|
||||
|
|
@ -78,11 +78,10 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
|
||||
|
||||
|
||||
|
||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||
|
||||
### 技术支持服务群
|
||||
|
||||
L7 相关技术问题，需求反馈，我们会及时响应
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@ title: 1.x stable
|
|||
order: 1
|
||||
---
|
||||
|
||||
## L7 1.x 版本
|
||||
|
||||
|
||||
## L7 1.x 版本
|
||||
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
目前 1.x 版本最新版本为 
|
||||
|
||||
|
|
@ -19,9 +17,10 @@ order: 1
|
|||
|
||||
### npm 安装使用
|
||||
|
||||
会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本
|
||||
会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本
|
||||
|
||||
```
|
||||
npm install @antv/l7
|
||||
npm install @antv/l7
|
||||
|
||||
```
|
||||
|
||||
|
|
@ -31,9 +30,6 @@ npm install @antv/l7
|
|||
|
||||
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
|
||||
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能.
|
||||
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能.
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@ title: 1.x 稳定版
|
|||
order: 1
|
||||
---
|
||||
|
||||
## L7 1.x 版本
|
||||
|
||||
|
||||
## L7 1.x 版本
|
||||
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
目前 1.x 版本最新版本为 
|
||||
|
||||
|
|
@ -19,9 +17,10 @@ order: 1
|
|||
|
||||
### npm 安装使用
|
||||
|
||||
会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本
|
||||
会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本
|
||||
|
||||
```
|
||||
npm install @antv/l7
|
||||
npm install @antv/l7
|
||||
|
||||
```
|
||||
|
||||
|
|
@ -31,6 +30,4 @@ npm install @antv/l7
|
|||
|
||||
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
||||
|
||||
|
||||
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能.
|
||||
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 网格热力图
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: HeatmapLayer
|
||||
order: 5
|
||||
order: 0
|
||||
---
|
||||
|
||||
# heatmapLayer
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: HeatmapLayer
|
||||
order: 5
|
||||
order: 0
|
||||
---
|
||||
|
||||
# heatmapLayer
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 蜂窝热力图
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 经典热力图
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -24,6 +24,10 @@ new Layer(option)
|
|||
|
||||
## 配置项
|
||||
|
||||
### name
|
||||
|
||||
设置图层名称,可根据 name 获取 layer;
|
||||
|
||||
### visable
|
||||
|
||||
图层是否可见 {bool } default true
|
||||
|
|
@ -40,23 +44,16 @@ new Layer(option)
|
|||
|
||||
图层显示最大缩放等级 （0-18） {number} default 18
|
||||
|
||||
## 鼠标事件
|
||||
### blend
|
||||
|
||||
⚠️ 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) => {}); // 鼠标右键图层要素
|
||||
```
|
||||
- normal 正常效果 默认
|
||||
- additive 叠加模式
|
||||
- subtractive 相减模式
|
||||
- max 最大值
|
||||
|
||||
## 方法
|
||||
# 方法
|
||||
|
||||
### source
|
||||
|
||||
|
|
@ -101,8 +98,6 @@ layer.source(data, {
|
|||
});
|
||||
```
|
||||
|
||||
###
|
||||
|
||||
### scale
|
||||
|
||||
cscle('field', scaleConfig)
|
||||
|
|
@ -121,21 +116,15 @@ cscle('field', scaleConfig)
|
|||
}
|
||||
```
|
||||
|
||||
## 视觉编码方法
|
||||
|
||||
可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通过，你可以指定数据字段，为不同要素设置不同的图形属性。
|
||||
|
||||
### size
|
||||
|
||||
将数据值映射到图形的大小上的方法。
|
||||
将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档
|
||||
|
||||
**注意：**
|
||||
|
||||
不同图层的 size 的含义有所差别：
|
||||
|
||||
- point 图形的 size 影响点的半径大小和高度；
|
||||
|
||||
- line, arc, path 中的 size 影响线的粗细,和高度；
|
||||
|
||||
- polygon size 影响的是高度
|
||||
|
||||
```javascript
|
||||
```
|
||||
pointLayer.size(10); // 常量
|
||||
pointLayer.size('type'); // 使用字段映射到大小
|
||||
pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值
|
||||
|
|
@ -265,24 +254,58 @@ layer.color('gender*age', (gender, age) => {
|
|||
|
||||
### style
|
||||
|
||||
用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
|
||||
|
||||
- fill
|
||||
全局设置图形显示属性
|
||||
|
||||
- opacity 设置透明度
|
||||
|
||||
- stroke 线填充颜色
|
||||
- stroke 线填充颜色 仅点图层支持
|
||||
|
||||
- strokeWidth 线的宽度
|
||||
- strokeWidth 线的宽度 仅点图层支持
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
fill: 'red',
|
||||
opacity: 0.8,
|
||||
stroke: 'white',
|
||||
});
|
||||
```
|
||||
|
||||
## 图层更新方法
|
||||
|
||||
如果已经添加了图层，需要修改图层显示样式可以再次调用图形映射方法，然后调用 `scene.render()`更新渲染即可
|
||||
|
||||
### 样式更新
|
||||
|
||||
```javascript
|
||||
layer.color('blue');
|
||||
layer.size(10);
|
||||
layer.style({});
|
||||
scene.render();
|
||||
```
|
||||
|
||||
### setData
|
||||
|
||||
更新 Source 数据
|
||||
|
||||
参数:
|
||||
|
||||
- data 数据
|
||||
- option 默认和初始配置项一致，如果数据格式相同可不设置
|
||||
|
||||
调用 setData 方法会自动更新图层渲染
|
||||
|
||||
```javascript
|
||||
layer.setData(data);
|
||||
```
|
||||
|
||||
### setBlend(type)
|
||||
|
||||
设置图层叠加方法
|
||||
参数：
|
||||
|
||||
- type blend 类型
|
||||
|
||||
## 图层控制方法
|
||||
|
||||
### show
|
||||
|
||||
图层显示
|
||||
|
|
@ -299,6 +322,16 @@ layer.show();
|
|||
layer.hide();
|
||||
```
|
||||
|
||||
### isVisable
|
||||
|
||||
图层是否可见
|
||||
|
||||
return `true | false`
|
||||
|
||||
### setIndex
|
||||
|
||||
设置图层绘制顺序
|
||||
|
||||
### fitBounds
|
||||
|
||||
缩放到图层范围
|
||||
|
|
@ -306,3 +339,116 @@ layer.hide();
|
|||
```javascript
|
||||
layer.fitBounds();
|
||||
```
|
||||
|
||||
### setMinZoom
|
||||
|
||||
### setMaxZoom
|
||||
|
||||
## 图层交互方法
|
||||
|
||||
### active
|
||||
|
||||
开启或者关闭 mousehover 元素高亮效果
|
||||
|
||||
### setActive
|
||||
|
||||
根据元素 ID 设置指定元素 hover 高亮
|
||||
|
||||
### select
|
||||
|
||||
开启或者关闭 mouseclick 元素选中高亮效果
|
||||
|
||||
### setSelect
|
||||
|
||||
根据元素 ID 设置指定元素 click 选中 高亮
|
||||
|
||||
## 鼠标事件
|
||||
|
||||
鼠标事件回调参数 target
|
||||
|
||||
```typescript
|
||||
```
|
||||
|
||||
- x: number 鼠标 在地图位置 x 坐标
|
||||
- y: number 鼠标 在地图位置 y 坐标
|
||||
- type: string 鼠标事件类型
|
||||
- lngLat: ILngLat {lng:number, lat: number }; 鼠标所在位置经纬度
|
||||
- feature: any; 数据选中的地理要素信息
|
||||
- featureId: number | null; 数据选中的地理要素的 ID
|
||||
|
||||
### click
|
||||
|
||||
点击事件
|
||||
|
||||
### mousemove
|
||||
|
||||
鼠标移动事件
|
||||
|
||||
### mouseout
|
||||
|
||||
鼠标移除
|
||||
|
||||
### mouseup
|
||||
|
||||
鼠标按下
|
||||
|
||||
### mousedown
|
||||
|
||||
鼠标向下
|
||||
|
||||
### contextmenu
|
||||
|
||||
鼠标右键
|
||||
|
||||
### unclick
|
||||
|
||||
点击未拾取到元素
|
||||
|
||||
### unmousemove
|
||||
|
||||
鼠标移动未拾取到元素
|
||||
|
||||
### unmouseup
|
||||
|
||||
鼠标抬起未拾取到元素
|
||||
|
||||
### unmousedown
|
||||
|
||||
鼠标按下未拾取到元素
|
||||
|
||||
### uncontextmenu
|
||||
|
||||
鼠标右键位拾取到元素
|
||||
|
||||
### unpick
|
||||
|
||||
所有鼠标事件未拾取到
|
||||
|
||||
使用示例
|
||||
|
||||
```javascript
|
||||
layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
|
||||
layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
|
||||
layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
|
||||
layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
|
||||
layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
|
||||
layer.on('contextmenu', (ev) => {}); // 图层要素点击右键菜单
|
||||
|
||||
// 鼠标在图层外的事件
|
||||
layer.on('unclick', (ev) => {}); // 图层外点击
|
||||
layer.on('unmousemove', (ev) => {}); // 图层外移动
|
||||
layer.on('unmouseup', (ev) => {}); // 图层外鼠标抬起
|
||||
layer.on('unmousedown', (ev) => {}); // 图层外单击按下时触发
|
||||
layer.on('uncontextmenu', (ev) => {}); // 图层外点击右键
|
||||
layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件
|
||||
```
|
||||
|
||||
## 图层事件
|
||||
|
||||
### inited
|
||||
|
||||
图层初始化完成后触发
|
||||
|
||||
### remove
|
||||
|
||||
图层移除时触发
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
title: 弧线图
|
||||
order: 1
|
||||
---
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
|
||||
|
||||
## 使用
|
||||
|
||||
### 数据
|
||||
绘制弧线只需提供起始点坐标即可
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
弧线支持两种弧线算法
|
||||
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
|
||||
|
||||
### 示例代码
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
```
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: LineLayer
|
||||
order: 2
|
||||
order: 0
|
||||
---
|
||||
|
||||
## 线图层
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
title: 路径图
|
||||
order: 1
|
||||
---
|
||||
用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
shape 设置成line即可绘制路线图
|
||||
- line
|
||||
|
||||
### size
|
||||
路径图线的size支持两个维度
|
||||
|
||||
- width 宽度
|
||||
- height 高度
|
||||
|
||||
```javascript
|
||||
layer.size([2,10]) // 绘制宽度为2，高度为10的路径
|
||||
|
||||
layer.size('',[])
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: bubble
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
title: 气泡图
|
||||
order: 1
|
||||
---
|
||||
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
|
||||
|
||||
## 使用
|
||||
|
||||
气泡图通过PointLayer对象实例化，
|
||||
|
||||
### shape
|
||||
|
||||
通常气泡图shape 设置为 **circle**
|
||||
|
||||
### size
|
||||
|
||||
气泡图大小，需要指定数据映射字段
|
||||
|
||||
```javascript
|
||||
|
||||
const bubble =
|
||||
new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size('mag',[0, 25])
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
```
|
||||
## tips
|
||||
|
||||
目前style的配置项只支持全局设置，不支持数据映射。
|
||||
|
||||
如果 opacity 设置为 0.3 则所有的气泡都是 0.3
|
||||
|
||||
style方法如果没有设置 stroke, 默认于气泡的填充色相同
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 复合图表地图
|
||||
order: 6
|
||||
---
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 复合图表地图
|
||||
order: 6
|
||||
---
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: 聚合图
|
||||
order: 5
|
||||
---
|
||||
|
||||
|
||||
##使用
|
||||
|
||||
目前只有点图层支持聚类方法
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
title: 聚合图
|
||||
order: 5
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
目前只有点数据支持聚类方法
|
||||
|
||||
数据聚合主要从数据层数据，因此需要在Source方法配置 cluster 参数
|
||||
|
||||
### Source
|
||||
[source 文档](../../source/source)
|
||||
|
||||
### 配置项
|
||||
- cluster **boolean** 是否聚合
|
||||
- clusterOption 聚合配置项
|
||||
- radius 聚合半径 **number** default 40
|
||||
- minZoom: 最小聚合缩放等级 **number** default 0
|
||||
- maxZoom: 最大聚合缩放等级 **number** default 16
|
||||
|
||||
数据聚合之后，数据会增加 point_count属性，在可视化渲染时可以根据 point_count进行数据映射。
|
||||
|
||||
#### 方法
|
||||
|
||||
**getClusters(zoom: number)**
|
||||
|
||||
获取指定缩放等级的聚合数据
|
||||
|
||||
- zoom 缩放等级
|
||||
|
||||
**getClustersLeaves(id: string)**
|
||||
|
||||
根据id获取聚合节点的数据
|
||||
|
||||
- id 聚合数据id
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
layer.source(pointsData, {
|
||||
cluster: true,
|
||||
});
|
||||
|
||||
// 设置配置项
|
||||
layer.source(pointsData, {
|
||||
cluster: true,
|
||||
clusterOption:{
|
||||
radius:40,
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### 完整示例
|
||||
|
||||
```javascript
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(pointsData, {
|
||||
cluster: true,
|
||||
})
|
||||
.shape('circle')
|
||||
.scale('point_count', {
|
||||
type: 'quantile',
|
||||
})
|
||||
.size('point_count', [5, 10, 15, 20, 25])
|
||||
// .size(10)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
title: 3D 柱图
|
||||
order: 5
|
||||
---
|
||||
3D柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
||||
|
||||
## 使用
|
||||
|
||||
3D柱图通过 PointLayer对象实例化，将shape设置成不同的3Dshape
|
||||
### shape
|
||||
|
||||
3D Shape 支持
|
||||
|
||||
- cylinder
|
||||
- triangleColumn
|
||||
- hexagonColumn
|
||||
- squareColumn
|
||||
|
||||
### size
|
||||
|
||||
3D柱图size 需要设置三个维度 [w, l, z]
|
||||
- w 宽
|
||||
- l 长
|
||||
- z 高度
|
||||
|
||||
size设置成常量
|
||||
|
||||
```
|
||||
layer.size([2,2,3])
|
||||
```
|
||||
size 回调函数设置
|
||||
|
||||
```
|
||||
layer.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
const column = new PointLayer({})
|
||||
.source(data)
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn'
|
||||
])
|
||||
.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
title: 亮度图
|
||||
order: 3
|
||||
---
|
||||
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
- dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
|
||||
### color
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
|
||||
- 有权重
|
||||
为数据有权重可以设置一组同一色相不同亮度的色带。
|
||||
|
||||
|
||||
```javascript
|
||||
const pointLayer = new PointLayer()
|
||||
.source(data)
|
||||
.size(2)
|
||||
.shape('dot')
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## 相关demo
|
||||
|
||||
[城市亮度图](../../../../examples/point/dot)
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
title: 亮度图
|
||||
order: 3
|
||||
---
|
||||
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
- dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
|
||||
### color
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
|
||||
- 有权重
|
||||
为数据有权重可以设置一组同一色相不同亮度的色带。
|
||||
|
||||
|
||||
```javascript
|
||||
const pointLayer = new PointLayer()
|
||||
.source(data)
|
||||
.size(2)
|
||||
.shape('dot')
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## 相关demo
|
||||
|
||||
[城市亮度图](../../../../examples/point/dot)
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: 自定义 Marker
|
||||
order: 7
|
||||
---
|
||||
可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
||||
## 使用
|
||||
|
||||
[Marker 文档](../../component)
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: 自定义 Marker
|
||||
order: 7
|
||||
---
|
||||
可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
||||
## 使用
|
||||
|
||||
[Marker 文档](../../component)
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: PointLayer
|
||||
order: 1
|
||||
order: 0
|
||||
---
|
||||
|
||||
# PointLayer
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: PointLayer
|
||||
order: 1
|
||||
order: 0
|
||||
---
|
||||
|
||||
# PointLayer
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
title: 散点图
|
||||
order: 2
|
||||
---
|
||||
在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
|
||||
|
||||
## 使用
|
||||
散点图通过PointLayer对象实例化
|
||||
|
||||
### shape
|
||||
|
||||
- circle
|
||||
- square
|
||||
- hexagon
|
||||
- triangle
|
||||
- pentagon
|
||||
- octogon
|
||||
- hexagram
|
||||
- rhombus
|
||||
- vesica
|
||||
|
||||
散点图shape 一般设置成常量
|
||||
|
||||
### color
|
||||
|
||||
color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。
|
||||
|
||||
### size
|
||||
散点图一般等大小的图形,size 一般设置成常量
|
||||
|
||||
```javascript
|
||||
|
||||
const scatter =
|
||||
new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 符号图
|
||||
order: 4
|
||||
---
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
title: 符号图
|
||||
order: 4
|
||||
---
|
||||
在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
符号图 通过PointLayer对象实例化，将shape设置成图片符号
|
||||
|
||||
### shape
|
||||
|
||||
通过scene addImage 方法
|
||||
|
||||
addImage()
|
||||
参数：
|
||||
- id 图片的id,
|
||||
- url 图片的url
|
||||
|
||||
```javascript
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||
);
|
||||
|
||||
⚠️ 符号图的ID不能与点图层已有shape名称相同，比如不能设置 circle
|
||||
|
||||
```
|
||||
|
||||
符号图需要把shape设置成图片的id，同样符号图shape也支持数据映射
|
||||
|
||||
```javascript
|
||||
const scatter =
|
||||
new PointLayer()
|
||||
.source(data)
|
||||
.shape('00')
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
```
|
||||
## 相关demo
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 3D填充图
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 填充图
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: PolygonLayer
|
||||
order: 3
|
||||
order: 0
|
||||
---
|
||||
|
||||
# 填充图
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: PolygonLayer
|
||||
order: 3
|
||||
order: 0
|
||||
---
|
||||
|
||||
# 填充图
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
title: 地图 Map
|
||||
order: 2
|
||||
---
|
||||
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。
|
||||
L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。
|
||||
|
||||
## Map
|
||||
|
||||
### 引入 Map
|
||||
|
||||
```javascropt
|
||||
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
```
|
||||
|
||||
### 实例化
|
||||
|
||||
⚠️ 使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用
|
||||
|
||||
#### 高德地图实例化
|
||||
|
||||
```javascript
|
||||
const L7AMap = new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [104.288144, 31.239692],
|
||||
zoom: 4.4,
|
||||
token: 'xxxx - token',
|
||||
});
|
||||
```
|
||||
|
||||
#### Mapbox 地图实例化
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313
|
||||
token:'xxxx - token'
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### 传入外部实例
|
||||
|
||||
为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图
|
||||
|
||||
⚠️ scene id 参数需要地图的 Map 实例是同个容器。
|
||||
|
||||
⚠️ 传入地图实例需要自行引入相关地图的 API
|
||||
|
||||
#### 传入高德地图实例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
#### 传入 Mapbox 地图实例
|
||||
|
||||
```javascript
|
||||
mapboxgl.accessToken =
|
||||
'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
});
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
title: 地图 Map
|
||||
order: 2
|
||||
---
|
||||
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。=
|
||||
L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。
|
||||
|
||||
## Map
|
||||
|
||||
### 引入 Map
|
||||
|
||||
```javascropt
|
||||
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
```
|
||||
|
||||
### 实例化
|
||||
|
||||
⚠️ 使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用
|
||||
|
||||
#### 高德地图实例化
|
||||
|
||||
```javascript
|
||||
const L7AMap = new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [104.288144, 31.239692],
|
||||
zoom: 4.4,
|
||||
token: 'xxxx - token',
|
||||
});
|
||||
```
|
||||
|
||||
#### Mapbox 地图实例化
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313
|
||||
token:'xxxx - token'
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### 传入外部实例
|
||||
|
||||
为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图
|
||||
|
||||
⚠️ scene id 参数需要地图的 Map 实例是同个容器。
|
||||
|
||||
⚠️ 传入地图实例需要自行引入相关地图的 API
|
||||
|
||||
#### 传入高德地图实例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
#### 传入 Mapbox 地图实例
|
||||
|
||||
```javascript
|
||||
mapboxgl.accessToken =
|
||||
'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
});
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
|
@ -95,6 +95,7 @@ const scene = new L7.Scene({
|
|||
- dark
|
||||
- light
|
||||
- normal
|
||||
- blank 无底图
|
||||
|
||||
除了内置的样式，你也可以传入自定义的其他属性。
|
||||
|
||||
|
|
|
|||
|
|
@ -156,4 +156,7 @@ export default class AMapExample extends React.Component {
|
|||
|
||||
更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories)
|
||||
|
||||
### Vue 欢迎补充
|
||||
### Vue 欢迎补充
|
||||
[1.x Vue 使用](https://codesandbox.io/s/l7-vue1xdemo-wknsz)
|
||||
### Html
|
||||
[2.0版本 HTML 使用模板](https://codesandbox.io/s/l7htmltemplate-vp2lp)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "中文分类",
|
||||
"en": "Category"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "normal2.js",
|
||||
"title": "城市亮度图",
|
||||
"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*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Dot Intensity
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: "亮度图"
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -5,14 +5,10 @@
|
|||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "normal2.js",
|
||||
"title": "城市亮度图",
|
||||
"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*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"
|
||||
"filename": "scatter.js",
|
||||
"title": "散点图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LnlmQ7sFWigAAAAAAAAAAABkARQnAQ"
|
||||
|
||||
}
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ -121.24357, 37.58264 ],
|
||||
pitch: 0,
|
||||
zoom: 6.45
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'Longitude',
|
||||
y: 'Latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.size(4)
|
||||
.color('Magnitude', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const map = new AMap.Map('container', {
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [ 116.397428, 39.90923 ] // 初始化地图中心点
|
||||
});
|
||||
new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
mapInstance: map
|
||||
})
|
||||
});
|
||||
|
|
@ -87,6 +87,38 @@ module.exports = {
|
|||
},
|
||||
order: 3
|
||||
},
|
||||
{
|
||||
slug: 'api/layer/point_layer',
|
||||
title: {
|
||||
zh: '点图层',
|
||||
en: 'PointLayer'
|
||||
},
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
slug: 'api/layer/line_layer',
|
||||
title: {
|
||||
zh: '线图层',
|
||||
en: 'LineLayer'
|
||||
},
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
slug: 'api/layer/polygon_layer',
|
||||
title: {
|
||||
zh: '面图层',
|
||||
en: 'PolygonLayer'
|
||||
},
|
||||
order: 3
|
||||
},
|
||||
{
|
||||
slug: 'api/layer/heatmap_layer',
|
||||
title: {
|
||||
zh: '热力图',
|
||||
en: 'HeatmapLayer'
|
||||
},
|
||||
order: 4
|
||||
},
|
||||
{
|
||||
slug: 'api/source',
|
||||
title: {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"message": "chore: publish"
|
||||
}
|
||||
},
|
||||
"version": "2.0.0-beta.19",
|
||||
"version": "2.0.0-beta.20",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
"site:clean": "gatsby clean",
|
||||
"site:deploy": "yarn run site:build && gh-pages -d public",
|
||||
"site:publish": "gh-pages -d public",
|
||||
"lint:fix": "prettier --write docs/api/**/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx *.md",
|
||||
"lint:fix": "prettier --write docs/api/**/*.md docs/api/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx *.md",
|
||||
"lint:examples": "eslint examples/**/**/*.js --fix",
|
||||
"prebuild": "run-p tsc lint",
|
||||
"build": "yarn clean && lerna run build",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [2.0.0-beta.20](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.20) (2019-12-12)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-component
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [2.0.0-beta.19](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.19) (2019-12-08)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-component
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-component",
|
||||
"version": "2.0.0-beta.19",
|
||||
"version": "2.0.0-beta.20",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.0-beta.19",
|
||||
"@antv/l7-utils": "^2.0.0-beta.19",
|
||||
"@antv/l7-core": "^2.0.0-beta.20",
|
||||
"@antv/l7-utils": "^2.0.0-beta.20",
|
||||
"@turf/distance": "^6.0.1",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
|
|||
|
|
@ -236,7 +236,7 @@ export default class Layers extends Control {
|
|||
: null;
|
||||
|
||||
if (type) {
|
||||
this.emit(type, obj); // TODO:图
|
||||
this.emit(type, obj);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -165,7 +165,10 @@ export default class Popup extends EventEmitter implements IPopup {
|
|||
};
|
||||
}
|
||||
|
||||
private onClickClose() {
|
||||
private onClickClose(e: Event) {
|
||||
if (e.stopPropagation) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
this.remove();
|
||||
}
|
||||
|
||||
|
|
@ -193,6 +196,9 @@ export default class Popup extends EventEmitter implements IPopup {
|
|||
this.container.addEventListener('mousedown', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
this.container.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
if (maxWidth && this.container.style.maxWidth !== maxWidth) {
|
||||
this.container.style.maxWidth = maxWidth;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,25 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [2.0.0-beta.20](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.20) (2019-12-12)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||
* **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||
* **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||
* **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [2.0.0-beta.19](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.19) (2019-12-08)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-core",
|
||||
"version": "2.0.0-beta.19",
|
||||
"version": "2.0.0-beta.20",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-utils": "^2.0.0-beta.19",
|
||||
"@antv/l7-utils": "^2.0.0-beta.20",
|
||||
"@mapbox/tiny-sdf": "^1.1.1",
|
||||
"ajv": "^6.10.2",
|
||||
"element-resize-event": "^3.0.3",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@ export default class PopupService implements IPopupService {
|
|||
}
|
||||
|
||||
public addPopup(popup: IPopup) {
|
||||
this.popup.remove();
|
||||
if (this.popup) {
|
||||
this.popup.remove();
|
||||
}
|
||||
popup.addTo(this.scene);
|
||||
this.popup = popup;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { ILayerConfig } from '../layer/ILayerService';
|
|||
import { IGlobalConfigService, ISceneConfig } from './IConfigService';
|
||||
import mapConfigSchema from './mapConfigSchema';
|
||||
import sceneConfigSchema from './sceneConfigSchema';
|
||||
import WarnInfo, { IWarnInfo } from './warnInfo';
|
||||
|
||||
/**
|
||||
* 场景默认配置项
|
||||
|
|
@ -49,14 +50,17 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
|
|||
visible: true,
|
||||
autoFit: false,
|
||||
zIndex: 0,
|
||||
blend: 'normal',
|
||||
pickedFeatureID: -1,
|
||||
enableMultiPassRenderer: true,
|
||||
enablePicking: true,
|
||||
active: false,
|
||||
activeColor: 'red',
|
||||
enableHighlight: false,
|
||||
enableSelect: false,
|
||||
highlightColor: 'red',
|
||||
enableTAA: false,
|
||||
selectColor: 'blue',
|
||||
enableTAA: true,
|
||||
jitterScale: 1,
|
||||
enableLighting: false,
|
||||
};
|
||||
|
|
@ -104,6 +108,10 @@ export default class GlobalConfigService implements IGlobalConfigService {
|
|||
return this.sceneConfigCache[sceneId];
|
||||
}
|
||||
|
||||
public getSceneWarninfo(id: string) {
|
||||
return WarnInfo[id];
|
||||
}
|
||||
|
||||
public setSceneConfig(sceneId: string, config: Partial<ISceneConfig>) {
|
||||
this.sceneConfigCache[sceneId] = {
|
||||
...defaultSceneConfig,
|
||||
|
|
|
|||
|
|
@ -41,6 +41,11 @@ export interface IGlobalConfigService {
|
|||
getLayerConfig<IChildLayerConfig>(
|
||||
layerId: string,
|
||||
): Partial<ILayerConfig & ISceneConfig & IChildLayerConfig>;
|
||||
/**
|
||||
* 获取警告信息
|
||||
* @param key
|
||||
*/
|
||||
getSceneWarninfo(layerId: string): string;
|
||||
|
||||
/**
|
||||
* 设置图层配置项，继承所属场景配置项
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
export interface IWarnInfo {
|
||||
MapToken: string;
|
||||
SDK: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
const WarnInfo: IWarnInfo = {
|
||||
MapToken:
|
||||
'您正在使用 Demo测试地图token，如果生成环境中使用去对应地图请注册Token',
|
||||
SDK: '请确认引入了mapbox-gl api且在L7之前引入',
|
||||
};
|
||||
|
||||
export default WarnInfo;
|
||||
|
|
@ -1,6 +1,16 @@
|
|||
import { ILngLat } from '../map/IMapService';
|
||||
export enum InteractionEvent {
|
||||
Hover = 'hover',
|
||||
Click = 'click',
|
||||
Select = 'select',
|
||||
Active = 'active',
|
||||
}
|
||||
export interface IInteractionTarget {
|
||||
x: number;
|
||||
y: number;
|
||||
lngLat: ILngLat;
|
||||
type: string;
|
||||
featureId?: number;
|
||||
}
|
||||
|
||||
export interface IInteractionService {
|
||||
|
|
@ -8,7 +18,9 @@ export interface IInteractionService {
|
|||
destroy(): void;
|
||||
on(
|
||||
eventName: InteractionEvent,
|
||||
callback: (params: { x: number; y: number; type: string }) => void,
|
||||
callback: (params: IInteractionTarget) => void,
|
||||
): void;
|
||||
triggerHover({ x, y, type }: { x: number; y: number; type?: string }): void;
|
||||
triggerHover({ x, y, type }: Partial<IInteractionTarget>): void;
|
||||
triggerSelect(id: number): void;
|
||||
triggerActive(id: number): void;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,13 @@ export default class InteractionService extends EventEmitter
|
|||
public triggerHover({ x, y }: { x: number; y: number }) {
|
||||
this.emit(InteractionEvent.Hover, { x, y });
|
||||
}
|
||||
public triggerSelect(id: number): void {
|
||||
this.emit(InteractionEvent.Select, { featureId: id });
|
||||
}
|
||||
|
||||
public triggerActive(id: number): void {
|
||||
this.emit(InteractionEvent.Active, { featureId: id });
|
||||
}
|
||||
|
||||
private addEventListenerOnMap() {
|
||||
const $containter = this.mapService.getMapContainer();
|
||||
|
|
@ -81,6 +88,7 @@ export default class InteractionService extends EventEmitter
|
|||
x -= left;
|
||||
y -= top;
|
||||
}
|
||||
this.emit(InteractionEvent.Hover, { x, y, type });
|
||||
const lngLat = this.mapService.containerToLngLat([x, y]);
|
||||
this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@ import { SyncBailHook, SyncHook, SyncWaterfallHook } from 'tapable';
|
|||
import Clock from '../../utils/clock';
|
||||
import { ISceneConfig } from '../config/IConfigService';
|
||||
import { IMapService } from '../map/IMapService';
|
||||
import { IModel, IModelInitializationOptions } from '../renderer/IModel';
|
||||
import {
|
||||
IBlendOptions,
|
||||
IModel,
|
||||
IModelInitializationOptions,
|
||||
} from '../renderer/IModel';
|
||||
import {
|
||||
IMultiPassRenderer,
|
||||
IPass,
|
||||
|
|
@ -22,6 +26,16 @@ import {
|
|||
StyleAttributeOption,
|
||||
Triangulation,
|
||||
} from './IStyleAttributeService';
|
||||
export enum BlendType {
|
||||
normal = 'normal',
|
||||
additive = 'additive',
|
||||
subtractive = 'subtractive',
|
||||
min = 'min',
|
||||
max = 'max',
|
||||
}
|
||||
export interface IBlendTypes {
|
||||
[key: string]: Partial<IBlendOptions>;
|
||||
}
|
||||
export interface IDataState {
|
||||
dataSourceNeedUpdate: boolean;
|
||||
dataMappingNeedUpdate: boolean;
|
||||
|
|
@ -38,6 +52,7 @@ export interface ILayerModelInitializationOptions {
|
|||
export interface ILayerModel {
|
||||
render(): void;
|
||||
getUninforms(): IModelUniform;
|
||||
getBlend(): IBlendOptions;
|
||||
buildModels(): IModel[];
|
||||
}
|
||||
export interface IModelUniform {
|
||||
|
|
@ -57,7 +72,8 @@ export interface IActiveOption {
|
|||
|
||||
export interface ILayer {
|
||||
id: string; // 一个场景中同一类型 Layer 可能存在多个
|
||||
name: string; // 代表 Layer 的类型
|
||||
type: string; // 代表 Layer 的类型
|
||||
name: string; //
|
||||
inited: boolean; // 是否初始化完成
|
||||
zIndex: number;
|
||||
plugins: ILayerPlugin[];
|
||||
|
|
@ -73,6 +89,8 @@ export interface ILayer {
|
|||
beforePickingEncode: SyncHook<void>;
|
||||
afterPickingEncode: SyncHook<void>;
|
||||
beforeHighlight: SyncHook<[number[]]>;
|
||||
beforeSelect: SyncHook<[number[]]>;
|
||||
afterSelect: SyncHook<void>;
|
||||
afterHighlight: SyncHook<void>;
|
||||
beforeDestroy: SyncHook<void>;
|
||||
afterDestroy: SyncHook<void>;
|
||||
|
|
@ -86,6 +104,8 @@ export interface ILayer {
|
|||
getLayerConfig(): Partial<ILayerConfig & ISceneConfig>;
|
||||
getContainer(): Container;
|
||||
setContainer(container: Container): void;
|
||||
setCurrentPickId(id: number | null): void;
|
||||
getCurrentPickId(): number | null;
|
||||
buildLayerModel(
|
||||
options: ILayerModelInitializationOptions &
|
||||
Partial<IModelInitializationOptions>,
|
||||
|
|
@ -116,6 +136,7 @@ export interface ILayer {
|
|||
isVisible(): boolean;
|
||||
setMaxZoom(min: number): ILayer;
|
||||
setMinZoom(max: number): ILayer;
|
||||
setBlend(type: keyof typeof BlendType): void;
|
||||
// animate(field: string, option: any): ILayer;
|
||||
render(): ILayer;
|
||||
destroy(): void;
|
||||
|
|
@ -186,6 +207,8 @@ export interface ILayerConfig {
|
|||
visible: boolean;
|
||||
zIndex: number;
|
||||
autoFit: boolean;
|
||||
name: string; //
|
||||
blend: keyof typeof BlendType;
|
||||
pickedFeatureID: number;
|
||||
enableMultiPassRenderer: boolean;
|
||||
passes: Array<string | [string, { [key: string]: unknown }]>;
|
||||
|
|
@ -198,10 +221,13 @@ export interface ILayerConfig {
|
|||
* 开启高亮
|
||||
*/
|
||||
enableHighlight: boolean;
|
||||
|
||||
enableSelect: boolean;
|
||||
/**
|
||||
* 高亮颜色
|
||||
*/
|
||||
highlightColor: string | number[];
|
||||
selectColor: string | number[];
|
||||
active: boolean;
|
||||
activeColor: string | number[];
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@ export default class LayerService implements ILayerService {
|
|||
return this.layers;
|
||||
}
|
||||
|
||||
public getLayer(id: string): ILayer | undefined {
|
||||
return this.layers.find((layer) => layer.id === id);
|
||||
public getLayer(name: string): ILayer | undefined {
|
||||
return this.layers.find((layer) => layer.name === name);
|
||||
}
|
||||
|
||||
public remove(layer: ILayer): void {
|
||||
|
|
@ -47,6 +47,7 @@ export default class LayerService implements ILayerService {
|
|||
if (layerIndex > -1) {
|
||||
this.layers.splice(layerIndex, 1);
|
||||
}
|
||||
layer.emit('remove', null);
|
||||
layer.destroy();
|
||||
this.renderLayers();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { ILogService } from './ILogService';
|
|||
|
||||
const Logger = new Log({ id: 'L7' }).enable(true);
|
||||
// // 只输出 debug 级别以上的日志信息
|
||||
Logger.priority = 4;
|
||||
Logger.priority = 5;
|
||||
|
||||
@injectable()
|
||||
export default class LogService implements ILogService {
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ export interface IMapService<RawMap = {}> {
|
|||
panBy(pixel: Point): void;
|
||||
fitBounds(bound: Bounds): void;
|
||||
setZoomAndCenter(zoom: number, center: Point): void;
|
||||
setZoom(zoom: number): void;
|
||||
setMapStyle(style: string): void;
|
||||
|
||||
// coordinates methods
|
||||
|
|
@ -65,11 +66,15 @@ export const MapServiceEvent = ['mapload'];
|
|||
/**
|
||||
* 地图初始化配置项
|
||||
*/
|
||||
export interface IMapConfig {
|
||||
export interface IMapConfig<RawMap = {}> {
|
||||
/**
|
||||
* 地图实例
|
||||
*/
|
||||
mapInstance?: RawMap;
|
||||
/**
|
||||
* 容器 DOM id
|
||||
*/
|
||||
id: string;
|
||||
id: string | HTMLDivElement;
|
||||
|
||||
/**
|
||||
* 地图
|
||||
|
|
|
|||
|
|
@ -3,6 +3,29 @@ import { IAttribute } from './IAttribute';
|
|||
import { IElements } from './IElements';
|
||||
import { IUniform } from './IUniform';
|
||||
|
||||
export interface IBlendOptions {
|
||||
// gl.enable(gl.BLEND)
|
||||
enable: boolean;
|
||||
// gl.blendFunc
|
||||
func: BlendingFunctionSeparate;
|
||||
// gl.blendEquation
|
||||
equation: {
|
||||
rgb:
|
||||
| gl.FUNC_ADD
|
||||
| gl.FUNC_SUBTRACT
|
||||
| gl.FUNC_REVERSE_SUBTRACT
|
||||
| gl.MIN_EXT
|
||||
| gl.MAX_EXT;
|
||||
alpha?:
|
||||
| gl.FUNC_ADD
|
||||
| gl.FUNC_SUBTRACT
|
||||
| gl.FUNC_REVERSE_SUBTRACT
|
||||
| gl.MIN_EXT
|
||||
| gl.MAX_EXT;
|
||||
};
|
||||
// gl.blendColor
|
||||
color: [number, number, number, number];
|
||||
}
|
||||
type stencilOp =
|
||||
| gl.ZERO
|
||||
| gl.KEEP
|
||||
|
|
@ -153,20 +176,7 @@ export interface IModelInitializationOptions {
|
|||
/**
|
||||
* blending
|
||||
*/
|
||||
blend?: Partial<{
|
||||
// gl.enable(gl.BLEND)
|
||||
enable: boolean;
|
||||
// gl.blendFunc
|
||||
func: BlendingFunctionSeparate;
|
||||
// gl.blendEquation
|
||||
equation: {
|
||||
// TODO: EXT_blend_minmax
|
||||
rgb: gl.FUNC_ADD | gl.FUNC_SUBTRACT | gl.FUNC_REVERSE_SUBTRACT;
|
||||
alpha: gl.FUNC_ADD | gl.FUNC_SUBTRACT | gl.FUNC_REVERSE_SUBTRACT;
|
||||
};
|
||||
// gl.blendColor
|
||||
color: [number, number, number, number];
|
||||
}>;
|
||||
blend?: Partial<IBlendOptions>;
|
||||
|
||||
/**
|
||||
* stencil
|
||||
|
|
@ -221,6 +231,8 @@ export interface IModelDrawOptions {
|
|||
[key: string]: IAttribute;
|
||||
};
|
||||
elements?: IElements;
|
||||
|
||||
blend?: IBlendOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -60,6 +60,10 @@ export enum gl {
|
|||
FUNC_SUBTRACT = 0x800a,
|
||||
FUNC_REVERSE_SUBTRACT = 0x800b,
|
||||
|
||||
/** Blend Min Max */
|
||||
MAX_EXT = 0x8008,
|
||||
MIN_EXT = 0x8007,
|
||||
|
||||
/* Separate Blend Functions */
|
||||
BLEND_DST_RGB = 0x80c8,
|
||||
BLEND_SRC_RGB = 0x80c9,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
import { inject, injectable } from 'inversify';
|
||||
import { IRendererService, IShaderModuleService } from '../../../index';
|
||||
import {
|
||||
IMapService,
|
||||
IRendererService,
|
||||
IShaderModuleService,
|
||||
} from '../../../index';
|
||||
import { TYPES } from '../../../types';
|
||||
import { ICameraService } from '../../camera/ICameraService';
|
||||
import { IInteractionService } from '../../interaction/IInteractionService';
|
||||
|
|
@ -17,6 +21,7 @@ export default class BaseNormalPass<InitializationOptions = {}>
|
|||
|
||||
protected rendererService: IRendererService;
|
||||
protected cameraService: ICameraService;
|
||||
protected mapService: IMapService;
|
||||
protected interactionService: IInteractionService;
|
||||
protected layerService: ILayerService;
|
||||
|
||||
|
|
@ -38,6 +43,7 @@ export default class BaseNormalPass<InitializationOptions = {}>
|
|||
this.cameraService = layer
|
||||
.getContainer()
|
||||
.get<ICameraService>(TYPES.ICameraService);
|
||||
this.mapService = layer.getContainer().get<IMapService>(TYPES.IMapService);
|
||||
this.interactionService = layer
|
||||
.getContainer()
|
||||
.get<IInteractionService>(TYPES.IInteractionService);
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
import { decodePickingColor, encodePickingColor } from '@antv/l7-utils';
|
||||
import { inject, injectable } from 'inversify';
|
||||
import { TYPES } from '../../../types';
|
||||
import { InteractionEvent } from '../../interaction/IInteractionService';
|
||||
import {
|
||||
IInteractionTarget,
|
||||
InteractionEvent,
|
||||
} from '../../interaction/IInteractionService';
|
||||
import { ILayer } from '../../layer/ILayerService';
|
||||
import { ILogService } from '../../log/ILogService';
|
||||
import { ILngLat } from '../../map/IMapService';
|
||||
import { gl } from '../gl';
|
||||
import { IFramebuffer } from '../IFramebuffer';
|
||||
import { PassType } from '../IMultiPassRenderer';
|
||||
import BaseNormalPass from './BaseNormalPass';
|
||||
|
||||
function decodePickingColor(color: Uint8Array): number {
|
||||
const [i1, i2, i3] = color;
|
||||
// 1 was added to seperate from no selection
|
||||
const index = i1 + i2 * 256 + i3 * 65536 - 1;
|
||||
return index;
|
||||
}
|
||||
|
||||
/**
|
||||
* color-based PixelPickingPass
|
||||
* @see https://github.com/antvis/L7/blob/next/dev-docs/PixelPickingEngine.md
|
||||
|
|
@ -66,6 +64,14 @@ export default class PixelPickingPass<
|
|||
|
||||
// 监听 hover 事件
|
||||
this.interactionService.on(InteractionEvent.Hover, this.pickFromPickingFBO);
|
||||
this.interactionService.on(
|
||||
InteractionEvent.Select,
|
||||
this.selectFeatureHander.bind(this),
|
||||
);
|
||||
this.interactionService.on(
|
||||
InteractionEvent.Active,
|
||||
this.highlightFeatureHander.bind(this),
|
||||
);
|
||||
}
|
||||
|
||||
public render(layer: ILayer) {
|
||||
|
|
@ -112,15 +118,7 @@ export default class PixelPickingPass<
|
|||
* 拾取视口指定坐标属于的要素
|
||||
* TODO：支持区域拾取
|
||||
*/
|
||||
private pickFromPickingFBO = ({
|
||||
x,
|
||||
y,
|
||||
type,
|
||||
}: {
|
||||
x: number;
|
||||
y: number;
|
||||
type: string;
|
||||
}) => {
|
||||
private pickFromPickingFBO = ({ x, y, lngLat, type }: IInteractionTarget) => {
|
||||
if (!this.layer.isVisible()) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -130,7 +128,7 @@ export default class PixelPickingPass<
|
|||
useFramebuffer,
|
||||
} = this.rendererService;
|
||||
const { width, height } = getViewportSize();
|
||||
const { enableHighlight } = this.layer.getLayerConfig();
|
||||
const { enableHighlight, enableSelect } = this.layer.getLayerConfig();
|
||||
|
||||
const xInDevicePixel = x * window.devicePixelRatio;
|
||||
const yInDevicePixel = y * window.devicePixelRatio;
|
||||
|
|
@ -142,7 +140,6 @@ export default class PixelPickingPass<
|
|||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
let pickedColors: Uint8Array | undefined;
|
||||
useFramebuffer(this.pickingFBO, () => {
|
||||
// avoid realloc
|
||||
|
|
@ -166,54 +163,63 @@ export default class PixelPickingPass<
|
|||
const rawFeature = this.layer
|
||||
.getSource()
|
||||
.getFeatureById(pickedFeatureIdx);
|
||||
|
||||
const target = {
|
||||
x,
|
||||
y,
|
||||
type,
|
||||
lngLat,
|
||||
featureId: pickedFeatureIdx,
|
||||
feature: rawFeature,
|
||||
};
|
||||
if (!rawFeature) {
|
||||
// this.logger.error(
|
||||
// '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
|
||||
// );
|
||||
} else {
|
||||
// trigger onHover/Click callback on layer
|
||||
this.triggerHoverOnLayer({ x, y, type, feature: rawFeature });
|
||||
this.layer.setCurrentPickId(pickedFeatureIdx);
|
||||
this.triggerHoverOnLayer(target);
|
||||
}
|
||||
} else {
|
||||
const target = {
|
||||
x,
|
||||
y,
|
||||
lngLat,
|
||||
type:
|
||||
this.layer.getCurrentPickId() === null ? 'un' + type : 'mouseout',
|
||||
featureId: null,
|
||||
feature: null,
|
||||
};
|
||||
this.triggerHoverOnLayer({
|
||||
...target,
|
||||
type: 'unpick',
|
||||
});
|
||||
this.triggerHoverOnLayer(target);
|
||||
this.layer.setCurrentPickId(null);
|
||||
}
|
||||
});
|
||||
|
||||
if (enableHighlight) {
|
||||
this.highlightPickedFeature(pickedColors);
|
||||
}
|
||||
if (
|
||||
enableSelect &&
|
||||
type === 'click' &&
|
||||
pickedColors?.toString() !== [0, 0, 0, 0].toString()
|
||||
) {
|
||||
this.selectFeature(pickedColors);
|
||||
}
|
||||
};
|
||||
|
||||
private triggerHoverOnLayer({
|
||||
x,
|
||||
y,
|
||||
type,
|
||||
feature,
|
||||
}: {
|
||||
private triggerHoverOnLayer(target: {
|
||||
x: number;
|
||||
y: number;
|
||||
type: string;
|
||||
lngLat: ILngLat;
|
||||
feature: unknown;
|
||||
featureId: number | null;
|
||||
}) {
|
||||
const { onHover, onClick } = this.layer.getLayerConfig();
|
||||
// if (onHover) {
|
||||
// onHover({
|
||||
// x,
|
||||
// y,
|
||||
// feature,
|
||||
// });
|
||||
// }
|
||||
// if (onClick) {
|
||||
// onClick({
|
||||
// x,
|
||||
// y,
|
||||
// feature,
|
||||
// });
|
||||
// }
|
||||
this.layer.emit(type, {
|
||||
x,
|
||||
y,
|
||||
feature,
|
||||
});
|
||||
this.layer.emit(target.type, target);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -232,7 +238,6 @@ export default class PixelPickingPass<
|
|||
private highlightPickedFeature(pickedColors: Uint8Array | undefined) {
|
||||
const [r, g, b] = pickedColors;
|
||||
const { clear, useFramebuffer } = this.rendererService;
|
||||
|
||||
// 先输出到 PostProcessor
|
||||
const readFBO = this.layer.multiPassRenderer
|
||||
.getPostProcessor()
|
||||
|
|
@ -257,4 +262,43 @@ export default class PixelPickingPass<
|
|||
});
|
||||
this.layer.multiPassRenderer.getPostProcessor().render(this.layer);
|
||||
}
|
||||
|
||||
private selectFeature(pickedColors: Uint8Array | undefined) {
|
||||
const [r, g, b] = pickedColors;
|
||||
const { clear, useFramebuffer } = this.rendererService;
|
||||
|
||||
// 先输出到 PostProcessor
|
||||
const readFBO = this.layer.multiPassRenderer
|
||||
.getPostProcessor()
|
||||
.getReadFBO();
|
||||
this.layer.hooks.beforeRender.call();
|
||||
useFramebuffer(readFBO, () => {
|
||||
clear({
|
||||
color: [0, 0, 0, 0],
|
||||
depth: 1,
|
||||
stencil: 0,
|
||||
framebuffer: readFBO,
|
||||
});
|
||||
|
||||
// TODO: highlight pass 需要 multipass
|
||||
const originRenderFlag = this.layer.multiPassRenderer.getRenderFlag();
|
||||
this.layer.multiPassRenderer.setRenderFlag(false);
|
||||
this.layer.hooks.beforeSelect.call([r, g, b]);
|
||||
this.layer.render();
|
||||
this.layer.hooks.afterSelect.call();
|
||||
this.layer.hooks.afterRender.call();
|
||||
this.layer.multiPassRenderer.setRenderFlag(originRenderFlag);
|
||||
});
|
||||
this.layer.multiPassRenderer.getPostProcessor().render(this.layer);
|
||||
}
|
||||
|
||||
private selectFeatureHander({ featureId }: Partial<IInteractionTarget>) {
|
||||
const pickedColors = encodePickingColor(featureId as number);
|
||||
this.selectFeature(new Uint8Array(pickedColors));
|
||||
}
|
||||
|
||||
private highlightFeatureHander({ featureId }: Partial<IInteractionTarget>) {
|
||||
const pickedColors = encodePickingColor(featureId as number);
|
||||
this.highlightPickedFeature(new Uint8Array(pickedColors));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ export interface ISceneService {
|
|||
init(config: IMapConfig & IRenderConfig): void;
|
||||
addLayer(layer: ILayer): void;
|
||||
render(): void;
|
||||
getSceneContainer(): HTMLDivElement;
|
||||
destroy(): void;
|
||||
}
|
||||
// scene 事件
|
||||
|
|
|
|||
|
|
@ -170,6 +170,8 @@ export default class Scene extends EventEmitter implements ISceneService {
|
|||
this.initPromise = this.hooks.init.promise(
|
||||
this.configService.getSceneConfig(this.id),
|
||||
);
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
public addLayer(layer: ILayer) {
|
||||
|
|
@ -184,7 +186,6 @@ export default class Scene extends EventEmitter implements ISceneService {
|
|||
}
|
||||
|
||||
this.rendering = true;
|
||||
|
||||
// 首次初始化，或者地图的容器被强制销毁的需要重新初始化
|
||||
if (!this.inited) {
|
||||
// 还未初始化完成需要等待
|
||||
|
|
@ -207,6 +208,10 @@ export default class Scene extends EventEmitter implements ISceneService {
|
|||
this.rendering = false;
|
||||
}
|
||||
|
||||
public getSceneContainer(): HTMLDivElement {
|
||||
return this.$container as HTMLDivElement;
|
||||
}
|
||||
|
||||
public destroy() {
|
||||
this.emit('destroy');
|
||||
this.inited = false;
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ export interface ISource {
|
|||
clusterOptions: Partial<IClusterOptions>;
|
||||
updateClusterData(zoom: number): void;
|
||||
getFeatureById(id: number): unknown;
|
||||
getClusters(zoom: number): any;
|
||||
getClustersLeaves(id: number): any;
|
||||
}
|
||||
export interface IRasterCfg {
|
||||
extent: [number, number, number, number];
|
||||
|
|
|
|||
|
|
@ -3,6 +3,17 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [2.0.0-beta.20](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.20) (2019-12-12)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [2.0.0-beta.19](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.19) (2019-12-08)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "2.0.0-beta.19",
|
||||
"version": "2.0.0-beta.20",
|
||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,11 +24,11 @@
|
|||
"author": "antv",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.0.0-beta.19",
|
||||
"@antv/l7-core": "^2.0.0-beta.19",
|
||||
"@antv/l7-layers": "^2.0.0-beta.19",
|
||||
"@antv/l7-maps": "^2.0.0-beta.19",
|
||||
"@antv/l7-scene": "^2.0.0-beta.19"
|
||||
"@antv/l7-component": "^2.0.0-beta.20",
|
||||
"@antv/l7-core": "^2.0.0-beta.20",
|
||||
"@antv/l7-layers": "^2.0.0-beta.20",
|
||||
"@antv/l7-maps": "^2.0.0-beta.20",
|
||||
"@antv/l7-scene": "^2.0.0-beta.20"
|
||||
},
|
||||
"gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,23 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [2.0.0-beta.20](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.20) (2019-12-12)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||
* **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [2.0.0-beta.19](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.19) (2019-12-08)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-layers",
|
||||
"version": "2.0.0-beta.19",
|
||||
"version": "2.0.0-beta.20",
|
||||
"description": "L7's collection of built-in layers",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.0-beta.19",
|
||||
"@antv/l7-source": "^2.0.0-beta.19",
|
||||
"@antv/l7-utils": "^2.0.0-beta.19",
|
||||
"@antv/l7-core": "^2.0.0-beta.20",
|
||||
"@antv/l7-source": "^2.0.0-beta.20",
|
||||
"@antv/l7-utils": "^2.0.0-beta.20",
|
||||
"@mapbox/martini": "^0.1.0",
|
||||
"@turf/meta": "^6.0.2",
|
||||
"@types/d3-color": "^1.2.2",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {
|
||||
BlendType,
|
||||
gl,
|
||||
IActiveOption,
|
||||
IAnimateOption,
|
||||
|
|
@ -37,7 +38,6 @@ import {
|
|||
TYPES,
|
||||
} from '@antv/l7-core';
|
||||
import Source from '@antv/l7-source';
|
||||
import { bindAll } from '@antv/l7-utils';
|
||||
import { EventEmitter } from 'eventemitter3';
|
||||
import { Container } from 'inversify';
|
||||
import { isFunction, isObject } from 'lodash';
|
||||
|
|
@ -45,6 +45,7 @@ import { isFunction, isObject } from 'lodash';
|
|||
import mergeJsonSchemas from 'merge-json-schemas';
|
||||
import { SyncBailHook, SyncHook, SyncWaterfallHook } from 'tapable';
|
||||
import { normalizePasses } from '../plugins/MultiPassRendererPlugin';
|
||||
import { BlendTypes } from '../utils/blend';
|
||||
import baseLayerSchema from './schema';
|
||||
/**
|
||||
* 分配 layer id
|
||||
|
|
@ -55,6 +56,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
implements ILayer {
|
||||
public id: string = `${layerIdCounter++}`;
|
||||
public name: string;
|
||||
public type: string;
|
||||
public visible: boolean = true;
|
||||
public zIndex: number = 0;
|
||||
public minZoom: number;
|
||||
|
|
@ -81,6 +83,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
afterPickingEncode: new SyncHook<void>(),
|
||||
beforeHighlight: new SyncHook<[number[]]>(['pickedColor']),
|
||||
afterHighlight: new SyncHook<void>(),
|
||||
beforeSelect: new SyncHook<[number[]]>(['pickedColor']),
|
||||
afterSelect: new SyncHook<void>(),
|
||||
beforeDestroy: new SyncHook<void>(),
|
||||
afterDestroy: new SyncHook<void>(),
|
||||
};
|
||||
|
|
@ -142,6 +146,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
|
||||
private configSchema: object;
|
||||
|
||||
private currentPickId: number | null = null;
|
||||
|
||||
private rawConfig: Partial<ILayerConfig & ChildLayerStyleOptions>;
|
||||
|
||||
private needUpdateConfig: Partial<ILayerConfig & ChildLayerStyleOptions>;
|
||||
|
|
@ -159,8 +165,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
|
||||
private scaleOptions: IScaleOptions = {};
|
||||
|
||||
constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions>) {
|
||||
constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
|
||||
super();
|
||||
this.name = config.name || this.id;
|
||||
this.rawConfig = config;
|
||||
}
|
||||
|
||||
|
|
@ -295,6 +302,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
this.buildModels();
|
||||
// 触发初始化完成事件;
|
||||
this.emit('inited');
|
||||
this.emit('added');
|
||||
return this;
|
||||
}
|
||||
|
||||
|
|
@ -437,12 +445,17 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
}
|
||||
|
||||
public active(options: IActiveOption) {
|
||||
this.updateLayerConfig({
|
||||
enableHighlight: isObject(options) ? true : options,
|
||||
highlightColor: isObject(options)
|
||||
? options.color
|
||||
: this.getLayerConfig().highlightColor,
|
||||
});
|
||||
const activeOption: Partial<ILayerConfig> = {};
|
||||
activeOption.enableHighlight = isObject(options) ? true : options;
|
||||
if (isObject(options)) {
|
||||
activeOption.enableHighlight = true;
|
||||
if (options.color) {
|
||||
activeOption.highlightColor = options.color;
|
||||
}
|
||||
} else {
|
||||
activeOption.enableHighlight = !!options;
|
||||
}
|
||||
this.updateLayerConfig(activeOption);
|
||||
return this;
|
||||
}
|
||||
public setActive(
|
||||
|
|
@ -464,10 +477,22 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
? options.color
|
||||
: this.getLayerConfig().highlightColor,
|
||||
});
|
||||
this.interactionService.triggerActive(id);
|
||||
}
|
||||
}
|
||||
|
||||
public select(option: IActiveOption | false): ILayer {
|
||||
const activeOption: Partial<ILayerConfig> = {};
|
||||
activeOption.enableSelect = isObject(option) ? true : option;
|
||||
if (isObject(option)) {
|
||||
activeOption.enableSelect = true;
|
||||
if (option.color) {
|
||||
activeOption.selectColor = option.color;
|
||||
}
|
||||
} else {
|
||||
activeOption.enableHighlight = !!option;
|
||||
}
|
||||
this.updateLayerConfig(activeOption);
|
||||
return this;
|
||||
}
|
||||
|
||||
|
|
@ -475,12 +500,36 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
id: number | { x: number; y: number },
|
||||
options?: IActiveOption,
|
||||
): void {
|
||||
throw new Error('Method not implemented.');
|
||||
if (isObject(id)) {
|
||||
const { x = 0, y = 0 } = id;
|
||||
this.updateLayerConfig({
|
||||
selectColor: isObject(options)
|
||||
? options.color
|
||||
: this.getLayerConfig().selectColor,
|
||||
});
|
||||
this.pick({ x, y });
|
||||
} else {
|
||||
this.updateLayerConfig({
|
||||
pickedFeatureID: id,
|
||||
selectColor: isObject(options)
|
||||
? options.color
|
||||
: this.getLayerConfig().selectColor,
|
||||
});
|
||||
this.interactionService.triggerSelect(id);
|
||||
}
|
||||
}
|
||||
public setBlend(type: keyof typeof BlendType): void {
|
||||
this.updateLayerConfig({
|
||||
blend: type,
|
||||
});
|
||||
this.layerModelNeedUpdate = true;
|
||||
this.render();
|
||||
}
|
||||
public show(): ILayer {
|
||||
this.updateLayerConfig({
|
||||
visible: true,
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
|
|
@ -497,6 +546,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
return this;
|
||||
}
|
||||
|
||||
public setCurrentPickId(id: number) {
|
||||
this.currentPickId = id;
|
||||
}
|
||||
|
||||
public getCurrentPickId(): number | null {
|
||||
return this.currentPickId;
|
||||
}
|
||||
public isVisible(): boolean {
|
||||
const zoom = this.mapService.getZoom();
|
||||
|
||||
|
|
@ -641,15 +697,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
fs,
|
||||
vs,
|
||||
elements,
|
||||
blend: {
|
||||
enable: true,
|
||||
func: {
|
||||
srcRGB: gl.SRC_ALPHA,
|
||||
srcAlpha: 1,
|
||||
dstRGB: gl.ONE_MINUS_SRC_ALPHA,
|
||||
dstAlpha: 1,
|
||||
},
|
||||
},
|
||||
blend: BlendTypes[BlendType.normal],
|
||||
...rest,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import {
|
||||
BlendType,
|
||||
IAttribute,
|
||||
IBlendOptions,
|
||||
ICameraService,
|
||||
IElements,
|
||||
IFontService,
|
||||
|
|
@ -17,7 +19,7 @@ import {
|
|||
Triangulation,
|
||||
TYPES,
|
||||
} from '@antv/l7-core';
|
||||
|
||||
import { BlendTypes } from '../utils/blend';
|
||||
export default class BaseModel implements ILayerModel {
|
||||
public triangulation: Triangulation;
|
||||
|
||||
|
|
@ -54,7 +56,10 @@ export default class BaseModel implements ILayerModel {
|
|||
.get<ICameraService>(TYPES.ICameraService);
|
||||
this.registerBuiltinAttributes();
|
||||
}
|
||||
|
||||
public getBlend(): IBlendOptions {
|
||||
const { blend = 'normal' } = this.layer.getLayerConfig();
|
||||
return BlendTypes[BlendType[blend]] as IBlendOptions;
|
||||
}
|
||||
public getUninforms(): IModelUniform {
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ interface IPointLayerStyleOptions {
|
|||
opacity: number;
|
||||
}
|
||||
export default class HeatMapLayer extends BaseLayer<IPointLayerStyleOptions> {
|
||||
public name: string = 'HeatMapLayer';
|
||||
public type: string = 'HeatMapLayer';
|
||||
protected getConfigSchema() {
|
||||
return {
|
||||
properties: {
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ import {
|
|||
IModelUniform,
|
||||
ITexture2D,
|
||||
} from '@antv/l7-core';
|
||||
import { generateColorRamp, IColorRamp } from '@antv/l7-utils';
|
||||
import { mat4 } from 'gl-matrix';
|
||||
import BaseModel from '../../core/BaseModel';
|
||||
import { HeatmapTriangulation } from '../../core/triangulation';
|
||||
import { generateColorRamp, IColorRamp } from '../../utils/color';
|
||||
import heatmap3DFrag from '../shaders/heatmap_3d_frag.glsl';
|
||||
import heatmap3DVert from '../shaders/heatmap_3d_vert.glsl';
|
||||
import heatmapColorFrag from '../shaders/heatmap_frag.glsl';
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ interface IDashLineLayerStyleOptions {
|
|||
export default class DashLineLayer extends BaseLayer<
|
||||
IDashLineLayerStyleOptions
|
||||
> {
|
||||
public name: string = 'LineLayer';
|
||||
public type: string = 'LineLayer';
|
||||
|
||||
protected getConfigSchema() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ interface IPointLayerStyleOptions {
|
|||
opacity: number;
|
||||
}
|
||||
export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
|
||||
public name: string = 'LineLayer';
|
||||
public type: string = 'LineLayer';
|
||||
|
||||
private animateStartTime: number = 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ import {
|
|||
IStyleAttributeService,
|
||||
TYPES,
|
||||
} from '@antv/l7-core';
|
||||
import { rgb2arr } from '@antv/l7-utils';
|
||||
import { inject, injectable } from 'inversify';
|
||||
import { rgb2arr } from '../utils/color';
|
||||
|
||||
@injectable()
|
||||
export default class DataMappingPlugin implements ILayerPlugin {
|
||||
|
|
|
|||
|
|
@ -10,19 +10,24 @@ export default class DataSourcePlugin implements ILayerPlugin {
|
|||
layer.hooks.init.tap('DataSourcePlugin', () => {
|
||||
const { data, options } = layer.sourceOption;
|
||||
layer.setSource(new Source(data, options));
|
||||
this.updateClusterData(layer);
|
||||
});
|
||||
|
||||
// 检测数据是不否需要更新
|
||||
layer.hooks.beforeRenderData.tap('DataSourcePlugin', (flag) => {
|
||||
const source = layer.getSource();
|
||||
const cluster = source.cluster;
|
||||
const { zoom = 0, maxZoom = 16 } = source.clusterOptions;
|
||||
const newZoom = this.mapService.getZoom();
|
||||
if (cluster && Math.abs(zoom - newZoom) > 1 && maxZoom > zoom) {
|
||||
source.updateClusterData(Math.floor(newZoom) + 1);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
return this.updateClusterData(layer);
|
||||
});
|
||||
}
|
||||
|
||||
private updateClusterData(layer: ILayer): boolean {
|
||||
const source = layer.getSource();
|
||||
const cluster = source.cluster;
|
||||
const { zoom = 0, maxZoom = 16 } = source.clusterOptions;
|
||||
const newZoom = this.mapService.getZoom() - 1;
|
||||
if (cluster && Math.abs(zoom - newZoom) > 1 && maxZoom > zoom) {
|
||||
source.updateClusterData(Math.floor(newZoom));
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { ILayer, ILayerPlugin, IMapService, TYPES } from '@antv/l7-core';
|
||||
import Source from '@antv/l7-source';
|
||||
import { encodePickingColor, rgb2arr } from '@antv/l7-utils';
|
||||
import { injectable } from 'inversify';
|
||||
import { encodePickingColor, rgb2arr } from '../utils/color';
|
||||
@injectable()
|
||||
export default class LayerStylePlugin implements ILayerPlugin {
|
||||
public apply(layer: ILayer) {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import {
|
|||
IRendererService,
|
||||
IStyleAttributeService,
|
||||
} from '@antv/l7-core';
|
||||
import { encodePickingColor, rgb2arr } from '@antv/l7-utils';
|
||||
import { injectable } from 'inversify';
|
||||
import { encodePickingColor, rgb2arr } from '../utils/color';
|
||||
|
||||
const PickingStage = {
|
||||
NONE: 0.0,
|
||||
|
|
@ -95,6 +95,24 @@ export default class PixelPickingPlugin implements ILayerPlugin {
|
|||
);
|
||||
},
|
||||
);
|
||||
|
||||
layer.hooks.beforeSelect.tap(
|
||||
'PixelPickingPlugin',
|
||||
(pickedColor: number[]) => {
|
||||
const { selectColor } = layer.getLayerConfig();
|
||||
const highlightColorInArray =
|
||||
typeof selectColor === 'string'
|
||||
? rgb2arr(selectColor)
|
||||
: selectColor || [1, 0, 0, 1];
|
||||
layer.models.forEach((model) =>
|
||||
model.addUniforms({
|
||||
u_PickingStage: PickingStage.HIGHLIGHT,
|
||||
u_PickingColor: pickedColor,
|
||||
u_HighlightColor: highlightColorInArray.map((c) => c * 255),
|
||||
}),
|
||||
);
|
||||
},
|
||||
);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ interface IPointLayerStyleOptions {
|
|||
strokeColor: string;
|
||||
}
|
||||
export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
|
||||
public name: string = 'PointLayer';
|
||||
public type: string = 'PointLayer';
|
||||
protected getConfigSchema() {
|
||||
return {
|
||||
properties: {
|
||||
|
|
@ -51,6 +51,9 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
|
|||
return 'normal';
|
||||
} else {
|
||||
const shape = item.shape;
|
||||
if (shape === 'dot') {
|
||||
return 'normal';
|
||||
}
|
||||
if (shape2d?.indexOf(shape as string) !== -1) {
|
||||
return 'fill';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ import {
|
|||
IModel,
|
||||
IModelUniform,
|
||||
} from '@antv/l7-core';
|
||||
import { rgb2arr } from '@antv/l7-utils';
|
||||
import BaseModel from '../../core/BaseModel';
|
||||
import { PointFillTriangulation } from '../../core/triangulation';
|
||||
import { rgb2arr } from '../../utils/color';
|
||||
import pointFillFrag from '../shaders/fill_frag.glsl';
|
||||
import pointFillVert from '../shaders/fill_vert.glsl';
|
||||
interface IPointLayerStyleOptions {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
import {
|
||||
AttributeType,
|
||||
BlendType,
|
||||
gl,
|
||||
IEncodeFeature,
|
||||
IModel,
|
||||
IModelUniform,
|
||||
} from '@antv/l7-core';
|
||||
|
||||
import { rgb2arr } from '@antv/l7-utils';
|
||||
import BaseModel from '../../core/BaseModel';
|
||||
import { rgb2arr } from '../../utils/color';
|
||||
import { BlendTypes } from '../../utils/blend';
|
||||
import normalFrag from '../shaders/normal_frag.glsl';
|
||||
import normalVert from '../shaders/normal_vert.glsl';
|
||||
|
||||
interface IPointLayerStyleOptions {
|
||||
opacity: number;
|
||||
strokeWidth: number;
|
||||
|
|
@ -38,7 +39,6 @@ export default class NormalModel extends BaseModel {
|
|||
u_stroke_color: rgb2arr(strokeColor),
|
||||
};
|
||||
}
|
||||
|
||||
public buildModels(): IModel[] {
|
||||
return [
|
||||
this.layer.buildLayerModel({
|
||||
|
|
@ -48,15 +48,7 @@ export default class NormalModel extends BaseModel {
|
|||
triangulation: PointTriangulation,
|
||||
depth: { enable: false },
|
||||
primitive: gl.POINTS,
|
||||
blend: {
|
||||
enable: true,
|
||||
func: {
|
||||
srcRGB: gl.ONE,
|
||||
srcAlpha: 1,
|
||||
dstRGB: gl.ONE,
|
||||
dstAlpha: 1,
|
||||
},
|
||||
},
|
||||
blend: this.getBlend(),
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export function PointTriangulation(feature: IEncodeFeature) {
|
|||
};
|
||||
}
|
||||
export default class TextLayer extends BaseLayer<IPointTextLayerStyleOptions> {
|
||||
public name: string = 'PointLayer';
|
||||
public type: string = 'PointLayer';
|
||||
|
||||
protected getConfigSchema() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ interface IPolygonLayerStyleOptions {
|
|||
}
|
||||
|
||||
export default class PolygonLayer extends BaseLayer<IPolygonLayerStyleOptions> {
|
||||
public name: string = 'PolygonLayer';
|
||||
public type: string = 'PolygonLayer';
|
||||
|
||||
protected getConfigSchema() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ interface IPointLayerStyleOptions {
|
|||
}
|
||||
|
||||
export default class ImageLayer extends BaseLayer<IPointLayerStyleOptions> {
|
||||
public name: string = 'ImageLayer';
|
||||
public type: string = 'ImageLayer';
|
||||
protected texture: ITexture2D;
|
||||
|
||||
protected getConfigSchema() {
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import {
|
|||
lazyInject,
|
||||
TYPES,
|
||||
} from '@antv/l7-core';
|
||||
import { generateColorRamp, IColorRamp } from '@antv/l7-utils';
|
||||
import BaseLayer from '../core/BaseLayer';
|
||||
import { generateColorRamp, IColorRamp } from '../utils/color';
|
||||
import { RasterTriangulation } from './buffers/triangulation';
|
||||
import rasterFrag from './shaders/raster_frag.glsl';
|
||||
import rasterVert from './shaders/raster_vert.glsl';
|
||||
|
|
@ -26,7 +26,7 @@ interface IRasterLayerStyleOptions {
|
|||
}
|
||||
|
||||
export default class RasterLayer extends BaseLayer<IRasterLayerStyleOptions> {
|
||||
public name: string = 'e';
|
||||
public type: string = 'RasterLayer';
|
||||
protected texture: ITexture2D;
|
||||
protected colorTexture: ITexture2D;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { AttributeType, gl, IEncodeFeature, ITexture2D } from '@antv/l7-core';
|
||||
import { generateColorRamp, IColorRamp } from '@antv/l7-utils';
|
||||
import BaseLayer from '../core/BaseLayer';
|
||||
import { RasterImageTriangulation } from '../core/triangulation';
|
||||
import { generateColorRamp, IColorRamp } from '../utils/color';
|
||||
import rasterImageFrag from './shaders/raster_2d_frag.glsl';
|
||||
import rasterImageVert from './shaders/raster_2d_vert.glsl';
|
||||
interface IRasterLayerStyleOptions {
|
||||
|
|
@ -12,7 +12,7 @@ interface IRasterLayerStyleOptions {
|
|||
}
|
||||
|
||||
export default class Raster2dLayer extends BaseLayer<IRasterLayerStyleOptions> {
|
||||
public name: string = 'RasterLayer';
|
||||
public type: string = 'RasterLayer';
|
||||
protected texture: ITexture2D;
|
||||
protected colorTexture: ITexture2D;
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue