diff --git a/.storybook/addons.ts b/.storybook/addons.ts index fa8ed5f333..518ae7e9ee 100644 --- a/.storybook/addons.ts +++ b/.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'; diff --git a/.storybook/config.ts b/.storybook/config.ts index 57f82de959..8d0e91a35c 100644 --- a/.storybook/config.ts +++ b/.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: /\./, diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 2d3b00e6e0..a6d68c08d1 100644 --- a/.storybook/webpack.config.js +++ b/.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?$/, diff --git a/CHANGELOG.md b/CHANGELOG.md index 626bcbfd22..f0bf3b3291 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/babel.config.js b/babel.config.js index cae969d36f..1486c08675 100644 --- a/babel.config.js +++ b/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', { diff --git a/docs/api/l7.en.md b/docs/api/l7.en.md index f5a260d390..66c396dd7e 100644 --- a/docs/api/l7.en.md +++ b/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 的开源

Your user agent does not support the HTML5 Video element.

-2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档， +2.0.beta 版本目前有些功能还未完善，1 月 6 号我们正式版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档， 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) ## 核心特性 - 🌏 数据驱动可视化展示 数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。 @@ -34,34 +32,34 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 🌏 简单灵活的数据接入 -支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 +支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 - 🌏 多地图底图支持，支持离线内网部署 +🌏 多地图底图支持，支持离线内网部署 高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。 ## 支持丰富的图表类型 ### 点图层 - - - 气泡图 - - 散点图 - - 符号地图 - - 3D柱状地图 - - 聚合地图 - - 复合图表地图 - - 自定义Marker + +- 气泡图 +- 散点图 +- 符号地图 +- 3D 柱状地图 +- 聚合地图 +- 复合图表地图 +- 自定义 Marker ### 线图层 - 路径地图 -- 弧线，支持2D弧线、3D弧线以及大圆航线 +- 弧线，支持 2D 弧线、3D 弧线以及大圆航线 - 等值线 ### 面图层 - 填充图 -- 3D填充图 +- 3D 填充图 ### 热力图 @@ -70,6 +68,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 - 网格热力图 ### 栅格地图 + - 图片 - Raster @@ -77,5 +76,4 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 ![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ) - 更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。 diff --git a/docs/api/l7.zh.md b/docs/api/l7.zh.md index 84b12d1368..8d9fa3d06c 100644 --- a/docs/api/l7.zh.md +++ b/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,34 +34,34 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 🌏 简单灵活的数据接入 -支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 +支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 - 🌏 多地图底图支持，支持离线内网部署 +🌏 多地图底图支持，支持离线内网部署 高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。 ## 支持丰富的图表类型 ### 点图层 - - - 气泡图 - - 散点图 - - 符号地图 - - 3D柱状地图 - - 聚合地图 - - 复合图表地图 - - 自定义Marker + +- 气泡图 +- 散点图 +- 符号地图 +- 3D 柱状地图 +- 聚合地图 +- 复合图表地图 +- 自定义 Marker ### 线图层 - 路径地图 -- 弧线，支持2D弧线、3D弧线以及大圆航线 +- 弧线，支持 2D 弧线、3D 弧线以及大圆航线 - 等值线 ### 面图层 - 填充图 -- 3D填充图 +- 3D 填充图 ### 热力图 @@ -71,6 +70,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 - 网格热力图 ### 栅格地图 + - 图片 - Raster @@ -78,11 +78,10 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 ![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) diff --git a/docs/api/l7stable.en.md b/docs/api/l7stable.en.md index 14df77bff5..36217a0996 100644 --- a/docs/api/l7stable.en.md +++ b/docs/api/l7stable.en.md @@ -3,11 +3,9 @@ title: 1.x stable order: 1 --- +## L7 1.x 版本 - -## L7 1.x 版本 - - ## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) +## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) 目前 1.x 版本最新版本为 ![L7 1.x 版本](https://badgen.net/npm/v/@antv/l7) @@ -19,9 +17,10 @@ order: 1 ### npm 安装使用 -会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本 +会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本 + ``` -npm install @antv/l7 +npm install @antv/l7 ``` @@ -31,9 +30,6 @@ npm install @antv/l7 - [1.x 文档](https://www.yuque.com/antv/l7/vgo25g) +L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能. - -L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能. - - -L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能. +L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能. diff --git a/docs/api/l7stable.zh.md b/docs/api/l7stable.zh.md index 9316115f55..073535baff 100644 --- a/docs/api/l7stable.zh.md +++ b/docs/api/l7stable.zh.md @@ -3,11 +3,9 @@ title: 1.x 稳定版 order: 1 --- +## L7 1.x 版本 - -## L7 1.x 版本 - - ## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) +## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html) 目前 1.x 版本最新版本为 ![L7 1.x 版本](https://badgen.net/npm/v/@antv/l7) @@ -19,9 +17,10 @@ order: 1 ### npm 安装使用 -会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本 +会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本 + ``` -npm install @antv/l7 +npm install @antv/l7 ``` @@ -31,6 +30,4 @@ npm install @antv/l7 - [1.x 文档](https://www.yuque.com/antv/l7/vgo25g) - - -L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能. +L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能. diff --git a/docs/api/layer/heatmap_layer/grid.zh.md b/docs/api/layer/heatmap_layer/grid.zh.md new file mode 100644 index 0000000000..04b2d4a469 --- /dev/null +++ b/docs/api/layer/heatmap_layer/grid.zh.md @@ -0,0 +1,4 @@ +--- +title: 网格热力图 +order: 1 +--- diff --git a/docs/api/layer/heatmap.en.md b/docs/api/layer/heatmap_layer/heatmap.en.md similarity index 99% rename from docs/api/layer/heatmap.en.md rename to docs/api/layer/heatmap_layer/heatmap.en.md index 03eed2228e..cf0467308c 100644 --- a/docs/api/layer/heatmap.en.md +++ b/docs/api/layer/heatmap_layer/heatmap.en.md @@ -1,6 +1,6 @@ --- title: HeatmapLayer -order: 5 +order: 0 --- # heatmapLayer diff --git a/docs/api/layer/heatmap.zh.md b/docs/api/layer/heatmap_layer/heatmap.zh.md similarity index 99% rename from docs/api/layer/heatmap.zh.md rename to docs/api/layer/heatmap_layer/heatmap.zh.md index 03ab83a547..31b904c844 100644 --- a/docs/api/layer/heatmap.zh.md +++ b/docs/api/layer/heatmap_layer/heatmap.zh.md @@ -1,6 +1,6 @@ --- title: HeatmapLayer -order: 5 +order: 0 --- # heatmapLayer diff --git a/docs/api/layer/heatmap_layer/hexagon.zh.md b/docs/api/layer/heatmap_layer/hexagon.zh.md new file mode 100644 index 0000000000..1c2ea2e41b --- /dev/null +++ b/docs/api/layer/heatmap_layer/hexagon.zh.md @@ -0,0 +1,4 @@ +--- +title: 蜂窝热力图 +order: 1 +--- diff --git a/docs/api/layer/heatmap_layer/normal.zh.md b/docs/api/layer/heatmap_layer/normal.zh.md new file mode 100644 index 0000000000..d02b948d70 --- /dev/null +++ b/docs/api/layer/heatmap_layer/normal.zh.md @@ -0,0 +1,4 @@ +--- +title: 经典热力图 +order: 1 +--- diff --git a/docs/api/layer/imagelayer.en.md b/docs/api/layer/image_layer/imagelayer.en.md similarity index 100% rename from docs/api/layer/imagelayer.en.md rename to docs/api/layer/image_layer/imagelayer.en.md diff --git a/docs/api/layer/imagelayer.zh.md b/docs/api/layer/image_layer/imagelayer.zh.md similarity index 100% rename from docs/api/layer/imagelayer.zh.md rename to docs/api/layer/image_layer/imagelayer.zh.md diff --git a/docs/api/layer/layer.zh.md b/docs/api/layer/layer.zh.md index 5b2be78088..dd75034d6a 100644 --- a/docs/api/layer/layer.zh.md +++ b/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 + +图层移除时触发 diff --git a/docs/api/layer/line_layer/arc.zh.md b/docs/api/layer/line_layer/arc.zh.md new file mode 100644 index 0000000000..fc32fe1c10 --- /dev/null +++ b/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, + }); +``` diff --git a/docs/api/layer/linelayer.en.md b/docs/api/layer/line_layer/linelayer.en.md similarity index 100% rename from docs/api/layer/linelayer.en.md rename to docs/api/layer/line_layer/linelayer.en.md diff --git a/docs/api/layer/linelayer.zh.md b/docs/api/layer/line_layer/linelayer.zh.md similarity index 99% rename from docs/api/layer/linelayer.zh.md rename to docs/api/layer/line_layer/linelayer.zh.md index 5a9c25e21c..7f04671c9d 100644 --- a/docs/api/layer/linelayer.zh.md +++ b/docs/api/layer/line_layer/linelayer.zh.md @@ -1,6 +1,6 @@ --- title: LineLayer -order: 2 +order: 0 --- ## 线图层 diff --git a/docs/api/layer/line_layer/path.zh.md b/docs/api/layer/line_layer/path.zh.md new file mode 100644 index 0000000000..7590d945f2 --- /dev/null +++ b/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('',[]) +``` + diff --git a/docs/api/layer/point_layer/bubble.en.md b/docs/api/layer/point_layer/bubble.en.md new file mode 100644 index 0000000000..0911915fec --- /dev/null +++ b/docs/api/layer/point_layer/bubble.en.md @@ -0,0 +1,4 @@ +--- +title: bubble +order: 1 +--- diff --git a/docs/api/layer/point_layer/bubble.zh.md b/docs/api/layer/point_layer/bubble.zh.md new file mode 100644 index 0000000000..1c40c140d9 --- /dev/null +++ b/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, 默认于气泡的填充色相同 + + diff --git a/docs/api/layer/point_layer/chart.en.md b/docs/api/layer/point_layer/chart.en.md new file mode 100644 index 0000000000..cd6d08e893 --- /dev/null +++ b/docs/api/layer/point_layer/chart.en.md @@ -0,0 +1,5 @@ +--- +title: 复合图表地图 +order: 6 +--- +使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等 diff --git a/docs/api/layer/point_layer/chart.zh.md b/docs/api/layer/point_layer/chart.zh.md new file mode 100644 index 0000000000..cd6d08e893 --- /dev/null +++ b/docs/api/layer/point_layer/chart.zh.md @@ -0,0 +1,5 @@ +--- +title: 复合图表地图 +order: 6 +--- +使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等 diff --git a/docs/api/layer/point_layer/cluster.en.md b/docs/api/layer/point_layer/cluster.en.md new file mode 100644 index 0000000000..d8cd791560 --- /dev/null +++ b/docs/api/layer/point_layer/cluster.en.md @@ -0,0 +1,9 @@ +--- +title: 聚合图 +order: 5 +--- + + +##使用 + +目前只有点图层支持聚类方法 diff --git a/docs/api/layer/point_layer/cluster.zh.md b/docs/api/layer/point_layer/cluster.zh.md new file mode 100644 index 0000000000..e61f0e4fc5 --- /dev/null +++ b/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, + }); +``` + + + diff --git a/docs/api/layer/point_layer/column.zh.md b/docs/api/layer/point_layer/column.zh.md new file mode 100644 index 0000000000..589adecad6 --- /dev/null +++ b/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 + }); +``` diff --git a/docs/api/layer/point_layer/dot.en.md b/docs/api/layer/point_layer/dot.en.md new file mode 100644 index 0000000000..be0809b75b --- /dev/null +++ b/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) diff --git a/docs/api/layer/point_layer/dot.zh.md b/docs/api/layer/point_layer/dot.zh.md new file mode 100644 index 0000000000..be0809b75b --- /dev/null +++ b/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) diff --git a/docs/api/layer/point_layer/marker.en.md b/docs/api/layer/point_layer/marker.en.md new file mode 100644 index 0000000000..fd22bcf63f --- /dev/null +++ b/docs/api/layer/point_layer/marker.en.md @@ -0,0 +1,9 @@ +--- +title: 自定义 Marker +order: 7 +--- +可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。 + +## 使用 + +[Marker 文档](../../component) diff --git a/docs/api/layer/point_layer/marker.zh.md b/docs/api/layer/point_layer/marker.zh.md new file mode 100644 index 0000000000..59af362de6 --- /dev/null +++ b/docs/api/layer/point_layer/marker.zh.md @@ -0,0 +1,8 @@ +--- +title: 自定义 Marker +order: 7 +--- +可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。 + +## 使用 +[Marker 文档](../../component) diff --git a/docs/api/layer/pointlayer.en.md b/docs/api/layer/point_layer/pointlayer.en.md similarity index 99% rename from docs/api/layer/pointlayer.en.md rename to docs/api/layer/point_layer/pointlayer.en.md index 5804e506b9..17322441cc 100644 --- a/docs/api/layer/pointlayer.en.md +++ b/docs/api/layer/point_layer/pointlayer.en.md @@ -1,6 +1,6 @@ --- title: PointLayer -order: 1 +order: 0 --- # PointLayer diff --git a/docs/api/layer/pointlayer.zh.md b/docs/api/layer/point_layer/pointlayer.zh.md similarity index 99% rename from docs/api/layer/pointlayer.zh.md rename to docs/api/layer/point_layer/pointlayer.zh.md index 5dc8c8f83a..e8006f6ade 100644 --- a/docs/api/layer/pointlayer.zh.md +++ b/docs/api/layer/point_layer/pointlayer.zh.md @@ -1,6 +1,6 @@ --- title: PointLayer -order: 1 +order: 0 --- # PointLayer diff --git a/docs/api/layer/point_layer/scatter.zh.md b/docs/api/layer/point_layer/scatter.zh.md new file mode 100644 index 0000000000..9ee1fac6de --- /dev/null +++ b/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 + }) +``` diff --git a/docs/api/layer/point_layer/symbol.en.md b/docs/api/layer/point_layer/symbol.en.md new file mode 100644 index 0000000000..12cd00642b --- /dev/null +++ b/docs/api/layer/point_layer/symbol.en.md @@ -0,0 +1,4 @@ +--- +title: 符号图 +order: 4 +--- diff --git a/docs/api/layer/point_layer/symbol.zh.md b/docs/api/layer/point_layer/symbol.zh.md new file mode 100644 index 0000000000..c0c8730ab5 --- /dev/null +++ b/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 diff --git a/docs/api/layer/polygon_layer/extrude.zh.md b/docs/api/layer/polygon_layer/extrude.zh.md new file mode 100644 index 0000000000..c27cfc5eef --- /dev/null +++ b/docs/api/layer/polygon_layer/extrude.zh.md @@ -0,0 +1,4 @@ +--- +title: 3D填充图 +order: 1 +--- diff --git a/docs/api/layer/polygon_layer/fill.zh.md b/docs/api/layer/polygon_layer/fill.zh.md new file mode 100644 index 0000000000..afba1bfa88 --- /dev/null +++ b/docs/api/layer/polygon_layer/fill.zh.md @@ -0,0 +1,4 @@ +--- +title: 填充图 +order: 1 +--- diff --git a/docs/api/layer/polygonlayer.en.md b/docs/api/layer/polygon_layer/polygonlayer.en.md similarity index 98% rename from docs/api/layer/polygonlayer.en.md rename to docs/api/layer/polygon_layer/polygonlayer.en.md index dfe5238b6a..91688b3e0e 100644 --- a/docs/api/layer/polygonlayer.en.md +++ b/docs/api/layer/polygon_layer/polygonlayer.en.md @@ -1,6 +1,6 @@ --- title: PolygonLayer -order: 3 +order: 0 --- # 填充图 diff --git a/docs/api/layer/polygonlayer.zh.md b/docs/api/layer/polygon_layer/polygonlayer.zh.md similarity index 98% rename from docs/api/layer/polygonlayer.zh.md rename to docs/api/layer/polygon_layer/polygonlayer.zh.md index dfe5238b6a..91688b3e0e 100644 --- a/docs/api/layer/polygonlayer.zh.md +++ b/docs/api/layer/polygon_layer/polygonlayer.zh.md @@ -1,6 +1,6 @@ --- title: PolygonLayer -order: 3 +order: 0 --- # 填充图 diff --git a/docs/api/map.en.md b/docs/api/map.en.md new file mode 100644 index 0000000000..fcc8748431 --- /dev/null +++ b/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, + }), +}); +``` diff --git a/docs/api/map.zh.md b/docs/api/map.zh.md new file mode 100644 index 0000000000..26a06120e7 --- /dev/null +++ b/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, + }), +}); +``` diff --git a/docs/api/scene.en.md b/docs/api/scene.en.md index 314e909838..ad50dc22bd 100644 --- a/docs/api/scene.en.md +++ b/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** - - - +**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') - -// AMap -scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true') +scene.setMapStyle('mapbox://styles/mapbox/streets-v11'); +// AMap +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方向移动地图 -```javascript -scene.panBy(x,y) -``` -参数：
`x` {number} 水平方向移动像素 向右为正方向
      `y` {number} 垂直方向移动像素 向下为正方向 +以像素为单位沿 X 方向和 Y 方向移动地图 + +```javascript +scene.panBy(x, y); +``` + +参数：
