Merge pull request #1 from antvis/master

merge 主分支

.storybook/addons.ts

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

.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: [
-      {
-        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?$/,

CHANGELOG.md

@@ -3,6 +3,110 @@
 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.24](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.24) (2019-12-23)### Bug Fixes
+
+- remove error yarn.lock ([a1a3eff](https://github.com/antvis/L7/commit/a1a3eff2eb3599761105de92987873ec475b0514))
+- remove error yarn.lock ([64c7c65](https://github.com/antvis/L7/commit/64c7c650453f73b8d96e8510be58f5dada86900e))
+- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
+- **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
+- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
+- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
+- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
+- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
+- **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
+
+- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
+- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
+- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
+- **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.23](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.23) (2019-12-23)
+
+### Bug Fixes
+
+- remove error yarn.lock ([a1a3eff](https://github.com/antvis/L7/commit/a1a3eff2eb3599761105de92987873ec475b0514))
+- remove error yarn.lock ([64c7c65](https://github.com/antvis/L7/commit/64c7c650453f73b8d96e8510be58f5dada86900e))
+- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
+- **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
+- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
+- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
+- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
+- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
+- **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
+
+- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
+- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
+- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
+- **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.21](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.21) (2019-12-18)
+
+### Bug Fixes
+
+- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
+- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
+- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
+- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
+- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
+- **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
+
+- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
+- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
+- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
+- **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.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

babel.config.js

@@ -42,10 +42,16 @@ module.exports = api => {
       [
         '@babel/env',
         {
-          useBuiltIns: isCDNBundle ? 'usage' : false,
+          // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
+          useBuiltIns: 'usage',
+          corejs: '3.0.0',
           // set `modules: false` when building CDN bundle, let rollup do commonjs works
           // @see https://github.com/rollup/rollup-plugin-babel#modules
-          modules: (isCDNBundle || isESModule) ? false : 'auto'
+          modules: (isCDNBundle || isESModule) ? false : 'auto',
+          targets: {
+            chrome: 58,
+            ie: 11
+          }
         }
       ],
       [
@@ -54,12 +60,14 @@ module.exports = api => {
           development: isCommonJS
         }
       ],
-      '@babel/preset-typescript',
+      '@babel/preset-typescript'
     ],
+    ignore: [ /[\/\\]core-js/, /@babel[\/\\]runtime/ ],
     plugins: [
       '@babel/plugin-proposal-object-rest-spread',
       '@babel/plugin-proposal-optional-chaining',
       '@babel/plugin-proposal-nullish-coalescing-operator',
+      '@babel/plugin-syntax-async-generators',
       [
         '@babel/plugin-proposal-decorators',
         {

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柱状地图
- - 聚合地图
- - 复合图表地图
- - 自定义Marker
+- 气泡图
+- 散点图
+- 符号地图
+- 3D 柱状地图
+- 聚合地图
+- 复合图表地图
+- 自定义 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柱状地图
- - 聚合地图
- - 复合图表地图
- - 自定义Marker
+- 气泡图
+- 散点图
+- 符号地图
+- 3D 柱状地图
+- 聚合地图
+- 复合图表地图
+- 自定义 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
-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
+
+图层移除时触发

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,8 @@
+---
+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,45 @@
+---
+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.en.md

@@ -15,7 +15,7 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'dark',
-    center: [ 110.770672, 34.159869 ],
+    center: [110.770672, 34.159869],
     pitch: 45,
   }),
 });
@@ -25,75 +25,73 @@ const scene = new L7.Scene({
   id: 'map',
   map: new L7.GaodeMap({
     style: 'dark',
-    center: [ 110.770672, 34.159869 ],
+    center: [110.770672, 34.159869],
     pitch: 45,
   }),
 });
 ```
 
-
 ## Map
 
- L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理
- 只需要通过Scene传入地图配置项即可。
+L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建，创建管理
+只需要通过 Scene 传入地图配置项即可。
 
-目前L7 支持两种地图底图
+目前 L7 支持两种地图底图
 
 - 高德地图 国内业务场景 合规中国地图
 - MapBox 国际业务，或者内网离线部署场景
 
+### map
 
-###  map
-
-可以通过scene map 属性获取 map实例
+可以通过 scene map 属性获取 map 实例
 
 ```javascript
-const map = scene.map
-
+const map = scene.map;
 ```
-为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
+
+为了统一不同底图之前的接口差异 L7 在 scene 层对 map 的方法做了统一，因此一些地图的操作方法可以通过 scene 调用这样，切换不同底图时保证表现一致。
 
 示例代码
 
 ```javascript
-const scene =new L7.Scene({
+const scene = new L7.Scene({
   id: 'map',
   map: new L7.GaodeMap({
     style: 'dark',
-    center: [ 110.770672, 34.159869 ],
+    center: [110.770672, 34.159869],
     pitch: 45,
   }),
-})
+});
 ```
 
-
 ### 构造函数
 
 **Scene**
 
-
-
-
 ## 配置项
 
 ### 地图配置项
 
 ### id
+
 需传入 dom 容器或者容器 id  {domObject || string} [必选]
 
-
 ### zoom
-地图初始显示级别 {number}  （0-22）
+
+地图初始显示级别 {number} （0-22）
 
 ### center
+
 地图初始中心经纬度 {Lnglat}
 
 ### pitch
+
 地图初始俯仰角度 {number}  default 0
 
 ### style
 
 简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
+
 - dark
 - light
 - normal
@@ -103,62 +101,69 @@ const scene =new L7.Scene({
 比如高德地图
 
 ```javascript
- {
-   style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
- }
-
+{
+  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致
+}
 ```
 
-
 ### minZoom
-地图最小缩放等级 {number}  default 0  (0-22)
+
+地图最小缩放等级 {number}  default 0 (0-22)
 
 ### maxZoom
-地图最大缩放等级 {number}  default 22  (0-22)
+
+地图最大缩放等级 {number}  default 22 (0-22)
 
 ### rotateEnable
+
 地图是否可旋转 {Boolean} default true
 
-
-
-
 ## 方法
 
 ### getZoom
+
 获取当前缩放等级
 
 ```javascript
 scene.getZoom();
 ```
 
-return  {float}  当前缩放等级
+return {float}   当前缩放等级
 
 ### getLayers()
+
 获取所有的地图图层
+
 ```javascript
 scene.getLayers();
 ```
 
-return 图层数组  {Array}
-
+return 图层数组 {Array}
 
 ### getCenter()
+
 获取地图中心点
+
 ```javascript
-scene.getCenter()
+scene.getCenter();
 ```
 
 return {Lnglat} :地图中心点
 
 ### getSize()
+
 获取地图容器大小
+
 ```javascript
-scene.getSize()
+scene.getSize();
 ```
+
 return { Object } 地图容器的 width,height
 
 ### getPitch()
+
 获取地图俯仰角
+
 ```javascript
 scene.getPitch();
 ```
@@ -167,9 +172,9 @@ return {number} pitch
 
 ### setMapStyle
 
-参数：`style`  {string}  地图样式 具体样式格式和各底图设置方法一致
+参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
 
-L7 内置了三种地图样式，AMAP 和MapBox都适用
+L7 内置了三种地图样式，AMAP 和 MapBox 都适用
 
 - light
 - dark
@@ -183,150 +188,153 @@ L7 内置了三种地图样式，AMAP 和MapBox都适用
 scene.setMapStyle('light');
 
 // mapbox 主题设置
-scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
+scene.setMapStyle('mapbox://styles/mapbox/streets-v11');
 
 // AMap
-scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
-
+scene.setMapStyle(
+  'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true',
+);
 ```
 
 ### setCenter()
+
 设置地图中心点坐标
 
 ```javascript
-scene.setCenter([lng,lat])
+scene.setCenter([lng, lat]);
 ```
 
-参数：`center`  {LngLat} 地图中心点
-
+参数：`center` {LngLat} 地图中心点
 
 ### setZoomAndCenter
+
 设置地图等级和中心
+
 ```javascript
-scene.setZoomAndCenter(zoom,center)
+scene.setZoomAndCenter(zoom, center);
 ```
 
 参数：zoom {number}<br />center {LngLat}
 
-
 ### setRotation
+
 设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]
+
 ```javascript
-scene.setRotation(rotation)
+scene.setRotation(rotation);
 ```
 
-参数： `rotation`   {number}
+参数： `rotation` {number}
 
 ### zoomIn
+
 地图放大一级
+
 ```javascript
-scene.zoomIn()
+scene.zoomIn();
 ```
 
 ### zoomOut
+
 地图缩小一级
+
 ```javascript
-scene.ZoomOUt()
+scene.ZoomOUt();
 ```
 
 ### panTo
+
 地图平移到指定的位置
+
 ```javascript
-scene.panTo(LngLat)
+scene.panTo(LngLat);
 ```
 
-参数：`center`  LngLat 中心位置坐标
+参数：`center` LngLat 中心位置坐标
 
 ### panBy
-以像素为单位沿X方向和Y方向移动地图
-```javascript
-scene.panBy(x,y)
-```
-参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br />      `y`  {number} 垂直方向移动像素 向下为正方向
 
+以像素为单位沿 X 方向和 Y 方向移动地图
+
+```javascript
+scene.panBy(x, y);
+```
+
+参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br />      `y` {number} 垂直方向移动像素 向下为正方向
 
 ### setPitch
+
 设置地图仰俯角度
+
 ```javascript
-scene.setPitch(pitch)
+scene.setPitch(pitch);
 ```
 
-参数 :<br />   `pitch`  {number}
-
+参数 :<br />   `pitch` {number}
 
 ### fitBounds
+
 地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
 
 ```javascript
-scene.fitBounds([112,32,114,35]);
+scene.fitBounds([112, 32, 114, 35]);
 ```
 
-
-
 ### removeLayer
-移除layer
+
+移除 layer
 
 ```javascript
-scene.removeLayer(layer)
+scene.removeLayer(layer);
 ```
 
-参数 `layer`  {Layer}
-
-### getLayers
- 获取所有的layer
-
-```javascript
-scene.getLayers()
-```
-
-return  layers  {array}
+参数 `layer` {Layer}
 
 ## 事件
 
-
 ### on
+
 事件监听
 
 #### 参数
-`eventName`  {string} 事件名<br />`hander`  {function } 事件回调函数
 
+`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
 
 ### off
-移除事件监听<br />`eventName`  {string} 事件名<br />`hander`  {function } 事件回调函数
 
+移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
 
 ### 地图事件
-```javascript
-scene.on('loaded',()=>{})  //地图加载完成触发
-scene.on('mapmove',()=>{}) // 地图平移时触发事件
-scene.on('movestart',()=>{}) // 地图平移开始时触发
-scene.on('moveend',()=>{}) // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
-scene.on('zoomchange',()=>{}) // 地图缩放级别更改后触发
-scene.on('zoomstart',()=>{}) // 缩放开始时触发
-scene.on('zoomend',()=>{}) // 缩放停止时触发
-```
 
+```javascript
+scene.on('loaded', () => {}); //地图加载完成触发
+scene.on('mapmove', () => {}); // 地图平移时触发事件
+scene.on('movestart', () => {}); // 地图平移开始时触发
+scene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
+scene.on('zoomchange', () => {}); // 地图缩放级别更改后触发
+scene.on('zoomstart', () => {}); // 缩放开始时触发
+scene.on('zoomend', () => {}); // 缩放停止时触发
+```
 
 ### 鼠标事件
 
 ```javascript
-scene.on('click', (ev)=>{});             // 鼠标左键点击事件
-scene.on('dblclick', (ev)=>{});          // 鼠标左键双击事件
-scene.on('mousemove', (ev)=>{});        // 鼠标在地图上移动时触发
-scene.on('mousewheel', (ev)=>{});        // 鼠标滚轮开始缩放地图时触发
-scene.on('mouseover', (ev)=>{});         // 鼠标移入地图容器内时触发
-scene.on('mouseout', (ev)=>{});           // 鼠标移出地图容器时触发
-scene.on('mouseup', (ev)=>{});         // 鼠标在地图上单击抬起时触发
-scene.on('mousedown', (ev)=>{});         // 鼠标在地图上单击按下时触发
-scene.on('rightclick', (ev)=>{});              // 鼠标右键单击事件
-scene.on('dragstart', (ev)=>{});           //开始拖拽地图时触发
-scene.on('dragging', (ev)=>{});         // 拖拽地图过程中触发
-scene.on('dragend', (ev)=>{});         //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
+scene.on('click', (ev) => {}); // 鼠标左键点击事件
+scene.on('dblclick', (ev) => {}); // 鼠标左键双击事件
+scene.on('mousemove', (ev) => {}); // 鼠标在地图上移动时触发
+scene.on('mousewheel', (ev) => {}); // 鼠标滚轮开始缩放地图时触发
+scene.on('mouseover', (ev) => {}); // 鼠标移入地图容器内时触发
+scene.on('mouseout', (ev) => {}); // 鼠标移出地图容器时触发
+scene.on('mouseup', (ev) => {}); // 鼠标在地图上单击抬起时触发
+scene.on('mousedown', (ev) => {}); // 鼠标在地图上单击按下时触发
+scene.on('rightclick', (ev) => {}); // 鼠标右键单击事件
+scene.on('dragstart', (ev) => {}); //开始拖拽地图时触发
+scene.on('dragging', (ev) => {}); // 拖拽地图过程中触发
+scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
 ```
 
 ### 其它事件
+
 ```javascript
-scene.on('resize',()=>{}) // 地图容器大小改变事件
+scene.on('resize', () => {}); // 地图容器大小改变事件
 ```
-
-

docs/api/scene.zh.md

@@ -15,7 +15,7 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'dark',
-    center: [ 110.770672, 34.159869 ],
+    center: [110.770672, 34.159869],
     pitch: 45,
   }),
 });
@@ -25,140 +25,146 @@ const scene = new L7.Scene({
   id: 'map',
   map: new L7.GaodeMap({
     style: 'dark',
-    center: [ 110.770672, 34.159869 ],
+    center: [110.770672, 34.159869],
     pitch: 45,
   }),
 });
 ```
 
-
 ## Map
 
- L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理
- 只需要通过Scene传入地图配置项即可。
+L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建，创建管理
+只需要通过 Scene 传入地图配置项即可。
 
-目前L7 支持两种地图底图
+目前 L7 支持两种地图底图
 
 - 高德地图 国内业务场景 合规中国地图
 - MapBox 国际业务，或者内网离线部署场景
 
+### map
 
-###  map
-
-可以通过scene map 属性获取 map实例
+可以通过 scene map 属性获取 map 实例
 
 ```javascript
-const map = scene.map
-
+const map = scene.map;
 ```
-为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
+
+为了统一不同底图之前的接口差异 L7 在 scene 层对 map 的方法做了统一，因此一些地图的操作方法可以通过 scene 调用这样，切换不同底图时保证表现一致。
 
 示例代码
 
 ```javascript
-const scene =new L7.Scene({
+const scene = new L7.Scene({
   id: 'map',
   map: new L7.GaodeMap({
     style: 'dark',
-    center: [ 110.770672, 34.159869 ],
+    center: [110.770672, 34.159869],
     pitch: 45,
   }),
-})
+});
 ```
 
-
 ### 构造函数
 
 **Scene**
 
-
-
-
 ## 配置项
 
 ### 地图配置项
 
 ### id
+
 需传入 dom 容器或者容器 id  {domObject || string} [必选]
 
-
 ### zoom
-地图初始显示级别 {number}  （0-22）
+
+地图初始显示级别 {number} （0-22）
 
 ### center
+
 地图初始中心经纬度 {Lnglat}
 
 ### pitch
+
 地图初始俯仰角度 {number}  default 0
 
 ### style
 
 简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
+
 - dark
 - light
 - normal
+- blank 无底图
 
 除了内置的样式，你也可以传入自定义的其他属性。
 
 比如高德地图
 
 ```javascript
- {
-   style:'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true' // 设置方法和高德地图一致
- }
-
+{
+  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致
+}
 ```
 
-
 ### minZoom
-地图最小缩放等级 {number}  default 0  (0-22)
+
+地图最小缩放等级 {number}  default 0 (0-22)
 
 ### maxZoom
-地图最大缩放等级 {number}  default 22  (0-22)
+
+地图最大缩放等级 {number}  default 22 (0-22)
 
 ### rotateEnable
+
 地图是否可旋转 {Boolean} default true
 
-
-
-
 ## 方法
 
 ### getZoom
+
 获取当前缩放等级
 
 ```javascript
 scene.getZoom();
 ```
 
-return  {float}  当前缩放等级
+return {float}   当前缩放等级
 
 ### getLayers()
+
 获取所有的地图图层
+
 ```javascript
 scene.getLayers();
 ```
 
-return 图层数组  {Array}
-
+return 图层数组 {Array}
 
 ### getCenter()
+
 获取地图中心点
+
 ```javascript
-scene.getCenter()
+scene.getCenter();
 ```
 
 return {Lnglat} :地图中心点
 
 ### getSize()
+
 获取地图容器大小
+
 ```javascript
-scene.getSize()
+scene.getSize();
 ```
+
 return { Object } 地图容器的 width,height
 
 ### getPitch()
+
 获取地图俯仰角
+
 ```javascript
 scene.getPitch();
 ```
@@ -167,9 +173,9 @@ return {number} pitch
 
 ### setMapStyle
 
-参数：`style`  {string}  地图样式 具体样式格式和各底图设置方法一致
+参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
 
-L7 内置了三种地图样式，AMAP 和MapBox都适用
+L7 内置了三种地图样式，AMAP 和 MapBox 都适用
 
 - light
 - dark
@@ -183,87 +189,103 @@ L7 内置了三种地图样式，AMAP 和MapBox都适用
 scene.setMapStyle('light');
 
 // mapbox 主题设置
-scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
+scene.setMapStyle('mapbox://styles/mapbox/streets-v11');
 
 // AMap
-scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
-
+scene.setMapStyle(
+  'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true',
+);
 ```
 
 ### setCenter()
+
 设置地图中心点坐标
 
 ```javascript
-scene.setCenter([lng,lat])
+scene.setCenter([lng, lat]);
 ```
 
-参数：`center`  {LngLat} 地图中心点
-
+参数：`center` {LngLat} 地图中心点
 
 ### setZoomAndCenter
+
 设置地图等级和中心
+
 ```javascript
-scene.setZoomAndCenter(zoom,center)
+scene.setZoomAndCenter(zoom, center);
 ```
 
 参数：
+
 - zoom {number}
 - center {LngLat}
 
-
 ### setRotation
+
 设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]
+
 ```javascript
-scene.setRotation(rotation)
+scene.setRotation(rotation);
 ```
 
-参数： `rotation`   {number}
+参数： `rotation` {number}
 
 ### zoomIn
+
 地图放大一级
+
 ```javascript
-scene.zoomIn()
+scene.zoomIn();
 ```
 
 ### zoomOut
+
 地图缩小一级
+
 ```javascript
-scene.ZoomOUt()
+scene.ZoomOUt();
 ```
 
 ### panTo
+
 地图平移到指定的位置
+
 ```javascript
-scene.panTo(LngLat)
+scene.panTo(LngLat);
 ```
 
 参数：
 
-- `center`  LngLat 中心位置坐标
+- `center` LngLat 中心位置坐标
 
 ### panBy
-以像素为单位沿X方向和Y方向移动地图
+
+以像素为单位沿 X 方向和 Y 方向移动地图
+
 ```javascript
-scene.panBy(x,y)
+scene.panBy(x, y);
 ```
+
 参数：
 
 - `x` {number} 水平方向移动像素 向右为正方向
 
-- `y`  {number} 垂直方向移动像素 向下为正方向
-
+- `y` {number} 垂直方向移动像素 向下为正方向
 
 ### setPitch
+
 设置地图仰俯角度
+
 ```javascript
-scene.setPitch(pitch)
+scene.setPitch(pitch);
 ```
 
 参数 :
--  `pitch`  {number}
 
+- `pitch` {number}
 
 ### fitBounds
+
 地图缩放到某个范围内
 
 参数 :
@@ -271,77 +293,66 @@ scene.setPitch(pitch)
 - `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
 
 ```javascript
-scene.fitBounds([112,32,114,35]);
+scene.fitBounds([112, 32, 114, 35]);
 ```
 
-
-
 ### removeLayer
-移除layer
+
+移除 layer
 
 ```javascript
-scene.removeLayer(layer)
+scene.removeLayer(layer);
 ```
 
 参数
 
-- `layer`  {Layer}
-
-### getLayers
- 获取所有的layer
-
-```javascript
-scene.getLayers()
-```
-
-return  layers  {array}
+- `layer` {Layer}
 
 ## 事件
 
-
 ### on
+
 事件监听
 
 #### 参数
-`eventName`  {string} 事件名<br />`hander`  {function } 事件回调函数
 
+`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
 
 ### off
-移除事件监听<br />`eventName`  {string} 事件名<br />`hander`  {function } 事件回调函数
 
+移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
 
 ### 地图事件
-```javascript
-scene.on('loaded',()=>{})  //地图加载完成触发
-scene.on('mapmove',()=>{}) // 地图平移时触发事件
-scene.on('movestart',()=>{}) // 地图平移开始时触发
-scene.on('moveend',()=>{}) // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
-scene.on('zoomchange',()=>{}) // 地图缩放级别更改后触发
-scene.on('zoomstart',()=>{}) // 缩放开始时触发
-scene.on('zoomend',()=>{}) // 缩放停止时触发
-```
 
+```javascript
+scene.on('loaded', () => {}); //地图加载完成触发
+scene.on('mapmove', () => {}); // 地图平移时触发事件
+scene.on('movestart', () => {}); // 地图平移开始时触发
+scene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
+scene.on('zoomchange', () => {}); // 地图缩放级别更改后触发
+scene.on('zoomstart', () => {}); // 缩放开始时触发
+scene.on('zoomend', () => {}); // 缩放停止时触发
+```
 
 ### 鼠标事件
 
 ```javascript
-scene.on('click', (ev)=>{});             // 鼠标左键点击事件
-scene.on('dblclick', (ev)=>{});          // 鼠标左键双击事件
-scene.on('mousemove', (ev)=>{});        // 鼠标在地图上移动时触发
-scene.on('mousewheel', (ev)=>{});        // 鼠标滚轮开始缩放地图时触发
-scene.on('mouseover', (ev)=>{});         // 鼠标移入地图容器内时触发
-scene.on('mouseout', (ev)=>{});           // 鼠标移出地图容器时触发
-scene.on('mouseup', (ev)=>{});         // 鼠标在地图上单击抬起时触发
-scene.on('mousedown', (ev)=>{});         // 鼠标在地图上单击按下时触发
-scene.on('rightclick', (ev)=>{});              // 鼠标右键单击事件
-scene.on('dragstart', (ev)=>{});           //开始拖拽地图时触发
-scene.on('dragging', (ev)=>{});         // 拖拽地图过程中触发
-scene.on('dragend', (ev)=>{});         //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
+scene.on('click', (ev) => {}); // 鼠标左键点击事件
+scene.on('dblclick', (ev) => {}); // 鼠标左键双击事件
+scene.on('mousemove', (ev) => {}); // 鼠标在地图上移动时触发
+scene.on('mousewheel', (ev) => {}); // 鼠标滚轮开始缩放地图时触发
+scene.on('mouseover', (ev) => {}); // 鼠标移入地图容器内时触发
+scene.on('mouseout', (ev) => {}); // 鼠标移出地图容器时触发
+scene.on('mouseup', (ev) => {}); // 鼠标在地图上单击抬起时触发
+scene.on('mousedown', (ev) => {}); // 鼠标在地图上单击按下时触发
+scene.on('rightclick', (ev) => {}); // 鼠标右键单击事件
+scene.on('dragstart', (ev) => {}); //开始拖拽地图时触发
+scene.on('dragging', (ev) => {}); // 拖拽地图过程中触发
+scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
 ```
 
 ### 其它事件
+
 ```javascript
-scene.on('resize',()=>{}) // 地图容器大小改变事件
+scene.on('resize', () => {}); // 地图容器大小改变事件
 ```
-
-

docs/tutorial/map/amap.en.md

@@ -18,7 +18,7 @@ order: 0
 2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token
 
 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js"></script>
 ```
 
 ### 添加div 标签指定地图容器
@@ -106,7 +106,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 </head>
 <body>
 <div id="map"></div>
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js"></script>
 <script>
 
   const scene = new L7.Scene({

docs/tutorial/map/amap.zh.md

@@ -18,7 +18,7 @@ order: 0
 2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token
 
 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js"></script>
 ```
 
 ### 添加div 标签指定地图容器
@@ -106,7 +106,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 </head>
 <body>
 <div id="map"></div>
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js"></script>
 <script>
 
   const scene = new L7.Scene({

docs/tutorial/map/blankmap.en.md

@@ -27,4 +27,10 @@ const scene = new Scene({
 
 离线，无token使用 
 
-<iframe width="100%" height="400" src="//jsfiddle.net/lzxue/a76og89k/embedded/html,result/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe
+     src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
+     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="worldmap"
+     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+   ></iframe>

docs/tutorial/map/blankmap.zh.md

@@ -8,7 +8,7 @@ order: 2
 
 L7 在地图样式层面增加了无底图样式```blank``` 无底图模式
 
-😃不需要使用mapbox token 拿来就用，不要注册mapbox账户
+不需要使用mapbox token 也不需要注册mapbox账户
 
 ```javascript
 const scene = new Scene({
@@ -26,4 +26,10 @@ const scene = new Scene({
 
 离线，无token使用 
 
-<iframe width="100%" height="400" src="//jsfiddle.net/lzxue/a76og89k/embedded/html,result/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe
+     src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
+     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="worldmap"
+     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+   ></iframe>

docs/tutorial/map/mapbox.en.md

@@ -24,7 +24,7 @@ order: 0
 
 
 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js"></script>
 ```
 
 
@@ -118,7 +118,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
   
   <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js"></script>
 <script>
   const scene = new L7.Scene({
     id: 'map',

docs/tutorial/map/mapbox.zh.md

@@ -24,7 +24,7 @@ order: 0
 
 
 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js"></script>
 ```
 
 
@@ -116,7 +116,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
   <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
   
   <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js"></script>
 <script>
   const scene = new L7.Scene({
     id: 'map',

docs/tutorial/quickstart.en.md

@@ -18,7 +18,7 @@ Include the L7 JS JavaScript  <head> of your HTML file.
 
 ```html
 <head>
-<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js'>
+<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js'>
 </script>
 </head>
 ```

docs/tutorial/quickstart.zh.md

@@ -20,7 +20,7 @@ Include the L7 JS JavaScript  <head> of your HTML file.
 ```html
 <head>
 <! --引入第三方地图JSAPI--> 
-<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js'>
+<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js'>
 </script>
 </head>
 ```
@@ -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/gallery/basic/demo/bus_dark.js

@@ -1,3 +1,5 @@
+// Data Source https://busrouter.sg/visualization/
+
 import { Scene, LineLayer } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 

examples/line/path/demo/bus_dark.js

@@ -1,3 +1,5 @@
+// Data Source https://busrouter.sg/visualization/
+
 import { Scene, LineLayer } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 

examples/line/path/demo/bus_light.js

@@ -1,3 +1,5 @@
+// Data Source https://busrouter.sg/visualization/
+
 import { Scene, LineLayer } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 

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

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.24",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "publishConfig": {

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "l7",
   "private": true,
   "repository": {
     "type": "git",
@@ -13,6 +14,8 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
     "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@babel/plugin-syntax-async-generators": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
@@ -88,7 +91,7 @@
     "react-dom": "^16.12.0",
     "react-i18next": "^11.0.1",
     "rimraf": "^2.6.2",
-    "rollup": "^1.27.0",
+    "rollup": "^1.27.14",
     "rollup-plugin-analyzer": "^3.2.2",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
@@ -123,7 +126,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,62 @@
 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.24](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.24) (2019-12-23)
+
+
+### Bug Fixes
+
+* merge master fix conflict ([652e5d1](https://github.com/antvis/L7/commit/652e5d1cafc350fe98d569f32bf6c592c6a79b89))
+
+
+### Features
+
+* **layer:** add setSelect setActive 方法 & refactor color  util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+
+
+
+
+
+# [2.0.0-beta.23](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.23) (2019-12-23)
+
+
+### Bug Fixes
+
+* merge master fix conflict ([652e5d1](https://github.com/antvis/L7/commit/652e5d1cafc350fe98d569f32bf6c592c6a79b89))
+
+
+### Features
+
+* **layer:** add setSelect setActive 方法 & refactor color  util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+
+
+
+
+
+# [2.0.0-beta.21](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.21) (2019-12-18)
+
+
+### Bug Fixes
+
+* merge master fix conflict ([652e5d1](https://github.com/antvis/L7/commit/652e5d1cafc350fe98d569f32bf6c592c6a79b89))
+
+
+### Features
+
+* **layer:** add setSelect setActive 方法 & refactor color  util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+
+
+
+
+
+# [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.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,14 +24,17 @@
   "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.24",
+    "@antv/l7-utils": "^2.0.0-beta.24",
+    "@babel/runtime": "^7.7.7",
     "@turf/distance": "^6.0.1",
+    "core-js": "3",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",
     "inversify-inject-decorators": "^3.1.0",
     "inversify-logging": "^0.2.1",
-    "load-styles": "^2.0.0"
+    "load-styles": "^2.0.0",
+    "regenerator-runtime": "^0.13.3"
   },
   "gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
   "publishConfig": {

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,102 @@
 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.24](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.24) (2019-12-23)
+
+
+### Bug Fixes
+
+* **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
+* mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
+* merge master fix conflict ([652e5d1](https://github.com/antvis/L7/commit/652e5d1cafc350fe98d569f32bf6c592c6a79b89))
+* source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
+* **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
+
+* **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
+* **layer:** add setSelect setActive 方法 & refactor color  util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
+* **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.23](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.23) (2019-12-23)
+
+
+### Bug Fixes
+
+* **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
+* mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
+* merge master fix conflict ([652e5d1](https://github.com/antvis/L7/commit/652e5d1cafc350fe98d569f32bf6c592c6a79b89))
+* source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
+* **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
+
+* **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
+* **layer:** add setSelect setActive 方法 & refactor color  util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
+* **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.21](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.21) (2019-12-18)
+
+
+### Bug Fixes
+
+* mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
+* merge master fix conflict ([652e5d1](https://github.com/antvis/L7/commit/652e5d1cafc350fe98d569f32bf6c592c6a79b89))
+* source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
+* **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
+
+* **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
+* **layer:** add setSelect setActive 方法 & refactor color  util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
+* **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.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.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,9 +22,11 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-utils": "^2.0.0-beta.19",
+    "@antv/l7-utils": "^2.0.0-beta.24",
+    "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",
+    "core-js": "3",
     "element-resize-event": "^3.0.3",
     "eventemitter3": "^4.0.0",
     "gl-matrix": "^3.1.0",
@@ -35,6 +37,7 @@
     "merge-json-schemas": "^1.0.0",
     "probe.gl": "^3.1.1",
     "reflect-metadata": "^0.1.13",
+    "regenerator-runtime": "^0.13.3",
     "tapable": "^2.0.0-beta.8",
     "viewport-mercator-project": "^6.2.1"
   },

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,13 +50,16 @@ 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',
+  selectColor: 'blue',
   enableTAA: false,
   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;
+  getDefaultStyle(): unknown;
   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 {
-    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();
   }

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<{
-    // 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;
 }
 
 /**

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 = ({
-    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));
+  }
 }

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,50 @@
 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.24](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.24) (2019-12-23)
+
+
+### Features
+
+* **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
+
+
+
+
+
+# [2.0.0-beta.23](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.23) (2019-12-23)
+
+
+### Features
+
+* **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
+
+
+
+
+
+# [2.0.0-beta.21](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.21) (2019-12-18)
+
+
+### Features
+
+* **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
+
+
+
+
+
+# [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.24",
   "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,11 +24,13 @@
   "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.24",
+    "@antv/l7-core": "^2.0.0-beta.24",
+    "@antv/l7-layers": "^2.0.0-beta.24",
+    "@antv/l7-maps": "^2.0.0-beta.24",
+    "@antv/l7-scene": "^2.0.0-beta.24",
+    "core-js": "3",
+    "regenerator-runtime": "^0.13.3"
   },
   "gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
   "publishConfig": {

packages/layers/CHANGELOG.md

@@ -3,6 +3,85 @@
 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.24](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.24) (2019-12-23)
+
+
+### Bug Fixes
+
+* **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
+* **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
+
+
+### Features
+
+* **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
+* **layer:** add setSelect setActive 方法 & refactor color  util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
+* **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.23](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.23) (2019-12-23)
+
+
+### Bug Fixes
+
+* **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
+* **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
+
+
+### Features
+
+* **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
+* **layer:** add setSelect setActive 方法 & refactor color  util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
+* **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.21](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.21) (2019-12-18)
+
+
+### Bug Fixes
+
+* **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
+
+
+### Features
+
+* **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
+* **layer:** add setSelect setActive 方法 & refactor color  util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
+* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
+* **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.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.24",
   "description": "L7's collection of built-in layers",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,12 +22,14 @@
   "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.24",
+    "@antv/l7-source": "^2.0.0-beta.24",
+    "@antv/l7-utils": "^2.0.0-beta.24",
+    "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.1.0",
     "@turf/meta": "^6.0.2",
     "@types/d3-color": "^1.2.2",
+    "core-js": "3",
     "d3-array": "^2.3.1",
     "d3-color": "^1.4.0",
     "d3-scale": "^3.1.0",
@@ -40,6 +42,7 @@
     "merge-json-schemas": "1.0.0",
     "polyline-miter-util": "^1.0.1",
     "reflect-metadata": "^0.1.13",
+    "regenerator-runtime": "^0.13.3",
     "tapable": "^2.0.0-beta.8"
   },
   "devDependencies": {

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;
   }
 
@@ -214,7 +221,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   public init() {
     // 设置配置项
     const sceneId = this.container.get<string>(TYPES.SceneID);
-    this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
+    this.configService.setLayerConfig(sceneId, this.id, {});
 
     // 全局容器服务
     this.iconService = this.container.get<IIconService>(TYPES.IIconService);
@@ -291,10 +298,15 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     this.inited = true;
 
     this.hooks.afterInit.call();
-
+    // 更新 module 样式
+    this.updateLayerConfig({
+      ...this.rawConfig,
+      ...(this.getDefaultConfig() as object),
+    });
     this.buildModels();
     // 触发初始化完成事件;
     this.emit('inited');
+    this.emit('added');
     return this;
   }
 
@@ -437,12 +449,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 +481,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 +504,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 +550,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 +701,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,
     });
   }
@@ -666,6 +718,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     throw new Error('Method not implemented.');
   }
 
+  protected getModelType(): unknown {
+    throw new Error('Method not implemented.');
+  }
+  protected getDefaultConfig() {
+    return {};
+  }
   private splitValuesAndCallbackInAttribute(
     valuesOrCallback?: unknown[],
     defaultValues?: unknown[],

packages/layers/src/core/BaseModel.ts

@@ -1,11 +1,14 @@
 import {
+  BlendType,
   IAttribute,
+  IBlendOptions,
   ICameraService,
   IElements,
   IFontService,
   IGlobalConfigService,
   IIconService,
   ILayer,
+  ILayerConfig,
   ILayerModel,
   IMapService,
   IModel,
@@ -17,8 +20,9 @@ import {
   Triangulation,
   TYPES,
 } from '@antv/l7-core';
-
-export default class BaseModel implements ILayerModel {
+import { BlendTypes } from '../utils/blend';
+export default class BaseModel<ChildLayerStyleOptions = {}>
+  implements ILayerModel {
   public triangulation: Triangulation;
 
   protected layer: ILayer;
@@ -54,7 +58,13 @@ 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 getDefaultStyle(): unknown {
+    return {};
+  }
   public getUninforms(): IModelUniform {
     throw new Error('Method not implemented.');
   }

packages/layers/src/heatmap/index.ts

@@ -1,11 +1,11 @@
 import { AttributeType, gl, IEncodeFeature, ILayer } from '@antv/l7-core';
 import BaseLayer from '../core/BaseLayer';
 import HeatMapModels, { HeatMapModelType } from './models';
-interface IPointLayerStyleOptions {
+interface IHeatMapLayerStyleOptions {
   opacity: number;
 }
-export default class HeatMapLayer extends BaseLayer<IPointLayerStyleOptions> {
-  public name: string = 'HeatMapLayer';
+export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
+  public type: string = 'HeatMapLayer';
   protected getConfigSchema() {
     return {
       properties: {
@@ -37,7 +37,7 @@ export default class HeatMapLayer extends BaseLayer<IPointLayerStyleOptions> {
     this.layerModel = new HeatMapModels[shape](this);
     this.models = this.layerModel.buildModels();
   }
-  private getModelType(): HeatMapModelType {
+  protected getModelType(): HeatMapModelType {
     const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
       'shape',
     );

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

@@ -6,11 +6,12 @@ import line_dash_vert from './shaders/line_dash_vert.glsl';
 interface IDashLineLayerStyleOptions {
   opacity: number;
   dashArray: [number, number];
+  lineType: string;
 }
 export default class DashLineLayer extends BaseLayer<
   IDashLineLayerStyleOptions
 > {
-  public name: string = 'LineLayer';
+  public type: string = 'LineLayer';
 
   protected getConfigSchema() {
     return {
@@ -25,7 +26,11 @@ export default class DashLineLayer extends BaseLayer<
   }
 
   protected renderModels() {
-    const { opacity, dashArray = [10, 5] } = this.getLayerConfig();
+    const {
+      opacity,
+      dashArray = [10, 5],
+      lineType = 'dash',
+    } = this.getLayerConfig();
     this.models.forEach((model) =>
       model.draw({
         uniforms: {
@@ -132,30 +137,30 @@ export default class DashLineLayer extends BaseLayer<
       },
     });
 
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'startPos',
-      type: AttributeType.Attribute,
-      descriptor: {
-        name: 'a_StartPos',
-        buffer: {
-          // give the WebGL driver a hint that this buffer may change
-          usage: gl.DYNAMIC_DRAW,
-          data: [],
-          type: gl.FLOAT,
-        },
-        size: 3,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-        ) => {
-          const coordinates = feature.coordinates as number[][];
-          const coord = coordinates[0];
-          return coord.length === 3 ? coord : [...coord, 0.0];
-        },
-      },
-    });
+    // this.styleAttributeService.registerStyleAttribute({
+    //   name: 'startPos',
+    //   type: AttributeType.Attribute,
+    //   descriptor: {
+    //     name: 'a_StartPos',
+    //     buffer: {
+    //       // give the WebGL driver a hint that this buffer may change
+    //       usage: gl.DYNAMIC_DRAW,
+    //       data: [],
+    //       type: gl.FLOAT,
+    //     },
+    //     size: 3,
+    //     update: (
+    //       feature: IEncodeFeature,
+    //       featureIdx: number,
+    //       vertex: number[],
+    //       attributeIdx: number,
+    //     ) => {
+    //       const coordinates = feature.coordinates as number[][];
+    //       const coord = coordinates[0];
+    //       return coord.length === 3 ? coord : [...coord, 0.0];
+    //     },
+    //   },
+    // });
 
     this.styleAttributeService.registerStyleAttribute({
       name: 'distance',

packages/layers/src/line/index.ts

@@ -1,10 +1,16 @@
 import BaseLayer from '../core/BaseLayer';
 import LineModels, { LineModelType } from './models';
-interface IPointLayerStyleOptions {
-  opacity: number;
+export enum LineType {
+  'solid' = 'solid',
+  'dash' = 'dash',
 }
-export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
-  public name: string = 'LineLayer';
+interface ILineLayerStyleOptions {
+  opacity: number;
+  lineType?: keyof typeof LineType;
+  dashArray?: [number, number];
+}
+export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
+  public type: string = 'LineLayer';
 
   private animateStartTime: number = 0;
 
@@ -34,7 +40,7 @@ export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
     this.layerModel = new LineModels[shape](this);
     this.models = this.layerModel.buildModels();
   }
-  private getModelType(): LineModelType {
+  protected getModelType(): LineModelType {
     const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute(
       'shape',
     );