Merge pull request #126 from antvis/layer

Layer

.storybook/addons.ts

@@ -1,3 +1,3 @@
 // import '@storybook/addon-actions/register';
-import '@storybook/addon-notes/register';
+// import '@storybook/addon-notes/register';
-import '@storybook/addon-storysource/register';
+// import '@storybook/addon-storysource/register';

.storybook/config.ts

@@ -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: /\./,

.storybook/webpack.config.js

@@ -20,12 +20,12 @@ module.exports = ({ config }) => {
 
   config.module.rules.push({
     test: /\.stories\.tsx?$/,
-    loaders: [
+    // loaders: [
-      {
+    //   {
-        loader: require.resolve('@storybook/addon-storysource/loader'),
+    //     loader: require.resolve('@storybook/addon-storysource/loader'),
-        options: { parser: 'typescript' },
+    //     options: { parser: 'typescript' },
-      },
+    //   },
-    ],
+    // ],
     enforce: 'pre',
   },{
     test: /\.stories\.css?$/,

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

docs/api/l7.en.md

@@ -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,9 +32,9 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 
 🌏 简单灵活的数据接入
 
-支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
+支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
 
- 🌏 多地图底图支持，支持离线内网部署
+🌏 多地图底图支持，支持离线内网部署
 
 高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
 
@@ -44,24 +42,24 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 
 ### 点图层
 
- - 气泡图
+- 气泡图
- - 散点图
+- 散点图
- - 符号地图
+- 符号地图
- - 3D柱状地图
+- 3D 柱状地图
- - 聚合地图
+- 聚合地图
- - 复合图表地图
+- 复合图表地图
- - 自定义Marker
+- 自定义 Marker
 
 ### 线图层
 
 - 路径地图
-- 弧线，支持2D弧线、3D弧线以及大圆航线
+- 弧线，支持 2D 弧线、3D 弧线以及大圆航线
 - 等值线
 
 ### 面图层
 
 - 填充图
-- 3D填充图
+- 3D 填充图
 
 ### 热力图
 
@@ -70,6 +68,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 - 网格热力图
 
 ### 栅格地图
+
 - 图片
 - Raster
 
@@ -77,5 +76,4 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 
 ![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
 
-
 更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

docs/api/l7.zh.md

@@ -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,9 +34,9 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 
 🌏 简单灵活的数据接入
 
-支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
+支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
 
- 🌏 多地图底图支持，支持离线内网部署
+🌏 多地图底图支持，支持离线内网部署
 
 高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
 
@@ -45,24 +44,24 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 
 ### 点图层
 
- - 气泡图
+- 气泡图
- - 散点图
+- 散点图
- - 符号地图
+- 符号地图
- - 3D柱状地图
+- 3D 柱状地图
- - 聚合地图
+- 聚合地图
- - 复合图表地图
+- 复合图表地图
- - 自定义Marker
+- 自定义 Marker
 
 ### 线图层
 
 - 路径地图
-- 弧线，支持2D弧线、3D弧线以及大圆航线
+- 弧线，支持 2D 弧线、3D 弧线以及大圆航线
 - 等值线
 
 ### 面图层
 
 - 填充图
-- 3D填充图
+- 3D 填充图
 
 ### 热力图
 
@@ -71,6 +70,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 - 网格热力图
 
 ### 栅格地图
+
 - 图片
 - Raster
 
@@ -78,11 +78,10 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 
 ![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
 
-
 更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
 
 ### 技术支持服务群
+
 L7 相关技术问题，需求反馈，我们会及时响应
 
-
 ![地理空间可视化L7支持群](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ePmsRbK4lZgAAAAAAAAAAABkARQnAQ)

docs/api/l7stable.en.md

@@ -3,11 +3,9 @@ title: 1.x stable
 order: 1
 ---
 
-
-
 ## 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 版本最新版本为 ![L7 1.x 版本](https://badgen.net/npm/v/@antv/l7)
 
@@ -19,7 +17,8 @@ order: 1
 
 ### npm 安装使用
 
-会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本
+会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本
+
 ```
 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 版的所有功能.

docs/api/l7stable.zh.md

@@ -3,11 +3,9 @@ title: 1.x 稳定版
 order: 1
 ---
 
-
-
 ## 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 版本最新版本为 ![L7 1.x 版本](https://badgen.net/npm/v/@antv/l7)
 
@@ -19,7 +17,8 @@ order: 1
 
 ### npm 安装使用
 
-会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本
+会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本
+
 ```
 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 版的所有功能.

docs/api/layer/heatmap_layer/grid.zh.md

@@ -0,0 +1,4 @@
+---
+title: 网格热力图
+order: 1
+---

docs/api/layer/heatmap_layer/heatmap.en.md

@@ -1,6 +1,6 @@
 ---
 title: HeatmapLayer
-order: 5
+order: 0
 ---
 
 # heatmapLayer

docs/api/layer/heatmap_layer/heatmap.zh.md

@@ -1,6 +1,6 @@
 ---
 title: HeatmapLayer
-order: 5
+order: 0
 ---
 
 # heatmapLayer

docs/api/layer/heatmap_layer/hexagon.zh.md

@@ -0,0 +1,4 @@
+---
+title: 蜂窝热力图
+order: 1
+---

docs/api/layer/heatmap_layer/normal.zh.md

@@ -0,0 +1,4 @@
+---
+title: 经典热力图
+order: 1
+---

docs/api/layer/layer.zh.md

@@ -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
+- normal 正常效果 默认
-layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
+- additive 叠加模式
-layer.on('dblclick', (ev) => {}); // 鼠标左键双击图层事件
+- subtractive 相减模式
-layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
+- max 最大值
-layer.on('mouseover', (ev) => {}); // 鼠标移入图层要素内时触发
-layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
-layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
-layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
-layer.on('mouseleave', (ev) => {}); // 鼠标离开图层要素
-layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
-```
 
-## 方法
+# 方法
 
 ### source
 
@@ -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
+
+图层移除时触发

docs/api/layer/line_layer/arc.zh.md

@@ -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,
+      });
+```

docs/api/layer/line_layer/linelayer.zh.md

@@ -1,6 +1,6 @@
 ---
 title: LineLayer
-order: 2
+order: 0
 ---
 
 ## 线图层

docs/api/layer/line_layer/path.zh.md

@@ -0,0 +1,24 @@
+---
+title: 路径图
+order: 1
+---
+用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
+
+## 使用
+
+### shape
+shape 设置成line即可绘制路线图
+- line 
+
+### size
+路径图线的size支持两个维度
+
+- width 宽度
+- height 高度
+
+```javascript
+ layer.size([2,10]) // 绘制宽度为2，高度为10的路径
+ 
+ layer.size('',[])
+```
+

docs/api/layer/point_layer/bubble.en.md

@@ -0,0 +1,4 @@
+---
+title: bubble
+order: 1
+---

docs/api/layer/point_layer/bubble.zh.md

@@ -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, 默认于气泡的填充色相同
+
+

docs/api/layer/point_layer/chart.en.md

@@ -0,0 +1,5 @@
+---
+title: 复合图表地图
+order: 6
+---
+使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

docs/api/layer/point_layer/chart.zh.md

@@ -0,0 +1,5 @@
+---
+title: 复合图表地图
+order: 6
+---
+使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

docs/api/layer/point_layer/cluster.en.md

@@ -0,0 +1,9 @@
+---
+title: 聚合图
+order: 5
+---
+
+
+##使用
+
+目前只有点图层支持聚类方法

docs/api/layer/point_layer/cluster.zh.md

@@ -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,
+        });
+```
+
+
+

docs/api/layer/point_layer/column.zh.md

@@ -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
+      });
+```

docs/api/layer/point_layer/dot.en.md

@@ -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)

docs/api/layer/point_layer/dot.zh.md

@@ -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)

docs/api/layer/point_layer/marker.en.md

@@ -0,0 +1,9 @@
+---
+title: 自定义 Marker
+order: 7
+---
+可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
+
+## 使用
+
+[Marker 文档](../../component)

docs/api/layer/point_layer/marker.zh.md

@@ -0,0 +1,9 @@
+---
+title: 自定义 Marker
+order: 7
+---
+可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
+
+## 使用
+
+[Marker 文档](../../component)

docs/api/layer/point_layer/pointlayer.en.md

@@ -1,6 +1,6 @@
 ---
 title: PointLayer
-order: 1
+order: 0
 ---
 
 # PointLayer

docs/api/layer/point_layer/pointlayer.zh.md

@@ -1,6 +1,6 @@
 ---
 title: PointLayer
-order: 1
+order: 0
 ---
 
 # PointLayer

docs/api/layer/point_layer/scatter.zh.md

@@ -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
+    })
+```

docs/api/layer/point_layer/symbol.en.md

@@ -0,0 +1,4 @@
+---
+title: 符号图
+order: 4
+---

docs/api/layer/point_layer/symbol.zh.md

@@ -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

docs/api/layer/polygon_layer/extrude.zh.md

@@ -0,0 +1,4 @@
+---
+title: 3D填充图
+order: 1
+---

docs/api/layer/polygon_layer/fill.zh.md

@@ -0,0 +1,4 @@
+---
+title: 填充图
+order: 1
+---

docs/api/layer/polygon_layer/polygonlayer.en.md

@@ -1,6 +1,6 @@
 ---
 title: PolygonLayer
-order: 3
+order: 0
 ---
 
 # 填充图

docs/api/layer/polygon_layer/polygonlayer.zh.md

@@ -1,6 +1,6 @@
 ---
 title: PolygonLayer
-order: 3
+order: 0
 ---
 
 # 填充图

docs/api/map.en.md

@@ -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,
+  }),
+});
+```