`x` {number} 水平方向移动像素 向右为正方向
      `y` {number} 垂直方向移动像素 向下为正方向 ### setPitch + 设置地图仰俯角度 + ```javascript -scene.setPitch(pitch) +scene.setPitch(pitch); ``` -参数 :
   `pitch` {number} - +参数 :
   `pitch` {number} ### fitBounds + 地图缩放到某个范围内
参数 :
  `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} 事件名
`hander` {function } 事件回调函数 +`eventName` {string} 事件名
`hander` {function } 事件回调函数 ### off -移除事件监听
`eventName` {string} 事件名
`hander` {function } 事件回调函数 +移除事件监听
`eventName` {string} 事件名
`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', () => {}); // 地图容器大小改变事件 ``` - - diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md index 1bbbb1c249..4efa83c4d5 100644 --- a/docs/api/scene.zh.md +++ b/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** - - - +**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') - -// AMap -scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true') +scene.setMapStyle('mapbox://styles/mapbox/streets-v11'); +// AMap +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} 事件名
`hander` {function } 事件回调函数 +`eventName` {string} 事件名
`hander` {function } 事件回调函数 ### off -移除事件监听
`eventName` {string} 事件名
`hander` {function } 事件回调函数 +移除事件监听
`eventName` {string} 事件名
`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', () => {}); // 地图容器大小改变事件 ``` - - diff --git a/docs/tutorial/map/amap.en.md b/docs/tutorial/map/amap.en.md index 728c994be2..af2cd5921e 100644 --- a/docs/tutorial/map/amap.en.md +++ b/docs/tutorial/map/amap.en.md @@ -18,7 +18,7 @@ order: 0 2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token ```html - + ``` ### 添加div 标签指定地图容器 @@ -106,7 +106,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
- + + ``` ### 添加div 标签指定地图容器 @@ -106,7 +106,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
- + + ``` @@ -118,7 +118,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') - + + ``` @@ -116,7 +116,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') - + ``` diff --git a/docs/tutorial/quickstart.zh.md b/docs/tutorial/quickstart.zh.md index f8edaff8e0..3abbd8aec5 100644 --- a/docs/tutorial/quickstart.zh.md +++ b/docs/tutorial/quickstart.zh.md @@ -20,7 +20,7 @@ Include the L7 JS JavaScript of your HTML file. ```html - ``` @@ -156,4 +156,7 @@ export default class AMapExample extends React.Component { 更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories) -### Vue 欢迎补充 \ No newline at end of file +### Vue 欢迎补充 +[1.x Vue 使用](https://codesandbox.io/s/l7-vue1xdemo-wknsz) +### Html +[2.0版本 HTML 使用模板](https://codesandbox.io/s/l7htmltemplate-vp2lp) diff --git a/examples/gallery/basic/demo/bus_dark.js b/examples/gallery/basic/demo/bus_dark.js index f93a386b80..dd04be4a47 100644 --- a/examples/gallery/basic/demo/bus_dark.js +++ b/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'; diff --git a/examples/line/path/demo/bus_dark.js b/examples/line/path/demo/bus_dark.js index 95b40e2686..99f18a9e78 100644 --- a/examples/line/path/demo/bus_dark.js +++ b/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'; diff --git a/examples/line/path/demo/bus_light.js b/examples/line/path/demo/bus_light.js index 693331944f..4df4774e4c 100644 --- a/examples/line/path/demo/bus_light.js +++ b/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'; diff --git a/examples/point/dot/demo/meta.json b/examples/point/dot/demo/meta.json new file mode 100644 index 0000000000..998543128d --- /dev/null +++ b/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" + } + + ] +} diff --git a/examples/point/scatter/demo/normal.js b/examples/point/dot/demo/normal.js similarity index 100% rename from examples/point/scatter/demo/normal.js rename to examples/point/dot/demo/normal.js diff --git a/examples/point/scatter/demo/normal2.js b/examples/point/dot/demo/normal2.js similarity index 100% rename from examples/point/scatter/demo/normal2.js rename to examples/point/dot/demo/normal2.js diff --git a/examples/point/dot/index.en.md b/examples/point/dot/index.en.md new file mode 100644 index 0000000000..e60275da5b --- /dev/null +++ b/examples/point/dot/index.en.md @@ -0,0 +1,4 @@ +--- +title: Dot Intensity +order: 1 +--- diff --git a/examples/point/dot/index.zh.md b/examples/point/dot/index.zh.md new file mode 100644 index 0000000000..b28d7a59de --- /dev/null +++ b/examples/point/dot/index.zh.md @@ -0,0 +1,4 @@ +--- +title: "亮度图" +order: 1 +--- diff --git a/examples/point/scatter/demo/meta.json b/examples/point/scatter/demo/meta.json index 998543128d..27d083e3d6 100644 --- a/examples/point/scatter/demo/meta.json +++ b/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" + } ] diff --git a/examples/point/scatter/demo/scatter.js b/examples/point/scatter/demo/scatter.js new file mode 100644 index 0000000000..f09afbfdce --- /dev/null +++ b/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); + }); diff --git a/examples/tutorial/map/demo/amapInstance.js b/examples/tutorial/map/demo/amapInstance.js new file mode 100644 index 0000000000..25ce7fd595 --- /dev/null +++ b/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 + }) +}); diff --git a/gatsby-config.js b/gatsby-config.js index f976cb8748..4ff2fb5995 100644 --- a/gatsby-config.js +++ b/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: { diff --git a/lerna.json b/lerna.json index 090b66a0af..34f082bceb 100644 --- a/lerna.json +++ b/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": { diff --git a/package.json b/package.json index d33c0c0cce..efb11b37c7 100644 --- a/package.json +++ b/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", diff --git a/packages/component/CHANGELOG.md b/packages/component/CHANGELOG.md index b7063fb713..81545c644b 100644 --- a/packages/component/CHANGELOG.md +++ b/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 diff --git a/packages/component/package.json b/packages/component/package.json index 497311b3e3..72234a41b3 100644 --- a/packages/component/package.json +++ b/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": { diff --git a/packages/component/src/control/layer.ts b/packages/component/src/control/layer.ts index 8235c70443..4a4aa75e12 100644 --- a/packages/component/src/control/layer.ts +++ b/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); } } diff --git a/packages/component/src/popup.ts b/packages/component/src/popup.ts index b72653a452..76fee84a81 100644 --- a/packages/component/src/popup.ts +++ b/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; diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index b86ab997ee..b9b07d8678 100644 --- a/packages/core/CHANGELOG.md +++ b/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) diff --git a/packages/core/package.json b/packages/core/package.json index aac86a025d..da1ba2b47d 100644 --- a/packages/core/package.json +++ b/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" }, diff --git a/packages/core/src/services/component/PopupService.ts b/packages/core/src/services/component/PopupService.ts index cdde3d992b..49080d4179 100644 --- a/packages/core/src/services/component/PopupService.ts +++ b/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; } diff --git a/packages/core/src/services/config/ConfigService.ts b/packages/core/src/services/config/ConfigService.ts index 0b76770525..55c3c43a62 100644 --- a/packages/core/src/services/config/ConfigService.ts +++ b/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 = { 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) { this.sceneConfigCache[sceneId] = { ...defaultSceneConfig, diff --git a/packages/core/src/services/config/IConfigService.ts b/packages/core/src/services/config/IConfigService.ts index ccb657264f..13296339b4 100644 --- a/packages/core/src/services/config/IConfigService.ts +++ b/packages/core/src/services/config/IConfigService.ts @@ -41,6 +41,11 @@ export interface IGlobalConfigService { getLayerConfig( layerId: string, ): Partial; + /** + * 获取警告信息 + * @param key + */ + getSceneWarninfo(layerId: string): string; /** * 设置图层配置项，继承所属场景配置项 diff --git a/packages/core/src/services/config/warnInfo.ts b/packages/core/src/services/config/warnInfo.ts new file mode 100644 index 0000000000..345a506278 --- /dev/null +++ b/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; diff --git a/packages/core/src/services/interaction/IInteractionService.ts b/packages/core/src/services/interaction/IInteractionService.ts index ed351c574e..396021e854 100644 --- a/packages/core/src/services/interaction/IInteractionService.ts +++ b/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): void; + triggerSelect(id: number): void; + triggerActive(id: number): void; } diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts index add63327e4..82be0ee533 100644 --- a/packages/core/src/services/interaction/InteractionService.ts +++ b/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 }); }; } diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index c3164a439a..e0e6eaf9f7 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/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; +} 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; afterPickingEncode: SyncHook; beforeHighlight: SyncHook<[number[]]>; + beforeSelect: SyncHook<[number[]]>; + afterSelect: SyncHook; afterHighlight: SyncHook; beforeDestroy: SyncHook; afterDestroy: SyncHook; @@ -86,6 +104,8 @@ export interface ILayer { getLayerConfig(): Partial; getContainer(): Container; setContainer(container: Container): void; + setCurrentPickId(id: number | null): void; + getCurrentPickId(): number | null; buildLayerModel( options: ILayerModelInitializationOptions & Partial, @@ -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; @@ -198,10 +221,13 @@ export interface ILayerConfig { * 开启高亮 */ enableHighlight: boolean; + + enableSelect: boolean; /** * 高亮颜色 */ highlightColor: string | number[]; + selectColor: string | number[]; active: boolean; activeColor: string | number[]; /** diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index d2afaebf07..fa9125e758 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/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(); } diff --git a/packages/core/src/services/log/LogService.ts b/packages/core/src/services/log/LogService.ts index 3deb2005ec..e648b11c28 100644 --- a/packages/core/src/services/log/LogService.ts +++ b/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 { diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index 6d6c26249c..8491d24a10 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -51,6 +51,7 @@ export interface IMapService { 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 { + /** + * 地图实例 + */ + mapInstance?: RawMap; /** * 容器 DOM id */ - id: string; + id: string | HTMLDivElement; /** * 地图 diff --git a/packages/core/src/services/renderer/IModel.ts b/packages/core/src/services/renderer/IModel.ts index 10eb40de0e..0ae015ddc2 100644 --- a/packages/core/src/services/renderer/IModel.ts +++ b/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; /** * stencil @@ -221,6 +231,8 @@ export interface IModelDrawOptions { [key: string]: IAttribute; }; elements?: IElements; + + blend?: IBlendOptions; } /** diff --git a/packages/core/src/services/renderer/gl.ts b/packages/core/src/services/renderer/gl.ts index 37bdcd96b4..8238266d07 100644 --- a/packages/core/src/services/renderer/gl.ts +++ b/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, diff --git a/packages/core/src/services/renderer/passes/BaseNormalPass.ts b/packages/core/src/services/renderer/passes/BaseNormalPass.ts index 048c187775..384586e928 100644 --- a/packages/core/src/services/renderer/passes/BaseNormalPass.ts +++ b/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 protected rendererService: IRendererService; protected cameraService: ICameraService; + protected mapService: IMapService; protected interactionService: IInteractionService; protected layerService: ILayerService; @@ -38,6 +43,7 @@ export default class BaseNormalPass this.cameraService = layer .getContainer() .get(TYPES.ICameraService); + this.mapService = layer.getContainer().get(TYPES.IMapService); this.interactionService = layer .getContainer() .get(TYPES.IInteractionService); diff --git a/packages/core/src/services/renderer/passes/PixelPickingPass.ts b/packages/core/src/services/renderer/passes/PixelPickingPass.ts index a9c50ee8d7..83419a005a 100644 --- a/packages/core/src/services/renderer/passes/PixelPickingPass.ts +++ b/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) { + const pickedColors = encodePickingColor(featureId as number); + this.selectFeature(new Uint8Array(pickedColors)); + } + + private highlightFeatureHander({ featureId }: Partial) { + const pickedColors = encodePickingColor(featureId as number); + this.highlightPickedFeature(new Uint8Array(pickedColors)); + } } diff --git a/packages/core/src/services/scene/ISceneService.ts b/packages/core/src/services/scene/ISceneService.ts index 373238cf55..372aa824ef 100644 --- a/packages/core/src/services/scene/ISceneService.ts +++ b/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 事件 diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 5813ed1e3e..acdbb76b78 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/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; diff --git a/packages/core/src/services/source/ISourceService.ts b/packages/core/src/services/source/ISourceService.ts index 71d3ebbce9..141ddee37a 100644 --- a/packages/core/src/services/source/ISourceService.ts +++ b/packages/core/src/services/source/ISourceService.ts @@ -63,6 +63,8 @@ export interface ISource { clusterOptions: Partial; updateClusterData(zoom: number): void; getFeatureById(id: number): unknown; + getClusters(zoom: number): any; + getClustersLeaves(id: number): any; } export interface IRasterCfg { extent: [number, number, number, number]; diff --git a/packages/l7/CHANGELOG.md b/packages/l7/CHANGELOG.md index dafabcfb93..b64cb4945b 100644 --- a/packages/l7/CHANGELOG.md +++ b/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 diff --git a/packages/l7/package.json b/packages/l7/package.json index 7f9876aa65..9123cbe99e 100644 --- a/packages/l7/package.json +++ b/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": { diff --git a/packages/layers/CHANGELOG.md b/packages/layers/CHANGELOG.md index 567e7cb372..43bb0f531a 100644 --- a/packages/layers/CHANGELOG.md +++ b/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) diff --git a/packages/layers/package.json b/packages/layers/package.json index 85ad35fec0..621dd6a724 100644 --- a/packages/layers/package.json +++ b/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": { diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index d70a1f20be..4a8f213200 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/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 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 extends EventEmitter afterPickingEncode: new SyncHook(), beforeHighlight: new SyncHook<[number[]]>(['pickedColor']), afterHighlight: new SyncHook(), + beforeSelect: new SyncHook<[number[]]>(['pickedColor']), + afterSelect: new SyncHook(), beforeDestroy: new SyncHook(), afterDestroy: new SyncHook(), }; @@ -142,6 +146,8 @@ export default class BaseLayer extends EventEmitter private configSchema: object; + private currentPickId: number | null = null; + private rawConfig: Partial; private needUpdateConfig: Partial; @@ -159,8 +165,9 @@ export default class BaseLayer extends EventEmitter private scaleOptions: IScaleOptions = {}; - constructor(config: Partial) { + constructor(config: Partial = {}) { super(); + this.name = config.name || this.id; this.rawConfig = config; } @@ -214,7 +221,7 @@ export default class BaseLayer extends EventEmitter public init() { // 设置配置项 const sceneId = this.container.get(TYPES.SceneID); - this.configService.setLayerConfig(sceneId, this.id, this.rawConfig); + this.configService.setLayerConfig(sceneId, this.id, {}); // 全局容器服务 this.iconService = this.container.get(TYPES.IIconService); @@ -291,10 +298,15 @@ export default class BaseLayer 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 extends EventEmitter } public active(options: IActiveOption) { - this.updateLayerConfig({ - enableHighlight: isObject(options) ? true : options, - highlightColor: isObject(options) - ? options.color - : this.getLayerConfig().highlightColor, - }); + const activeOption: Partial = {}; + 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 extends EventEmitter ? options.color : this.getLayerConfig().highlightColor, }); + this.interactionService.triggerActive(id); } } public select(option: IActiveOption | false): ILayer { + const activeOption: Partial = {}; + 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 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 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 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 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[], diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index 994f208b42..e90c8f0d7e 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/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 + implements ILayerModel { public triangulation: Triangulation; protected layer: ILayer; @@ -54,7 +58,13 @@ export default class BaseModel implements ILayerModel { .get(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.'); } diff --git a/packages/layers/src/heatmap/index.ts b/packages/layers/src/heatmap/index.ts index d350dda55d..0569550ee7 100644 --- a/packages/layers/src/heatmap/index.ts +++ b/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 { - public name: string = 'HeatMapLayer'; +export default class HeatMapLayer extends BaseLayer { + public type: string = 'HeatMapLayer'; protected getConfigSchema() { return { properties: { @@ -37,7 +37,7 @@ export default class HeatMapLayer extends BaseLayer { this.layerModel = new HeatMapModels[shape](this); this.models = this.layerModel.buildModels(); } - private getModelType(): HeatMapModelType { + protected getModelType(): HeatMapModelType { const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute( 'shape', ); diff --git a/packages/layers/src/heatmap/models/heatmap.ts b/packages/layers/src/heatmap/models/heatmap.ts index 48d7ccdada..9487b00b43 100644 --- a/packages/layers/src/heatmap/models/heatmap.ts +++ b/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'; diff --git a/packages/layers/src/line/dash.ts b/packages/layers/src/line/dash.ts index 2154e03a9f..7eca2e28f0 100644 --- a/packages/layers/src/line/dash.ts +++ b/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', diff --git a/packages/layers/src/line/index.ts b/packages/layers/src/line/index.ts index f46c4270b5..2daa0fbce6 100644 --- a/packages/layers/src/line/index.ts +++ b/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 { - public name: string = 'LineLayer'; +interface ILineLayerStyleOptions { + opacity: number; + lineType?: keyof typeof LineType; + dashArray?: [number, number]; +} +export default class LineLayer extends BaseLayer { + public type: string = 'LineLayer'; private animateStartTime: number = 0; @@ -34,7 +40,7 @@ export default class LineLayer extends BaseLayer { this.layerModel = new LineModels[shape](this); this.models = this.layerModel.buildModels(); } - private getModelType(): LineModelType { + protected getModelType(): LineModelType { const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute( 'shape', ); diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts index 5b574f2da8..9cc28bfc00 100644 --- a/packages/layers/src/line/models/line.ts +++ b/packages/layers/src/line/models/line.ts @@ -42,6 +42,7 @@ export default class LineModel extends BaseModel { ]; } protected registerBuiltinAttributes() { + // const lineType = this // point layer size; this.styleAttributeService.registerStyleAttribute({ name: 'size', diff --git a/packages/layers/src/line/shaders/line_dash_vert.glsl b/packages/layers/src/line/shaders/line_dash_vert.glsl index 43f0332b00..ec7c3590d6 100644 --- a/packages/layers/src/line/shaders/line_dash_vert.glsl +++ b/packages/layers/src/line/shaders/line_dash_vert.glsl @@ -8,6 +8,7 @@ attribute vec3 a_Position; attribute float a_Distance; uniform mat4 u_ModelMatrix; uniform vec2 u_dash_array: [10.0, 5.]; +uniform float u_line_type: 0.0; uniform float u_dash_offset: 0; varying vec4 v_color; @@ -21,6 +22,7 @@ varying float v_distance_ratio; #pragma include "projection" void main() { + v_distance_ratio = a_Distance / a_Total_Distance; v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance; diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index bd7a897893..8123bb6604 100644 --- a/packages/layers/src/plugins/DataMappingPlugin.ts +++ b/packages/layers/src/plugins/DataMappingPlugin.ts @@ -9,8 +9,8 @@ import { IStyleAttributeService, TYPES, } from '@antv/l7-core'; +import { rgb2arr } from '@antv/l7-utils'; import { inject, injectable } from 'inversify'; -import { rgb2arr } from '../utils/color'; @injectable() export default class DataMappingPlugin implements ILayerPlugin { diff --git a/packages/layers/src/plugins/DataSourcePlugin.ts b/packages/layers/src/plugins/DataSourcePlugin.ts index e99b486125..371fe51bb2 100644 --- a/packages/layers/src/plugins/DataSourcePlugin.ts +++ b/packages/layers/src/plugins/DataSourcePlugin.ts @@ -10,19 +10,24 @@ export default class DataSourcePlugin implements ILayerPlugin { layer.hooks.init.tap('DataSourcePlugin', () => { const { data, options } = layer.sourceOption; layer.setSource(new Source(data, options)); + this.updateClusterData(layer); }); // 检测数据是不否需要更新 layer.hooks.beforeRenderData.tap('DataSourcePlugin', (flag) => { - const source = layer.getSource(); - const cluster = source.cluster; - const { zoom = 0, maxZoom = 16 } = source.clusterOptions; - const newZoom = this.mapService.getZoom(); - if (cluster && Math.abs(zoom - newZoom) > 1 && maxZoom > zoom) { - source.updateClusterData(Math.floor(newZoom) + 1); - return true; - } - return false; + return this.updateClusterData(layer); }); } + + private updateClusterData(layer: ILayer): boolean { + const source = layer.getSource(); + const cluster = source.cluster; + const { zoom = 0, maxZoom = 16 } = source.clusterOptions; + const newZoom = this.mapService.getZoom() - 1; + if (cluster && Math.abs(zoom - newZoom) > 1 && maxZoom > zoom) { + source.updateClusterData(Math.floor(newZoom)); + return true; + } + return false; + } } diff --git a/packages/layers/src/plugins/LayerStylePlugin.ts b/packages/layers/src/plugins/LayerStylePlugin.ts index c6d3915604..9b61ae1bbc 100644 --- a/packages/layers/src/plugins/LayerStylePlugin.ts +++ b/packages/layers/src/plugins/LayerStylePlugin.ts @@ -1,7 +1,7 @@ import { ILayer, ILayerPlugin, IMapService, TYPES } from '@antv/l7-core'; import Source from '@antv/l7-source'; +import { encodePickingColor, rgb2arr } from '@antv/l7-utils'; import { injectable } from 'inversify'; -import { encodePickingColor, rgb2arr } from '../utils/color'; @injectable() export default class LayerStylePlugin implements ILayerPlugin { public apply(layer: ILayer) { diff --git a/packages/layers/src/plugins/PixelPickingPlugin.ts b/packages/layers/src/plugins/PixelPickingPlugin.ts index 3afd3f0387..6e51cdd563 100644 --- a/packages/layers/src/plugins/PixelPickingPlugin.ts +++ b/packages/layers/src/plugins/PixelPickingPlugin.ts @@ -7,8 +7,8 @@ import { IRendererService, IStyleAttributeService, } from '@antv/l7-core'; +import { encodePickingColor, rgb2arr } from '@antv/l7-utils'; import { injectable } from 'inversify'; -import { encodePickingColor, rgb2arr } from '../utils/color'; const PickingStage = { NONE: 0.0, @@ -95,6 +95,24 @@ export default class PixelPickingPlugin implements ILayerPlugin { ); }, ); + + layer.hooks.beforeSelect.tap( + 'PixelPickingPlugin', + (pickedColor: number[]) => { + const { selectColor } = layer.getLayerConfig(); + const highlightColorInArray = + typeof selectColor === 'string' + ? rgb2arr(selectColor) + : selectColor || [1, 0, 0, 1]; + layer.models.forEach((model) => + model.addUniforms({ + u_PickingStage: PickingStage.HIGHLIGHT, + u_PickingColor: pickedColor, + u_HighlightColor: highlightColorInArray.map((c) => c * 255), + }), + ); + }, + ); // } } } diff --git a/packages/layers/src/point/index.ts b/packages/layers/src/point/index.ts index 4215b9e774..232d05edde 100644 --- a/packages/layers/src/point/index.ts +++ b/packages/layers/src/point/index.ts @@ -7,7 +7,7 @@ interface IPointLayerStyleOptions { strokeColor: string; } export default class PointLayer extends BaseLayer { - public name: string = 'PointLayer'; + public type: string = 'PointLayer'; protected getConfigSchema() { return { properties: { @@ -19,6 +19,19 @@ export default class PointLayer extends BaseLayer { }, }; } + protected getDefaultConfig() { + const type = this.getModelType(); + const defaultConfig = { + normal: { + blend: 'additive', + }, + fill: {}, + extrude: {}, + image: {}, + text: {}, + }; + return defaultConfig[type]; + } protected renderModels() { if (this.layerModelNeedUpdate) { this.models = this.layerModel.buildModels(); @@ -38,7 +51,7 @@ export default class PointLayer extends BaseLayer { this.models = this.layerModel.buildModels(); } - private getModelType(): PointType { + protected getModelType(): PointType { // pointlayer // 2D、 3d、 shape、image、text、normal、 const layerData = this.getEncodedData(); @@ -51,6 +64,9 @@ export default class PointLayer extends BaseLayer { return 'normal'; } else { const shape = item.shape; + if (shape === 'dot') { + return 'normal'; + } if (shape2d?.indexOf(shape as string) !== -1) { return 'fill'; } diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index d87821a542..0b068eb6ca 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -7,9 +7,9 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; +import { rgb2arr } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { PointFillTriangulation } from '../../core/triangulation'; -import { rgb2arr } from '../../utils/color'; import pointFillFrag from '../shaders/fill_frag.glsl'; import pointFillVert from '../shaders/fill_vert.glsl'; interface IPointLayerStyleOptions { diff --git a/packages/layers/src/point/models/image.ts b/packages/layers/src/point/models/image.ts index b3878a62b5..1b35976989 100644 --- a/packages/layers/src/point/models/image.ts +++ b/packages/layers/src/point/models/image.ts @@ -11,7 +11,7 @@ import BaseModel from '../../core/BaseModel'; import { PointImageTriangulation } from '../../core/triangulation'; import pointImageFrag from '../shaders/image_frag.glsl'; import pointImageVert from '../shaders/image_vert.glsl'; -interface IPointLayerStyleOptions { +interface IImageLayerStyleOptions { opacity: number; } @@ -19,7 +19,7 @@ export default class ImageModel extends BaseModel { private texture: ITexture2D; public getUninforms(): IModelUniform { - const { opacity } = this.layer.getLayerConfig() as IPointLayerStyleOptions; + const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions; return { u_opacity: opacity || 1.0, u_texture: this.texture, diff --git a/packages/layers/src/point/models/normal.ts b/packages/layers/src/point/models/normal.ts index 9b3f9a2cc8..4dd82398a9 100644 --- a/packages/layers/src/point/models/normal.ts +++ b/packages/layers/src/point/models/normal.ts @@ -1,16 +1,18 @@ import { AttributeType, + BlendType, gl, IEncodeFeature, + ILayerConfig, IModel, IModelUniform, } from '@antv/l7-core'; +import { rgb2arr } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; -import { rgb2arr } from '../../utils/color'; +import { BlendTypes } from '../../utils/blend'; import normalFrag from '../shaders/normal_frag.glsl'; import normalVert from '../shaders/normal_vert.glsl'; - interface IPointLayerStyleOptions { opacity: number; strokeWidth: number; @@ -26,6 +28,11 @@ export function PointTriangulation(feature: IEncodeFeature) { } export default class NormalModel extends BaseModel { + public getDefaultStyle(): Partial { + return { + blend: 'additive', + }; + } public getUninforms(): IModelUniform { const { opacity = 1, @@ -38,7 +45,6 @@ export default class NormalModel extends BaseModel { u_stroke_color: rgb2arr(strokeColor), }; } - public buildModels(): IModel[] { return [ this.layer.buildLayerModel({ @@ -48,15 +54,7 @@ export default class NormalModel extends BaseModel { triangulation: PointTriangulation, depth: { enable: false }, primitive: gl.POINTS, - blend: { - enable: true, - func: { - srcRGB: gl.ONE, - srcAlpha: 1, - dstRGB: gl.ONE, - dstAlpha: 1, - }, - }, + blend: this.getBlend(), }), ]; } @@ -87,4 +85,11 @@ export default class NormalModel extends BaseModel { }, }); } + private defaultStyleOptions(): Partial< + IPointLayerStyleOptions & ILayerConfig + > { + return { + blend: BlendType.additive, + }; + } } diff --git a/packages/layers/src/point/text.ts b/packages/layers/src/point/text.ts index 1e68a913e3..becc151b72 100644 --- a/packages/layers/src/point/text.ts +++ b/packages/layers/src/point/text.ts @@ -26,7 +26,7 @@ export function PointTriangulation(feature: IEncodeFeature) { }; } export default class TextLayer extends BaseLayer { - public name: string = 'PointLayer'; + public type: string = 'PointLayer'; protected getConfigSchema() { return { diff --git a/packages/layers/src/polygon/index.ts b/packages/layers/src/polygon/index.ts index 9957cfbfde..55e46cd1b3 100644 --- a/packages/layers/src/polygon/index.ts +++ b/packages/layers/src/polygon/index.ts @@ -7,7 +7,7 @@ interface IPolygonLayerStyleOptions { } export default class PolygonLayer extends BaseLayer { - public name: string = 'PolygonLayer'; + public type: string = 'PolygonLayer'; protected getConfigSchema() { return { @@ -36,7 +36,7 @@ export default class PolygonLayer extends BaseLayer { this.models = this.layerModel.buildModels(); } - private getModelType(): PolygonModelType { + protected getModelType(): PolygonModelType { const shapeAttribute = this.styleAttributeService.getLayerStyleAttribute( 'shape', ); diff --git a/packages/layers/src/raster/image.ts b/packages/layers/src/raster/image.ts index 3c5ac1b8af..341d1af340 100644 --- a/packages/layers/src/raster/image.ts +++ b/packages/layers/src/raster/image.ts @@ -9,12 +9,12 @@ import BaseLayer from '../core/BaseLayer'; import { RasterImageTriangulation } from '../core/triangulation'; import rasterImageFrag from './shaders/image_frag.glsl'; import rasterImageVert from './shaders/image_vert.glsl'; -interface IPointLayerStyleOptions { +interface IRaterLayerStyleOptions { opacity: number; } -export default class ImageLayer extends BaseLayer { - public name: string = 'ImageLayer'; +export default class ImageLayer extends BaseLayer { + public type: string = 'ImageLayer'; protected texture: ITexture2D; protected getConfigSchema() { diff --git a/packages/layers/src/raster/raster.ts b/packages/layers/src/raster/raster.ts index 9fb9d7e963..1aaea3c4bd 100644 --- a/packages/layers/src/raster/raster.ts +++ b/packages/layers/src/raster/raster.ts @@ -11,8 +11,8 @@ import { lazyInject, TYPES, } from '@antv/l7-core'; +import { generateColorRamp, IColorRamp } from '@antv/l7-utils'; import BaseLayer from '../core/BaseLayer'; -import { generateColorRamp, IColorRamp } from '../utils/color'; import { RasterTriangulation } from './buffers/triangulation'; import rasterFrag from './shaders/raster_frag.glsl'; import rasterVert from './shaders/raster_vert.glsl'; @@ -26,7 +26,7 @@ interface IRasterLayerStyleOptions { } export default class RasterLayer extends BaseLayer { - public name: string = 'e'; + public type: string = 'RasterLayer'; protected texture: ITexture2D; protected colorTexture: ITexture2D; diff --git a/packages/layers/src/raster/raster2d.ts b/packages/layers/src/raster/raster2d.ts index 5a5e438c6c..17ca71129b 100644 --- a/packages/layers/src/raster/raster2d.ts +++ b/packages/layers/src/raster/raster2d.ts @@ -1,7 +1,7 @@ import { AttributeType, gl, IEncodeFeature, ITexture2D } from '@antv/l7-core'; +import { generateColorRamp, IColorRamp } from '@antv/l7-utils'; import BaseLayer from '../core/BaseLayer'; import { RasterImageTriangulation } from '../core/triangulation'; -import { generateColorRamp, IColorRamp } from '../utils/color'; import rasterImageFrag from './shaders/raster_2d_frag.glsl'; import rasterImageVert from './shaders/raster_2d_vert.glsl'; interface IRasterLayerStyleOptions { @@ -12,7 +12,7 @@ interface IRasterLayerStyleOptions { } export default class Raster2dLayer extends BaseLayer { - public name: string = 'RasterLayer'; + public type: string = 'RasterLayer'; protected texture: ITexture2D; protected colorTexture: ITexture2D; diff --git a/packages/layers/src/utils/blend.ts b/packages/layers/src/utils/blend.ts new file mode 100644 index 0000000000..e209a58b8d --- /dev/null +++ b/packages/layers/src/utils/blend.ts @@ -0,0 +1,54 @@ +import { BlendType, gl, IBlendOptions, IBlendTypes } from '@antv/l7-core'; +export const BlendTypes: IBlendTypes = { + [BlendType.additive]: { + enable: true, + func: { + srcRGB: gl.ONE, + dstRGB: gl.ONE, + srcAlpha: 1, + dstAlpha: 1, + }, + }, + [BlendType.normal]: { + enable: true, + func: { + srcRGB: gl.SRC_ALPHA, + dstRGB: gl.ONE_MINUS_SRC_ALPHA, + srcAlpha: 1, + dstAlpha: 1, + }, + }, + [BlendType.subtractive]: { + enable: true, + func: { + srcRGB: gl.ONE, + dstRGB: gl.ONE, + srcAlpha: gl.ZERO, + dstAlpha: gl.ONE_MINUS_SRC_COLOR, + }, + equation: { + rgb: gl.FUNC_SUBTRACT, + alpha: gl.FUNC_SUBTRACT, + }, + }, + [BlendType.max]: { + enable: true, + func: { + srcRGB: gl.ONE, + dstRGB: gl.ONE, + }, + equation: { + rgb: gl.MAX_EXT, + }, + }, + [BlendType.min]: { + enable: true, + func: { + srcRGB: gl.ONE, + dstRGB: gl.ONE, + }, + equation: { + rgb: gl.MIN_EXT, + }, + }, +}; diff --git a/packages/maps/CHANGELOG.md b/packages/maps/CHANGELOG.md index 5a99b46844..4b084e8a80 100644 --- a/packages/maps/CHANGELOG.md +++ b/packages/maps/CHANGELOG.md @@ -3,6 +3,71 @@ 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 + +* mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2)) +* **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)) +* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43)) + + + + + +# [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 + +* mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2)) +* **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)) +* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43)) + + + + + +# [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)) +* **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)) +* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43)) + + + + + +# [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)) + + + + + # [2.0.0-beta.19](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.19) (2019-12-08) diff --git a/packages/maps/package.json b/packages/maps/package.json index 6a05a62565..60a21ee6fe 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-maps", - "version": "2.0.0-beta.19", + "version": "2.0.0-beta.24", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -23,11 +23,14 @@ "author": "xiaoiver", "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", + "core-js": "3", "gl-matrix": "^3.1.0", "inversify": "^5.0.1", "mapbox-gl": "^1.2.1", + "regenerator-runtime": "^0.13.3", "viewport-mercator-project": "^6.2.1" }, "devDependencies": { diff --git a/packages/maps/src/amap/index.ts b/packages/maps/src/amap/index.ts index 3d513b4ccd..fd26e3731e 100644 --- a/packages/maps/src/amap/index.ts +++ b/packages/maps/src/amap/index.ts @@ -5,7 +5,9 @@ import { Bounds, CoordinateSystem, ICoordinateSystemService, + IGlobalConfigService, ILngLat, + ILogService, IMapConfig, IMapService, IPoint, @@ -47,6 +49,12 @@ export default class AMapService */ public map: AMap.Map & IAMapInstance; + @inject(TYPES.IGlobalConfigService) + private readonly configService: IGlobalConfigService; + + @inject(TYPES.ILogService) + private readonly logger: ILogService; + @inject(TYPES.MapConfig) private readonly config: Partial; @@ -106,8 +114,13 @@ export default class AMapService } public getZoom(): number { // 统一返回 Mapbox 缩放等级 - return this.map.getZoom() - 1; + return this.map.getZoom(); } + + public setZoom(zoom: number): void { + return this.map.setZoom(zoom); + } + public getCenter(): ILngLat { const center = this.map.getCenter(); return { @@ -215,28 +228,36 @@ export default class AMapService minZoom = 0, maxZoom = 18, token = AMAP_API_KEY, + mapInstance, ...rest } = this.config; // 高德地图创建独立的container； - - // @ts-ignore - this.$mapContainer = this.creatAmapContainer(id); // tslint:disable-next-line:typedef await new Promise((resolve) => { const resolveMap = () => { - // @ts-ignore - this.map = new AMap.Map(this.$mapContainer, { - mapStyle: this.getMapStyle(style), - zooms: [minZoom, maxZoom], - viewMode: '3D', - ...rest, - }); - - // 监听地图相机事件 - this.map.on('camerachange', this.handleCameraChanged); - resolve(); + if (mapInstance) { + this.map = mapInstance as AMap.Map & IAMapInstance; + this.$mapContainer = this.map.getContainer(); + setTimeout(() => { + this.map.on('camerachange', this.handleCameraChanged); + resolve(); + }, 30); + } else { + this.$mapContainer = this.creatAmapContainer( + id as string | HTMLDivElement, + ); + // @ts-ignore + this.map = new AMap.Map(this.$mapContainer, { + mapStyle: this.getMapStyle(style), + zooms: [minZoom, maxZoom], + viewMode: '3D', + ...rest, + }); + // 监听地图相机事件 + this.map.on('camerachange', this.handleCameraChanged); + resolve(); + } }; - if (!document.getElementById(AMAP_SCRIPT_ID)) { // 异步加载高德地图 // @see https://lbs.amap.com/api/javascript-api/guide/abc/load @@ -244,20 +265,22 @@ export default class AMapService window.initAMap = (): void => { amapLoaded = true; resolveMap(); - if (pendingResolveQueue.length) { pendingResolveQueue.forEach((r) => r()); pendingResolveQueue = []; } }; - const url: string = `https://webapi.amap.com/maps?v=${AMAP_VERSION}&key=${AMAP_API_KEY}&plugin=Map3D&callback=initAMap`; + if (token === AMAP_API_KEY) { + this.logger.warn(this.configService.getSceneWarninfo('MapToken')); + } + const url: string = `https://webapi.amap.com/maps?v=${AMAP_VERSION}&key=${token}&plugin=Map3D&callback=initAMap`; const $jsapi = document.createElement('script'); $jsapi.id = AMAP_SCRIPT_ID; $jsapi.charset = 'utf-8'; $jsapi.src = url; document.head.appendChild($jsapi); } else { - if (amapLoaded) { + if (amapLoaded || mapInstance) { resolveMap(); } else { pendingResolveQueue.push(resolveMap); @@ -347,7 +370,6 @@ export default class AMapService $amapdiv.style.cssText += ` position: absolute; top: 0; - z-index:2; height: 100%; width: 100%; `; diff --git a/packages/maps/src/mapbox/index.ts b/packages/maps/src/mapbox/index.ts index c9de4f3d21..95786ec2f7 100644 --- a/packages/maps/src/mapbox/index.ts +++ b/packages/maps/src/mapbox/index.ts @@ -5,7 +5,9 @@ import { Bounds, CoordinateSystem, ICoordinateSystemService, + IGlobalConfigService, ILngLat, + ILogService, IMapConfig, IMapService, IPoint, @@ -27,7 +29,8 @@ const EventMap: { import { MapTheme } from './theme'; const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12; - +const MAPBOX_API_KEY = + 'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ'; /** * AMapService */ @@ -39,6 +42,11 @@ export default class MapboxService @inject(TYPES.MapConfig) private readonly config: Partial; + @inject(TYPES.IGlobalConfigService) + private readonly configService: IGlobalConfigService; + + @inject(TYPES.ILogService) + private readonly logger: ILogService; @inject(TYPES.ICoordinateSystemService) private readonly coordinateSystemService: ICoordinateSystemService; @@ -85,10 +93,15 @@ export default class MapboxService public getType() { return 'mapbox'; } + public getZoom(): number { return this.map.getZoom(); } + public setZoom(zoom: number) { + return this.map.setZoom(zoom); + } + public getCenter(): ILngLat { return this.map.getCenter(); } @@ -177,11 +190,11 @@ export default class MapboxService id = 'map', attributionControl = false, style = 'light', - token = 'pk.eyJ1IjoieGlhb2l2ZXIiLCJhIjoiY2pxcmc5OGNkMDY3cjQzbG42cXk5NTl3YiJ9.hUC5Chlqzzh0FFd_aEc-uQ', + token = MAPBOX_API_KEY, rotation = 0, + mapInstance, ...rest } = this.config; - this.$mapContainer = document.getElementById(id); this.viewport = new Viewport(); @@ -189,15 +202,43 @@ export default class MapboxService * TODO: 使用 mapbox v0.53.x 版本 custom layer，需要共享 gl context * @see https://github.com/mapbox/mapbox-gl-js/blob/master/debug/threejs.html#L61-L64 */ - mapboxgl.accessToken = token; - // @ts-ignore - this.map = new mapboxgl.Map({ - container: id, - style: this.getMapStyle(style), - attributionControl, - bearing: rotation, - ...rest, - }); + + // 判断全局 mapboxgl 对象的加载 + if (!mapInstance && !mapboxgl) { + // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。 + this.logger.error(this.configService.getSceneWarninfo('SDK')); + } + + if ( + token === MAPBOX_API_KEY && + style !== 'blank' && + !mapboxgl.accessToken && + !mapInstance // 如果用户传递了 mapInstance，应该不去干预实例的 accessToken。 + ) { + this.logger.warn(this.configService.getSceneWarninfo('MapToken')); + } + + // 判断是否设置了 accessToken + if (!mapInstance && !mapboxgl.accessToken) { + // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。 + mapboxgl.accessToken = token; + } + + if (mapInstance) { + // @ts-ignore + this.map = mapInstance; + this.$mapContainer = this.map.getContainer(); + } else { + this.$mapContainer = this.creatAmapContainer(id); + // @ts-ignore + this.map = new mapboxgl.Map({ + container: id, + style: this.getMapStyle(style), + attributionControl, + bearing: rotation, + ...rest, + }); + } this.map.on('load', this.handleCameraChanged); this.map.on('move', this.handleCameraChanged); @@ -256,6 +297,14 @@ export default class MapboxService this.cameraChangedCallback(this.viewport); }; + private creatAmapContainer(id: string | HTMLDivElement) { + let $wrapper = id as HTMLDivElement; + if (typeof id === 'string') { + $wrapper = document.getElementById(id) as HTMLDivElement; + } + return $wrapper; + } + private removeLogoControl(): void { // @ts-ignore const controls = this.map._controls as IControl[]; diff --git a/packages/renderer/CHANGELOG.md b/packages/renderer/CHANGELOG.md index ae25727d53..88826cb319 100644 --- a/packages/renderer/CHANGELOG.md +++ b/packages/renderer/CHANGELOG.md @@ -3,6 +3,72 @@ 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 + +* 修复webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778)) +* render 将gl模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6)) +* **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)) + + + + + +# [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 + +* 修复webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778)) +* render 将gl模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6)) +* **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)) + + + + + +# [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 + +* 修复webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778)) +* render 将gl模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6)) +* **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)) + + + + + +# [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)) +* **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94)) + + + + + # [2.0.0-beta.19](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.19) (2019-12-08) diff --git a/packages/renderer/package.json b/packages/renderer/package.json index b1a60064e5..16570357b3 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-renderer", - "version": "2.0.0-beta.19", + "version": "2.0.0-beta.24", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -21,13 +21,18 @@ }, "author": "xiaoiver", "license": "ISC", + "devDependencies": { + "gl": "^4.4.0" + }, "dependencies": { - "@antv/l7-core": "^2.0.0-beta.19", - "gl": "^4.4.0", + "@antv/l7-core": "^2.0.0-beta.24", + "@babel/runtime": "^7.7.7", + "core-js": "3", "inversify": "^5.0.1", "inversify-logging": "^0.2.1", "lodash": "^4.17.15", "reflect-metadata": "^0.1.13", + "regenerator-runtime": "^0.13.3", "regl": "^1.3.11" }, "gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26", diff --git a/packages/renderer/src/regl/constants.ts b/packages/renderer/src/regl/constants.ts index f5696cc22d..a79d3a1a54 100644 --- a/packages/renderer/src/regl/constants.ts +++ b/packages/renderer/src/regl/constants.ts @@ -141,6 +141,8 @@ export const blendEquationMap: { [key: string]: regl.BlendingEquation; } = { [gl.FUNC_ADD]: 'add', + [gl.MIN_EXT]: 'min', + [gl.MAX_EXT]: 'max', [gl.FUNC_SUBTRACT]: 'subtract', [gl.FUNC_REVERSE_SUBTRACT]: 'reverse subtract', }; diff --git a/packages/renderer/src/regl/index.ts b/packages/renderer/src/regl/index.ts index 50697320f6..7b3f0bb968 100644 --- a/packages/renderer/src/regl/index.ts +++ b/packages/renderer/src/regl/index.ts @@ -53,6 +53,7 @@ export default class ReglRendererService implements IRendererService { extensions: [ 'OES_element_index_uint', // 'EXT_shader_texture_lod', // IBL 兼容性问题 + 'EXT_blend_minmax', 'OES_standard_derivatives', // wireframe // 'OES_texture_float', // shadow map 兼容性问题 'WEBGL_depth_texture', diff --git a/packages/scene/CHANGELOG.md b/packages/scene/CHANGELOG.md index a06f576ea7..997f38ff1b 100644 --- a/packages/scene/CHANGELOG.md +++ b/packages/scene/CHANGELOG.md @@ -3,6 +3,47 @@ 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 + +* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43)) + + + + + +# [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 + +* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43)) + + + + + +# [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 + +* scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43)) + + + + + +# [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-scene + + + + + # [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-scene diff --git a/packages/scene/package.json b/packages/scene/package.json index 191213aa7d..905fd1dee3 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-scene", - "version": "2.0.0-beta.19", + "version": "2.0.0-beta.24", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -22,15 +22,18 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-component": "^2.0.0-beta.19", - "@antv/l7-core": "^2.0.0-beta.19", - "@antv/l7-maps": "^2.0.0-beta.19", - "@antv/l7-renderer": "^2.0.0-beta.19", - "@antv/l7-utils": "^2.0.0-beta.19", + "@antv/l7-component": "^2.0.0-beta.24", + "@antv/l7-core": "^2.0.0-beta.24", + "@antv/l7-maps": "^2.0.0-beta.24", + "@antv/l7-renderer": "^2.0.0-beta.24", + "@antv/l7-utils": "^2.0.0-beta.24", + "@babel/runtime": "^7.7.7", + "core-js": "3", "inversify": "^5.0.1", "inversify-inject-decorators": "^3.1.0", "mapbox-gl": "^1.2.1", - "reflect-metadata": "^0.1.13" + "reflect-metadata": "^0.1.13", + "regenerator-runtime": "^0.13.3" }, "gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26", "publishConfig": { diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 84bb66ddb2..305b57bf52 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -106,6 +106,7 @@ class Scene public addLayer(layer: ILayer): void { // 为当前图层创建一个容器 + // TODO: 初始化的时候设置 容器 const layerContainer = createLayerContainer(this.container); layer.setContainer(layerContainer); this.sceneService.addLayer(layer); @@ -210,6 +211,9 @@ class Scene this.mapService.panTo(pixel); } + public setZoom(zoom: number): void { + this.mapService.setZoom(zoom); + } public fitBounds(bound: Bounds): void { this.mapService.fitBounds(bound); } diff --git a/packages/source/CHANGELOG.md b/packages/source/CHANGELOG.md index 0367543a47..126d231f4c 100644 --- a/packages/source/CHANGELOG.md +++ b/packages/source/CHANGELOG.md @@ -3,6 +3,92 @@ 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 + +* mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2)) +* source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511)) +* **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)) + + +### 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.23](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.23) (2019-12-23) + + +### Bug Fixes + +* mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2)) +* source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511)) +* **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)) + + +### 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.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)) +* source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511)) +* **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)) + + +### 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.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)) +* **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d)) +* **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) diff --git a/packages/source/package.json b/packages/source/package.json index 39e50bffe7..bed5e27c99 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-source", - "version": "2.0.0-beta.19", + "version": "2.0.0-beta.24", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -24,12 +24,14 @@ "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", "@mapbox/geojson-rewind": "^0.4.0", "@turf/helpers": "^6.1.4", "@turf/invariant": "^6.1.2", "@turf/meta": "^6.0.2", + "core-js": "3", "d3-dsv": "^1.1.1", "d3-hexbin": "^0.2.2", "eventemitter3": "^4.0.0", @@ -39,6 +41,7 @@ "inversify-logging": "^0.2.1", "lodash": "^4.17.15", "reflect-metadata": "^0.1.13", + "regenerator-runtime": "^0.13.3", "supercluster": "^6.0.2", "tapable": "^2.0.0-beta.8" }, diff --git a/packages/source/src/source.ts b/packages/source/src/source.ts index fc7210ce77..b991dd0a55 100644 --- a/packages/source/src/source.ts +++ b/packages/source/src/source.ts @@ -84,7 +84,12 @@ export default class Source extends EventEmitter { }); this.init(); } - + public getClusters(zoom: number): any { + return this.clusterIndex.getClusters(this.extent, zoom); + } + public getClustersLeaves(id: number): any { + return this.clusterIndex.getLeaves(id, Infinity); + } public updateClusterData(zoom: number): void { const { method = 'sum', field } = this.clusterOptions; let data = this.clusterIndex.getClusters(this.extent, zoom); diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md index 282647b8be..be13fa604e 100644 --- a/packages/utils/CHANGELOG.md +++ b/packages/utils/CHANGELOG.md @@ -3,6 +3,65 @@ 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 + +* **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94)) + + +### 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 + +* **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94)) + + +### 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 + +* **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94)) + + +### 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) + + +### Bug Fixes + +* **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94)) + + + + + # [2.0.0-beta.19](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.19) (2019-12-08) diff --git a/packages/utils/package.json b/packages/utils/package.json index 8efb004742..7409e2bcff 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-utils", - "version": "2.0.0-beta.19", + "version": "2.0.0-beta.24", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -22,7 +22,9 @@ "author": "lzxue", "license": "ISC", "dependencies": { + "@babel/runtime": "^7.7.7", "@turf/helpers": "^6.1.4", + "core-js": "3", "eventemitter3": "^4.0.0", "gl-matrix": "^3.1.0", "inversify": "^5.0.1", @@ -30,6 +32,7 @@ "inversify-logging": "^0.2.1", "lodash": "^4.17.15", "reflect-metadata": "^0.1.13", + "regenerator-runtime": "^0.13.3", "tapable": "^2.0.0-beta.8" }, "devDependencies": { diff --git a/packages/layers/src/utils/color.ts b/packages/utils/src/color.ts similarity index 86% rename from packages/layers/src/utils/color.ts rename to packages/utils/src/color.ts index f366874639..e0c0082391 100644 --- a/packages/layers/src/utils/color.ts +++ b/packages/utils/src/color.ts @@ -15,6 +15,13 @@ export function rgb2arr(str: string) { return arr; } +export 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; +} + export function encodePickingColor( featureIdx: number, ): [number, number, number] { diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index d3e73b4277..6d36fb0879 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -4,4 +4,5 @@ export * from './fetchData'; export * from './geo'; export * from './lru_cache'; export * from './event'; +export * from './color'; export { DOM }; diff --git a/stories/Layers/Layers.stories.tsx b/stories/Layers/Layers.stories.tsx index 3800e9eae3..4fd56d0c2f 100644 --- a/stories/Layers/Layers.stories.tsx +++ b/stories/Layers/Layers.stories.tsx @@ -3,8 +3,10 @@ import * as React from 'react'; import Arc2DLineDemo from './components/Arc2DLine'; import ArcLineDemo from './components/Arcline'; import Column from './components/column'; +import DashLineDemo from './components/dash'; import DataUpdate from './components/data_update'; import HeatMapDemo from './components/HeatMap'; +import LightDemo from './components/light'; import LineLayer from './components/Line'; import PointDemo from './components/Point'; import Point3D from './components/Point3D'; @@ -17,11 +19,13 @@ import RasterLayerDemo from './components/RasterLayer'; storiesOf('图层', module) .add('点图层', () => ) .add('数据更新', () => ) + .add('亮度图', () => ) .add('3D点', () => ) .add('Column', () => ) .add('图片标注', () => ) .add('面3d图层', () => ) .add('线图层', () => ) + .add('虚线', () => ) .add('3D弧线', () => ) .add('2D弧线', () => ) .add('热力图', () => ) diff --git a/stories/Layers/components/Arcline.tsx b/stories/Layers/components/Arcline.tsx index e81ae3ca1a..a746fbcc8c 100644 --- a/stories/Layers/components/Arcline.tsx +++ b/stories/Layers/components/Arcline.tsx @@ -23,6 +23,7 @@ export default class ArcLineDemo extends React.Component { zoom: 2, }), }); + this.scene = scene; const lineLayer = new LineLayer({ enablePicking: true, enableHighlight: true, diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index 10ce3b4e0f..23642bcb1b 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -24,25 +24,59 @@ export default class Point3D extends React.Component { pitch: 0, style: 'dark', zoom: 3, + token: 'test', }), }); - this.scene = scene; - - const pointLayer = new PointLayer({}) - .source(pointsData, { - cluster: true, - }) - .shape('circle') - .scale('point_count', { - type: 'quantile', - }) - .size('point_count', [5, 10, 15, 20, 25]) - .color('red') - .style({ - opacity: 0.3, - strokeWidth: 1, + scene.on('loaded', () => { + const pointLayer = new PointLayer({}) + .source(pointsData, { + cluster: true, + }) + .shape('circle') + .scale('point_count', { + type: 'quantile', + }) + .size('point_count', [5, 10, 15, 20, 25]) + .color('yellow') + .style({ + opacity: 0.5, + strokeWidth: 1, + }); + scene.addLayer(pointLayer); + pointLayer.on('mousemove', (e) => { + const id = e.featureId; + console.log(e.type); + pointLayer.setActive(id); }); - scene.addLayer(pointLayer); + pointLayer.on('mousedown', (e) => { + const id = e.featureId; + console.log(e.type); + pointLayer.setActive(id); + }); + pointLayer.on('mouseup', (e) => { + const id = e.featureId; + console.log(e.type); + pointLayer.setActive(id); + }); + pointLayer.on('click', (e) => { + const id = e.featureId; + console.log(e.type); + pointLayer.setActive(id); + }); + + pointLayer.on('contextmenu', (e) => { + const id = e.featureId; + console.log(e.type); + pointLayer.setActive(id); + }); + pointLayer.on('unpick', (e) => { + const id = e.featureId; + console.log(e.type); + pointLayer.setActive(id); + }); + + this.scene = scene; + }); } public render() { diff --git a/stories/Layers/components/Point3D.tsx b/stories/Layers/components/Point3D.tsx index dc9f08f207..8861432e01 100644 --- a/stories/Layers/components/Point3D.tsx +++ b/stories/Layers/components/Point3D.tsx @@ -21,21 +21,14 @@ export default class Point3D extends React.Component { zoom: 1, }), }); - const pointLayer = new PointLayer({ - enablePicking: false, - enableHighlight: false, - enableTAA: false, - onHover: (pickedFeature: any) => { - // tslint:disable-next-line:no-console - console.log('Scene4', pickedFeature.feature.name); - }, - }); + const pointLayer = new PointLayer(); pointLayer .source(data, { cluster: true, }) .color('red') .shape('cylinder') + .active({ color: 'blue' }) .size([15, 10]); scene.addLayer(pointLayer); scene.render(); diff --git a/stories/Layers/components/PointImage.tsx b/stories/Layers/components/PointImage.tsx index dfb746a6fd..a5241d1e6b 100644 --- a/stories/Layers/components/PointImage.tsx +++ b/stories/Layers/components/PointImage.tsx @@ -1,5 +1,5 @@ import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; export default class PointImage extends React.Component { // @ts-ignore @@ -15,13 +15,14 @@ export default class PointImage extends React.Component { ); const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Mapbox({ center: [121.4, 31.258134], zoom: 15, pitch: 0, style: 'dark', }), }); + this.scene = scene; scene.addImage( '00', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ', diff --git a/stories/Layers/components/Polygon3D.tsx b/stories/Layers/components/Polygon3D.tsx index c607d07515..2b9740c454 100644 --- a/stories/Layers/components/Polygon3D.tsx +++ b/stories/Layers/components/Polygon3D.tsx @@ -41,6 +41,7 @@ export default class Polygon3D extends React.Component { .source(await response.json()) .shape('extrude') .size('h20', [100, 120, 160, 200, 260, 500]) + .active({ color: 'blue' }) .color('h20', [ '#816CAD', '#A67FB5', @@ -54,6 +55,7 @@ export default class Polygon3D extends React.Component { opacity: 1.0, }); scene.addLayer(layer); + this.scene = scene; } public render() { diff --git a/stories/Layers/components/Text.tsx b/stories/Layers/components/Text.tsx index 13f5d4ffcb..fca96db54f 100644 --- a/stories/Layers/components/Text.tsx +++ b/stories/Layers/components/Text.tsx @@ -54,7 +54,6 @@ export default class Point3D extends React.Component { ]) .size('scalerank', [2, 4, 6, 8, 10]); scene.addLayer(pointLayer); - console.log(pointLayer); scene.render(); this.scene = scene; } diff --git a/stories/Layers/components/column.tsx b/stories/Layers/components/column.tsx index 5e83acb16c..77060db564 100644 --- a/stories/Layers/components/column.tsx +++ b/stories/Layers/components/column.tsx @@ -22,7 +22,7 @@ export default class Column extends React.Component { rotation: 134.9507, }), }); - + this.scene = scene; fetch( 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', ) diff --git a/stories/Layers/components/dash.tsx b/stories/Layers/components/dash.tsx new file mode 100644 index 0000000000..f06b9d94de --- /dev/null +++ b/stories/Layers/components/dash.tsx @@ -0,0 +1,64 @@ +import { DashLineLayer, Scene } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class DashLineDemo extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const response = await fetch( + 'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json', + ); + const scene = new Scene({ + id: 'map', + map: new Mapbox({ + center: [102.602992, 23.107329], + pitch: 0, + style: 'dark', + zoom: 14, + }), + }); + const lineLayer = new DashLineLayer() + .source(await response.json()) + .size(1) + .shape('line') + .color( + 'ELEV', + [ + '#E8FCFF', + '#CFF6FF', + '#A1E9ff', + '#65CEF7', + '#3CB1F0', + '#2894E0', + '#1772c2', + '#105CB3', + '#0D408C', + '#002466', + ].reverse(), + ); + + scene.addLayer(lineLayer); + this.scene = scene; + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/Layers/components/data_update.tsx b/stories/Layers/components/data_update.tsx index c25f8c46f2..26e22e90db 100644 --- a/stories/Layers/components/data_update.tsx +++ b/stories/Layers/components/data_update.tsx @@ -45,6 +45,7 @@ export default class DataUpdate extends React.Component { .source(pointOnCircle(0)) .shape('circle') .size(15) // default 1 + .active(false) .color('#2F54EB') .style({ strokeColor: '#fff', @@ -54,10 +55,7 @@ export default class DataUpdate extends React.Component { scene.addLayer(layer); function animateMarker(timestamp: number) { layer.setData(pointOnCircle(timestamp / 1000)); - scene.render(); - - // setTimeout(animateMarker, 100); requestAnimationFrame(animateMarker); } layer.on('inited', () => { diff --git a/stories/Layers/components/light.tsx b/stories/Layers/components/light.tsx new file mode 100644 index 0000000000..045eb87dc9 --- /dev/null +++ b/stories/Layers/components/light.tsx @@ -0,0 +1,63 @@ +import { PointLayer, Scene } from '@antv/l7'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; +import * as React from 'react'; +// @ts-ignore +export default class Light extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const response = await fetch( + 'https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antvdemo/assets/city/bj.csv', + ); + const pointsData = await response.text(); + + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + pitch: 0, + style: 'dark', + center: [116.405289, 39.904987], + zoom: 6, + }), + }); + this.scene = scene; + scene.on('loaded', async () => { + const pointLayer = new PointLayer() + .source(pointsData, { + parser: { + type: 'csv', + x: 'lng', + y: 'lat', + }, + }) + .size(1) + .color('#ffa842') + .style({ + opacity: 1, + }); + + scene.addLayer(pointLayer); + this.scene = scene; + }); + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/MapAdaptor/Map.stories.tsx b/stories/MapAdaptor/Map.stories.tsx index a2276c3e4d..6fb447d6a1 100644 --- a/stories/MapAdaptor/Map.stories.tsx +++ b/stories/MapAdaptor/Map.stories.tsx @@ -2,6 +2,8 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import GaodeMap from './components/AMap'; import Mapbox from './components/Mapbox'; +import MapboxInstance from './components/MapboxInstance'; +import AMapinstance from './components/MapInstance'; import Mixed from './components/Mixed'; import MultiAMap from './components/MultiAMap'; import MultiMapbox from './components/MultiMapbox'; @@ -12,9 +14,15 @@ storiesOf('地图底图', module) .add('高德地图', () => , { notes: { markdown: notes }, }) + .add('高德地图实例', () => , { + notes: { markdown: notes }, + }) .add('Mapbox', () => , { notes: { markdown: notes }, }) + .add('Mapbox地图实例', () => , { + notes: { markdown: notes }, + }) .add('多个高德地图实例', () => , { notes: { markdown: notes }, }) diff --git a/stories/MapAdaptor/components/MapInstance.tsx b/stories/MapAdaptor/components/MapInstance.tsx new file mode 100644 index 0000000000..1251d5dd23 --- /dev/null +++ b/stories/MapAdaptor/components/MapInstance.tsx @@ -0,0 +1,78 @@ +// @ts-ignore +import { PolygonLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class GaodeMapComponent extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const response = await fetch( + 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', + ); + const data = await response.json(); + // @ts-ignore + window.initAMap = () => { + 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, + }), + }); + const layer = new PolygonLayer({ + enablePicking: false, + }); + layer + .source(data) + .size('name', [0, 10000, 50000, 30000, 100000]) + .color('name', [ + '#2E8AE6', + '#69D1AB', + '#DAF291', + '#FFD591', + '#FF7A45', + '#CF1D49', + ]) + .shape('fill') + .style({ + opacity: 0.8, + }); + scene.addLayer(layer); + scene.render(); + this.scene = scene; + }; + const url: string = + 'https://webapi.amap.com/maps?v=1.4.15&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D&callback=initAMap'; + const $jsapi = document.createElement('script'); + $jsapi.id = 'amap-script'; + $jsapi.charset = 'utf-8'; + $jsapi.src = url; + document.head.appendChild($jsapi); + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/MapAdaptor/components/MapboxInstance.tsx b/stories/MapAdaptor/components/MapboxInstance.tsx new file mode 100644 index 0000000000..71b66a068a --- /dev/null +++ b/stories/MapAdaptor/components/MapboxInstance.tsx @@ -0,0 +1,63 @@ +// @ts-ignore +import { PolygonLayer, Scene } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; +import * as React from 'react'; +import mapboxgl from 'mapbox-gl'; + +export default class MapboxInstance extends React.Component { + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const response = await fetch( + 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', + ); + 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, + }), + }); + this.scene = scene; + const layer = new PolygonLayer({}); + + layer + .source(await response.json()) + .size('name', [0, 10000, 50000, 30000, 100000]) + .color('name', () => { + return 'red'; + }) + .shape('fill') + .style({ + opacity: 0.8, + }); + scene.addLayer(layer); + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/Picking/components/Tooltip.tsx b/stories/Picking/components/Tooltip.tsx index 426c68d6dd..36956f6f6b 100644 --- a/stories/Picking/components/Tooltip.tsx +++ b/stories/Picking/components/Tooltip.tsx @@ -1,5 +1,5 @@ // @ts-ignore -import { PolygonLayer, Scene } from '@antv/l7'; +import { PolygonLayer, Popup, Scene } from '@antv/l7'; import { Mapbox } from '@antv/l7-maps'; import * as dat from 'dat.gui'; import * as React from 'react'; @@ -24,15 +24,7 @@ export default class Tooltip extends React.Component { zoom: 3, }), }); - const layer = new PolygonLayer({ - enablePicking: true, - enableHighlight: false, - onHover: (pickedFeature) => { - // tslint:disable-next-line:no-console - console.log(pickedFeature); - }, - }); - + const layer = new PolygonLayer(); layer .source(await response.json()) .size('name', [0, 10000, 50000, 30000, 100000]) @@ -49,6 +41,14 @@ export default class Tooltip extends React.Component { opacity: 0.8, }); scene.addLayer(layer); + layer.on('click', (e) => { + const popup = new Popup({ + offsets: [0, 0], + }) + .setLnglat(e.lngLat) + .setText(e.feature.properties.name); + scene.addPopup(popup); + }); this.scene = scene; } diff --git a/tslint.json b/tslint.json index 25de824011..28e1678eec 100644 --- a/tslint.json +++ b/tslint.json @@ -16,7 +16,7 @@ ], "no-bitwise": false, "object-literal-sort-keys": false, - "no-implicit-dependencies": false + "no-implicit-dependencies": [true, "dev"] }, "globals": { "AMap": true diff --git a/tslint.prod.json b/tslint.prod.json index 2a87fc12d2..9ac263fceb 100644 --- a/tslint.prod.json +++ b/tslint.prod.json @@ -2,7 +2,7 @@ { "extends": ["./tslint.json"], "rules": { - "no-implicit-dependencies": true + "no-implicit-dependencies": false }, "linterOptions": { "exclude": ["**/*.d.ts", "**/data/*.ts", "**/*.{test,story}.ts{,x}"] diff --git a/tslint.test.json b/tslint.test.json index 34614c76a0..71861880f0 100644 --- a/tslint.test.json +++ b/tslint.test.json @@ -1,9 +1,9 @@ { "extends": ["./tslint.json"], "rules": { - "no-implicit-dependencies": [false, "dev"] + "no-implicit-dependencies": [true, "dev"] }, "linterOptions": { "exclude": ["**/*.d.ts", "**/data/*.ts"] } -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index 9facb1642f..89ecf33d17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -88,10 +88,10 @@ d3-timer "~1.0.6" wolfy87-eventemitter "~5.1.0" -"@antv/gatsby-theme-antv@^0.10.4": - version "0.10.7" - resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-0.10.7.tgz#e2c2620aee959e635c5c95b5d9fa2e9f87812ca9" - integrity sha512-hYkdm6Knt+2KxUoNoXXlDC9KQcAIZdRITqXGx25cUNgpz0+GBDtg15D2JWMwjDpgu86cjjIjMM1860jvTcRm5Q== +"@antv/gatsby-theme-antv@^0.10.17": + version "0.10.24" + resolved "https://registry.npmjs.org/@antv/gatsby-theme-antv/-/gatsby-theme-antv-0.10.24.tgz#0a57af29a1fc75c390eb70a0c490181e778ecf82" + integrity sha512-MMqDmv4hC8f61rFftrjcoGqGGpr+j+uDkPX+AmwpFEaYWzh+QqDO56I0IZUzwYhLihFwjH5z78JtkLO2bDNk4g== dependencies: "@babel/plugin-transform-modules-umd" "^7.2.0" "@babel/preset-env" "^7.6.3" @@ -101,7 +101,7 @@ "@hot-loader/react-dom" "^16.9.0+4.12.11" "@stackblitz/sdk" "^1.3.0" "@types/classnames" "^2.2.9" - "@types/codemirror" "^0.0.80" + "@types/codemirror" "^0.0.81" "@types/git-url-parse" "^9.0.0" "@types/lodash-es" "^4.17.3" "@types/parse-github-url" "^1.0.0" @@ -150,6 +150,7 @@ gatsby-transformer-sharp "^2.2.14" git-url-parse "^11.1.2" i18next "^19.0.0" + indent-string "^4.0.0" insert-css "^2.0.0" less "^3.10.3" lodash "^4.17.15" @@ -176,6 +177,7 @@ react-use "^13.8.0" release-it "^12.4.3" shallowequal "^1.1.0" + slash "^3.0.0" slick-carousel "^1.8.1" ts-jest "^24.1.0" typescript "^3.6.3" @@ -1032,6 +1034,16 @@ resolve "^1.8.1" semver "^5.5.1" +"@babel/plugin-transform-runtime@^7.7.6": + version "7.7.6" + resolved "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61" + integrity sha512-tajQY+YmXR7JjTwRvwL4HePqoL3DYxpYXIHKVvrOIvJmeHe2y1w4tz5qz9ObUDC9m76rCzIMPyn4eERuwA4a4A== + dependencies: + "@babel/helper-module-imports" "^7.7.4" + "@babel/helper-plugin-utils" "^7.0.0" + resolve "^1.8.1" + semver "^5.5.1" + "@babel/plugin-transform-shorthand-properties@^7.2.0", "@babel/plugin-transform-shorthand-properties@^7.7.4": version "7.7.4" resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.7.4.tgz#74a0a9b2f6d67a684c6fbfd5f0458eb7ba99891e" @@ -1283,6 +1295,13 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.7.7": + version "7.7.7" + resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf" + integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/standalone@^7.6.4": version "7.7.4" resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.7.4.tgz#9adcda4b7c33627c65eacf87f5c1f950987294c2" @@ -3657,10 +3676,10 @@ resolved "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.9.tgz#d868b6febb02666330410fe7f58f3c4b8258be7b" integrity sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A== -"@types/codemirror@^0.0.80": - version "0.0.80" - resolved "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.80.tgz#c047bb30462582615c3d51e5be6155315f764427" - integrity sha512-oTi/s9PkWo3+/L9UrRpqngc4i6fRFMp3YQS0nv3Wy5vjl9n6GsqI9oNF6rjl/7J16Ipe67F9eatwRMTSB/Bo0w== +"@types/codemirror@^0.0.81": + version "0.0.81" + resolved "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.81.tgz#3cea2c1006406973d4aad212e617638cbfc2965b" + integrity sha512-QoeIb9tn/TZp0IzNyMKlcwHR6pHxNoIW9mKqF7asAsj+AWqpFOEUsxia756L6WKBQNk2psHpu+aFuIFqo3Ac0A== dependencies: "@types/tern" "*" @@ -20776,10 +20795,10 @@ rollup@^0.25.8: minimist "^1.2.0" source-map-support "^0.3.2" -rollup@^1.27.0: - version "1.27.8" - resolved "https://registry.npmjs.org/rollup/-/rollup-1.27.8.tgz#94288a957af9f4c2380b73a17494d87705997d0f" - integrity sha512-EVoEV5rAWl+5clnGznt1KY8PeVkzVQh/R0d2s3gHEkN7gfoyC4JmvIVuCtPbYE8NM5Ep/g+nAmvKXBjzaqTsHA== +rollup@^1.27.14: + version "1.27.14" + resolved "https://registry.npmjs.org/rollup/-/rollup-1.27.14.tgz#940718d5eec1a6887e399aa0089944bae5c4f377" + integrity sha512-DuDjEyn8Y79ALYXMt+nH/EI58L5pEw5HU9K38xXdRnxQhvzUTI/nxAawhkAHUQeudANQ//8iyrhVRHJBuR6DSQ== dependencies: "@types/estree" "*" "@types/node" "*"