docs/api/map.zh.md

@@ -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,
+  }),
+});
+```

docs/api/scene.zh.md

@@ -95,6 +95,7 @@ const scene = new L7.Scene({
 - dark
 - light
 - normal
+- blank 无底图
 
 除了内置的样式，你也可以传入自定义的其他属性。
 

docs/tutorial/quickstart.zh.md

@@ -157,3 +157,6 @@ export default class AMapExample extends React.Component {
 更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories) 
 
 ### Vue 欢迎补充
+[1.x Vue 使用](https://codesandbox.io/s/l7-vue1xdemo-wknsz)
+### Html
+[2.0版本 HTML 使用模板](https://codesandbox.io/s/l7htmltemplate-vp2lp)

examples/point/dot/demo/meta.json

@@ -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"
+    }
+
+  ]
+}

examples/point/dot/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Dot Intensity
+order: 1
+---

examples/point/dot/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: "亮度图"
+order: 1
+---

examples/point/scatter/demo/meta.json

@@ -5,14 +5,10 @@
   },
   "demos": [
     {
-      "filename": "normal2.js",
+      "filename": "scatter.js",
-      "title": "城市亮度图",
+      "title": "散点图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ"
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LnlmQ7sFWigAAAAAAAAAAABkARQnAQ"
-    },
+
-    {
-      "filename": "normal.js",
-      "title": "海量点",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"
     }
 
   ]

examples/point/scatter/demo/scatter.js

@@ -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);
+  });

examples/tutorial/map/demo/amapInstance.js

@@ -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
+  })
+});

gatsby-config.js

@@ -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: {

lerna.json

@@ -14,7 +14,7 @@
       "message": "chore: publish"
     }
   },
-  "version": "2.0.0-beta.19",
+  "version": "2.0.0-beta.20",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "publishConfig": {

package.json

@@ -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",

packages/component/CHANGELOG.md

@@ -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

packages/component/package.json

@@ -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-core": "^2.0.0-beta.20",
-    "@antv/l7-utils": "^2.0.0-beta.19",
+    "@antv/l7-utils": "^2.0.0-beta.20",
     "@turf/distance": "^6.0.1",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",

packages/component/src/control/layer.ts

@@ -236,7 +236,7 @@ export default class Layers extends Control {
       : null;
 
     if (type) {
-      this.emit(type, obj); // TODO:图
+      this.emit(type, obj);
     }
   }
 

packages/component/src/popup.ts

@@ -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;

packages/core/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
+
+* **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)
 
 

packages/core/package.json

@@ -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",

packages/core/src/services/component/PopupService.ts

@@ -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;
   }

packages/core/src/services/config/ConfigService.ts

@@ -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,

packages/core/src/services/config/IConfigService.ts

@@ -41,6 +41,11 @@ export interface IGlobalConfigService {
   getLayerConfig<IChildLayerConfig>(
     layerId: string,
   ): Partial<ILayerConfig & ISceneConfig & IChildLayerConfig>;
+  /**
+   * 获取警告信息
+   * @param key
+   */
+  getSceneWarninfo(layerId: string): string;
 
   /**
    * 设置图层配置项，继承所属场景配置项

packages/core/src/services/config/warnInfo.ts

@@ -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;

packages/core/src/services/interaction/IInteractionService.ts

@@ -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;
 }

packages/core/src/services/interaction/InteractionService.ts

@@ -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 });
   };
 }

packages/core/src/services/layer/ILayerService.ts

@@ -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[];
   /**

packages/core/src/services/layer/LayerService.ts

@@ -38,8 +38,8 @@ export default class LayerService implements ILayerService {
     return this.layers;
   }
 
-  public getLayer(id: string): ILayer | undefined {
+  public getLayer(name: string): ILayer | undefined {
-    return this.layers.find((layer) => layer.id === id);
+    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();
   }

packages/core/src/services/log/LogService.ts

@@ -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 {

packages/core/src/services/map/IMapService.ts

@@ -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;
 
   /**
    * 地图

packages/core/src/services/renderer/IModel.ts

@@ -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<{
+  blend?: Partial<IBlendOptions>;
-    // 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];
-  }>;
 
   /**
    * stencil
@@ -221,6 +231,8 @@ export interface IModelDrawOptions {
     [key: string]: IAttribute;
   };
   elements?: IElements;
+
+  blend?: IBlendOptions;
 }
 
 /**

packages/core/src/services/renderer/gl.ts

@@ -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,

packages/core/src/services/renderer/passes/BaseNormalPass.ts

@@ -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);

packages/core/src/services/renderer/passes/PixelPickingPass.ts

@@ -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 = ({
+  private pickFromPickingFBO = ({ x, y, lngLat, type }: IInteractionTarget) => {
-    x,
-    y,
-    type,
-  }: {
-    x: number;
-    y: number;
-    type: string;
-  }) => {
     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({
+  private triggerHoverOnLayer(target: {
-    x,
-    y,
-    type,
-    feature,
-  }: {
     x: number;
     y: number;
     type: string;
+    lngLat: ILngLat;
     feature: unknown;
+    featureId: number | null;
   }) {
-    const { onHover, onClick } = this.layer.getLayerConfig();
+    this.layer.emit(target.type, target);
-    // if (onHover) {
-    //   onHover({
-    //     x,
-    //     y,
-    //     feature,
-    //   });
-    // }
-    // if (onClick) {
-    //   onClick({
-    //     x,
-    //     y,
-    //     feature,
-    //   });
-    // }
-    this.layer.emit(type, {
-      x,
-      y,
-      feature,
-    });
   }
 
   /**
@@ -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));
+  }
 }

packages/core/src/services/scene/ISceneService.ts

@@ -9,6 +9,7 @@ export interface ISceneService {
   init(config: IMapConfig & IRenderConfig): void;
   addLayer(layer: ILayer): void;
   render(): void;
+  getSceneContainer(): HTMLDivElement;
   destroy(): void;
 }
 // scene 事件

packages/core/src/services/scene/SceneService.ts

@@ -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;

packages/core/src/services/source/ISourceService.ts

@@ -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];

packages/l7/CHANGELOG.md

@@ -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

packages/l7/package.json

@@ -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-component": "^2.0.0-beta.20",
-    "@antv/l7-core": "^2.0.0-beta.19",
+    "@antv/l7-core": "^2.0.0-beta.20",
-    "@antv/l7-layers": "^2.0.0-beta.19",
+    "@antv/l7-layers": "^2.0.0-beta.20",
-    "@antv/l7-maps": "^2.0.0-beta.19",
+    "@antv/l7-maps": "^2.0.0-beta.20",
-    "@antv/l7-scene": "^2.0.0-beta.19"
+    "@antv/l7-scene": "^2.0.0-beta.20"
   },
   "gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
   "publishConfig": {

packages/layers/CHANGELOG.md

@@ -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)
 
 

packages/layers/package.json

@@ -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-core": "^2.0.0-beta.20",
-    "@antv/l7-source": "^2.0.0-beta.19",
+    "@antv/l7-source": "^2.0.0-beta.20",
-    "@antv/l7-utils": "^2.0.0-beta.19",
+    "@antv/l7-utils": "^2.0.0-beta.20",
     "@mapbox/martini": "^0.1.0",
     "@turf/meta": "^6.0.2",
     "@types/d3-color": "^1.2.2",

packages/layers/src/core/BaseLayer.ts

@@ -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({
+    const activeOption: Partial<ILayerConfig> = {};
-      enableHighlight: isObject(options) ? true : options,
+    activeOption.enableHighlight = isObject(options) ? true : options;
-      highlightColor: isObject(options)
+    if (isObject(options)) {
-        ? options.color
+      activeOption.enableHighlight = true;
-        : this.getLayerConfig().highlightColor,
+      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: {
+      blend: BlendTypes[BlendType.normal],
-        enable: true,
-        func: {
-          srcRGB: gl.SRC_ALPHA,
-          srcAlpha: 1,
-          dstRGB: gl.ONE_MINUS_SRC_ALPHA,
-          dstAlpha: 1,
-        },
-      },
       ...rest,
     });
   }

packages/layers/src/core/BaseModel.ts

@@ -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.');
   }

packages/layers/src/heatmap/index.ts

@@ -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: {

packages/layers/src/heatmap/models/heatmap.ts

@@ -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';

packages/layers/src/line/dash.ts

@@ -10,7 +10,7 @@ interface IDashLineLayerStyleOptions {
 export default class DashLineLayer extends BaseLayer<
   IDashLineLayerStyleOptions
 > {
-  public name: string = 'LineLayer';
+  public type: string = 'LineLayer';
 
   protected getConfigSchema() {
     return {

packages/layers/src/line/index.ts

@@ -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;
 

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -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 {

packages/layers/src/plugins/DataSourcePlugin.ts

@@ -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();
+      return this.updateClusterData(layer);
-      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;
     });
   }
+
+  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;
+  }
 }

packages/layers/src/plugins/LayerStylePlugin.ts

@@ -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) {

packages/layers/src/plugins/PixelPickingPlugin.ts

@@ -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),
+          }),
+        );
+      },
+    );
     // }
   }
 }

packages/layers/src/point/index.ts

@@ -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';
       }

packages/layers/src/point/models/fill.ts

@@ -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 {

packages/layers/src/point/models/normal.ts

@@ -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: {
+        blend: this.getBlend(),
-          enable: true,
-          func: {
-            srcRGB: gl.ONE,
-            srcAlpha: 1,
-            dstRGB: gl.ONE,
-            dstAlpha: 1,
-          },
-        },
       }),
     ];
   }

packages/layers/src/point/text.ts

@@ -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 {

packages/layers/src/polygon/index.ts

@@ -7,7 +7,7 @@ interface IPolygonLayerStyleOptions {
 }
 
 export default class PolygonLayer extends BaseLayer<IPolygonLayerStyleOptions> {
-  public name: string = 'PolygonLayer';
+  public type: string = 'PolygonLayer';
 
   protected getConfigSchema() {
     return {

packages/layers/src/raster/image.ts

@@ -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() {

packages/layers/src/raster/raster.ts

@@ -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;
 

packages/layers/src/raster/raster2d.ts

@@ -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;