p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1 from antvis/master 

merge 主分支
This commit is contained in:
Parry 2019-12-27 10:28:19 +08:00 committed by GitHub
parent f63af2c870 b5852a45d4
commit 0d3517c41b
153 changed files with 3107 additions and 638 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.storybook/addons.ts
View File

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

3
.storybook/config.ts
View File

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

12
.storybook/webpack.config.js
View File

@ -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?$/,

104
CHANGELOG.md
View File

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

14
babel.config.js
View File

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

28
docs/api/l7.en.md
View File

@ -5,7 +5,6 @@ redirect_from:
- /en/docs/api
---
An open source large-scale geospatial data visualization analysis development framework powered by WebGL.
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
@ -17,13 +16,12 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
2.0.beta 版本目前有些功能还未完善，1 月 6 号我们正式版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
## 核心特性
🌏 数据驱动可视化展示
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
@ -34,9 +32,9 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
🌏 简单灵活的数据接入
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
🌏 多地图底图支持，支持离线内网部署
🌏 多地图底图支持，支持离线内网部署
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
@ -44,24 +42,24 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
### 点图层
- 气泡图
- 散点图
- 符号地图
- 3D柱状地图
- 聚合地图
- 复合图表地图
- 自定义Marker
- 气泡图
- 散点图
- 符号地图
- 3D 柱状地图
- 聚合地图
- 复合图表地图
- 自定义 Marker
### 线图层
- 路径地图
- 弧线，支持2D弧线、3D弧线以及大圆航线
- 弧线，支持 2D 弧线、3D 弧线以及大圆航线
- 等值线
### 面图层
- 填充图
- 3D填充图
- 3D 填充图
### 热力图
@ -70,6 +68,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
- 网格热力图
### 栅格地图
- 图片
- Raster
@ -77,5 +76,4 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

29
docs/api/l7.zh.md
View File

@ -9,7 +9,7 @@ redirect_from:
2.0.beta 版本目前有些功能还未完善，
⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
⚠️ 1 月 6 号 正式版发版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
@ -24,7 +24,6 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
## 核心特性
🌏 数据驱动可视化展示
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
@ -35,9 +34,9 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
🌏 简单灵活的数据接入
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
🌏 多地图底图支持，支持离线内网部署
🌏 多地图底图支持，支持离线内网部署
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
@ -45,24 +44,24 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
### 点图层
- 气泡图
- 散点图
- 符号地图
- 3D柱状地图
- 聚合地图
- 复合图表地图
- 自定义Marker
- 气泡图
- 散点图
- 符号地图
- 3D 柱状地图
- 聚合地图
- 复合图表地图
- 自定义 Marker
### 线图层
- 路径地图
- 弧线，支持2D弧线、3D弧线以及大圆航线
- 弧线，支持 2D 弧线、3D 弧线以及大圆航线
- 等值线
### 面图层
- 填充图
- 3D填充图
- 3D 填充图
### 热力图
@ -71,6 +70,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
- 网格热力图
### 栅格地图
- 图片
- Raster
@ -78,11 +78,10 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
### 技术支持服务群
L7 相关技术问题，需求反馈，我们会及时响应
![地理空间可视化L7支持群](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ePmsRbK4lZgAAAAAAAAAAABkARQnAQ)

14
docs/api/l7stable.en.md
View File

@ -3,11 +3,9 @@ title: 1.x stable
order: 1
---
## L7 1.x 版本
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
目前 1.x 版本最新版本为 ![L7 1.x 版本](https://badgen.net/npm/v/@antv/l7)
@ -19,7 +17,8 @@ order: 1
### npm 安装使用
会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本
会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本
```
npm install @antv/l7
@ -31,9 +30,6 @@ npm install @antv/l7
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能.
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能.
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.

11
docs/api/l7stable.zh.md
View File

@ -3,11 +3,9 @@ title: 1.x 稳定版
order: 1
---
## L7 1.x 版本
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
目前 1.x 版本最新版本为 ![L7 1.x 版本](https://badgen.net/npm/v/@antv/l7)
@ -19,7 +17,8 @@ order: 1
### npm 安装使用
会默认安装 1.x的最新版本，2.0正式版本发布后才会默认2.0版本
会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本
```
npm install @antv/l7
@ -31,6 +30,4 @@ npm install @antv/l7
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在1月6号发布2.0正式版，会包含1.x 版的所有功能.
L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.

4
docs/api/layer/heatmap_layer/grid.zh.md Normal file
View File

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

2
docs/api/layer/heatmap.en.md → docs/api/layer/heatmap_layer/heatmap.en.md
View File

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

2
docs/api/layer/heatmap.zh.md → docs/api/layer/heatmap_layer/heatmap.zh.md
View File

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

4
docs/api/layer/heatmap_layer/hexagon.zh.md Normal file
View File

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

4
docs/api/layer/heatmap_layer/normal.zh.md Normal file
View File

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

0
docs/api/layer/imagelayer.en.md → docs/api/layer/image_layer/imagelayer.en.md
View File

0
docs/api/layer/imagelayer.zh.md → docs/api/layer/image_layer/imagelayer.zh.md
View File

214
docs/api/layer/layer.zh.md
View File

@ -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
图层移除时触发

52
docs/api/layer/line_layer/arc.zh.md Normal file
View File

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

0
docs/api/layer/linelayer.en.md → docs/api/layer/line_layer/linelayer.en.md
View File

2
docs/api/layer/linelayer.zh.md → docs/api/layer/line_layer/linelayer.zh.md
View File

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

24
docs/api/layer/line_layer/path.zh.md Normal file
View File

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

4
docs/api/layer/point_layer/bubble.en.md Normal file
View File

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

40
docs/api/layer/point_layer/bubble.zh.md Normal file
View File

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

5
docs/api/layer/point_layer/chart.en.md Normal file
View File

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

5
docs/api/layer/point_layer/chart.zh.md Normal file
View File

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

9
docs/api/layer/point_layer/cluster.en.md Normal file
View File

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

78
docs/api/layer/point_layer/cluster.zh.md Normal file
View File

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

58
docs/api/layer/point_layer/column.zh.md Normal file
View File

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

44
docs/api/layer/point_layer/dot.en.md Normal file
View File

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

44
docs/api/layer/point_layer/dot.zh.md Normal file
View File

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

9
docs/api/layer/point_layer/marker.en.md Normal file
View File

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

8
docs/api/layer/point_layer/marker.zh.md Normal file
View File

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

2
docs/api/layer/pointlayer.en.md → docs/api/layer/point_layer/pointlayer.en.md
View File

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

2
docs/api/layer/pointlayer.zh.md → docs/api/layer/point_layer/pointlayer.zh.md
View File

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

43
docs/api/layer/point_layer/scatter.zh.md Normal file
View File

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

4
docs/api/layer/point_layer/symbol.en.md Normal file
View File

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

45
docs/api/layer/point_layer/symbol.zh.md Normal file
View File

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

4
docs/api/layer/polygon_layer/extrude.zh.md Normal file
View File

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

4
docs/api/layer/polygon_layer/fill.zh.md Normal file
View File

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

2
docs/api/layer/polygonlayer.en.md → docs/api/layer/polygon_layer/polygonlayer.en.md
View File

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

2
docs/api/layer/polygonlayer.zh.md → docs/api/layer/polygon_layer/polygonlayer.zh.md
View File

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

97
docs/api/map.en.md Normal file
View File

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

97
docs/api/map.zh.md Normal file
View File

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

186
docs/api/scene.en.md
View File

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

189
docs/api/scene.zh.md
View File

@ -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
可以通过scene map 属性获取 map实例
可以通过 scene map 属性获取 map 实例
```javascript
const map = scene.map
const map = scene.map;
```
为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
为了统一不同底图之前的接口差异 L7 在 scene 层对 map 的方法做了统一，因此一些地图的操作方法可以通过 scene 调用这样，切换不同底图时保证表现一致。
示例代码
```javascript
const scene =new L7.Scene({
const scene = new L7.Scene({
id: 'map',
map: new L7.GaodeMap({
style: 'dark',
center: [ 110.770672, 34.159869 ],
center: [110.770672, 34.159869],
pitch: 45,
}),
})
});
```
### 构造函数
**Scene**
## 配置项
### 地图配置项
### id
需传入 dom 容器或者容器 id  {domObject || string} [必选]
### zoom
地图初始显示级别 {number} （0-22）
### 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)
### maxZoom
地图最大缩放等级 {number}  default 22 (0-22)
### rotateEnable
地图是否可旋转 {Boolean} default true
## 方法
### getZoom
获取当前缩放等级
```javascript
scene.getZoom();
```
return {float}  当前缩放等级
return {float}   当前缩放等级
### getLayers()
获取所有的地图图层
```javascript
scene.getLayers();
```
return 图层数组 {Array}
### getCenter()
获取地图中心点
```javascript
scene.getCenter()
scene.getCenter();
```
return {Lnglat} :地图中心点
### getSize()
获取地图容器大小
```javascript
scene.getSize()
scene.getSize();
```
return { Object } 地图容器的 width,height
### getPitch()
获取地图俯仰角
```javascript
scene.getPitch();
```
@ -169,7 +175,7 @@ return {number} pitch
参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
L7 内置了三种地图样式，AMAP 和MapBox都适用
L7 内置了三种地图样式，AMAP 和 MapBox 都适用
- light
- dark
@ -183,58 +189,69 @@ L7 内置了三种地图样式，AMAP 和MapBox都适用
scene.setMapStyle('light');
// mapbox 主题设置
scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
scene.setMapStyle('mapbox://styles/mapbox/streets-v11');
// AMap
scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
scene.setMapStyle(
'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true',
);
```
### setCenter()
设置地图中心点坐标
```javascript
scene.setCenter([lng,lat])
scene.setCenter([lng, lat]);
```
参数：`center` {LngLat} 地图中心点
### 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}
### zoomIn
地图放大一级
```javascript
scene.zoomIn()
scene.zoomIn();
```
### zoomOut
地图缩小一级
```javascript
scene.ZoomOUt()
scene.ZoomOUt();
```
### panTo
地图平移到指定的位置
```javascript
scene.panTo(LngLat)
scene.panTo(LngLat);
```
参数：
@ -242,28 +259,33 @@ scene.panTo(LngLat)
- `center` LngLat 中心位置坐标
### panBy
以像素为单位沿X方向和Y方向移动地图
以像素为单位沿 X 方向和 Y 方向移动地图
```javascript
scene.panBy(x,y)
scene.panBy(x, y);
```
参数：
- `x` {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}
## 事件
### on
事件监听
#### 参数
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
### off
移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
### 地图事件
```javascript
scene.on('loaded',()=>{})  //地图加载完成触发
scene.on('mapmove',()=>{}) // 地图平移时触发事件
scene.on('movestart',()=>{}) // 地图平移开始时触发
scene.on('moveend',()=>{}) // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
scene.on('zoomchange',()=>{}) // 地图缩放级别更改后触发
scene.on('zoomstart',()=>{}) // 缩放开始时触发
scene.on('zoomend',()=>{}) // 缩放停止时触发
```
```javascript
scene.on('loaded', () => {}); //地图加载完成触发
scene.on('mapmove', () => {}); // 地图平移时触发事件
scene.on('movestart', () => {}); // 地图平移开始时触发
scene.on('moveend', () => {}); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
scene.on('zoomchange', () => {}); // 地图缩放级别更改后触发
scene.on('zoomstart', () => {}); // 缩放开始时触发
scene.on('zoomend', () => {}); // 缩放停止时触发
```
### 鼠标事件
```javascript
scene.on('click', (ev)=>{}); // 鼠标左键点击事件
scene.on('dblclick', (ev)=>{}); // 鼠标左键双击事件
scene.on('mousemove', (ev)=>{}); // 鼠标在地图上移动时触发
scene.on('mousewheel', (ev)=>{}); // 鼠标滚轮开始缩放地图时触发
scene.on('mouseover', (ev)=>{}); // 鼠标移入地图容器内时触发
scene.on('mouseout', (ev)=>{}); // 鼠标移出地图容器时触发
scene.on('mouseup', (ev)=>{}); // 鼠标在地图上单击抬起时触发
scene.on('mousedown', (ev)=>{}); // 鼠标在地图上单击按下时触发
scene.on('rightclick', (ev)=>{}); // 鼠标右键单击事件
scene.on('dragstart', (ev)=>{}); //开始拖拽地图时触发
scene.on('dragging', (ev)=>{}); // 拖拽地图过程中触发
scene.on('dragend', (ev)=>{}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
scene.on('click', (ev) => {}); // 鼠标左键点击事件
scene.on('dblclick', (ev) => {}); // 鼠标左键双击事件
scene.on('mousemove', (ev) => {}); // 鼠标在地图上移动时触发
scene.on('mousewheel', (ev) => {}); // 鼠标滚轮开始缩放地图时触发
scene.on('mouseover', (ev) => {}); // 鼠标移入地图容器内时触发
scene.on('mouseout', (ev) => {}); // 鼠标移出地图容器时触发
scene.on('mouseup', (ev) => {}); // 鼠标在地图上单击抬起时触发
scene.on('mousedown', (ev) => {}); // 鼠标在地图上单击按下时触发
scene.on('rightclick', (ev) => {}); // 鼠标右键单击事件
scene.on('dragstart', (ev) => {}); //开始拖拽地图时触发
scene.on('dragging', (ev) => {}); // 拖拽地图过程中触发
scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
```
### 其它事件
```javascript
scene.on('resize',()=>{}) // 地图容器大小改变事件
scene.on('resize', () => {}); // 地图容器大小改变事件
```

4
docs/tutorial/map/amap.en.md
View File

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

4
docs/tutorial/map/amap.zh.md
View File

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

8
docs/tutorial/map/blankmap.en.md
View File

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

10
docs/tutorial/map/blankmap.zh.md
View File

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

4
docs/tutorial/map/mapbox.en.md
View File

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

4
docs/tutorial/map/mapbox.zh.md
View File

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

2
docs/tutorial/quickstart.en.md
View File

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

5
docs/tutorial/quickstart.zh.md
View File

@ -20,7 +20,7 @@ Include the L7 JS JavaScript <head> of your HTML file.
```html
<head>
<! --引入第三方地图JSAPI-->
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.19/dist/l7.js'>
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.24/dist/l7.js'>
</script>
</head>
```
@ -157,3 +157,6 @@ export default class AMapExample extends React.Component {
更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories)
### Vue 欢迎补充
[1.x Vue 使用](https://codesandbox.io/s/l7-vue1xdemo-wknsz)
### Html
[2.0版本 HTML 使用模板](https://codesandbox.io/s/l7htmltemplate-vp2lp)

2
examples/gallery/basic/demo/bus_dark.js
View File

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

2
examples/line/path/demo/bus_dark.js
View File

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

2
examples/line/path/demo/bus_light.js
View File

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

19
examples/point/dot/demo/meta.json Normal file
View File

@ -0,0 +1,19 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "normal2.js",
"title": "城市亮度图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ypZCT6pqv84AAAAAAAAAAABkARQnAQ"
},
{
"filename": "normal.js",
"title": "海量点",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ"
}
]
}

0
examples/point/scatter/demo/normal.js → examples/point/dot/demo/normal.js
View File

0
examples/point/scatter/demo/normal2.js → examples/point/dot/demo/normal2.js
View File

4
examples/point/dot/index.en.md Normal file
View File

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

4
examples/point/dot/index.zh.md Normal file
View File

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

12
examples/point/scatter/demo/meta.json
View File

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

47
examples/point/scatter/demo/scatter.js Normal file
View File

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

14
examples/tutorial/map/demo/amapInstance.js Normal file
View File

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

32
gatsby-config.js
View File

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

2
lerna.json
View File

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

7
package.json
View File

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

56
packages/component/CHANGELOG.md
View File

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

11
packages/component/package.json
View File

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

2
packages/component/src/control/layer.ts
View File

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

8
packages/component/src/popup.ts
View File

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

96
packages/core/CHANGELOG.md
View File

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

7
packages/core/package.json
View File

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

2
packages/core/src/services/component/PopupService.ts
View File

@ -17,7 +17,9 @@ export default class PopupService implements IPopupService {
}
public addPopup(popup: IPopup) {
if (this.popup) {
this.popup.remove();
}
popup.addTo(this.scene);
this.popup = popup;
}

8
packages/core/src/services/config/ConfigService.ts
View File

@ -4,6 +4,7 @@ import { ILayerConfig } from '../layer/ILayerService';
import { IGlobalConfigService, ISceneConfig } from './IConfigService';
import mapConfigSchema from './mapConfigSchema';
import sceneConfigSchema from './sceneConfigSchema';
import WarnInfo, { IWarnInfo } from './warnInfo';
/**
* 场景默认配置项
@ -49,13 +50,16 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
visible: true,
autoFit: false,
zIndex: 0,
blend: 'normal',
pickedFeatureID: -1,
enableMultiPassRenderer: true,
enablePicking: true,
active: false,
activeColor: 'red',
enableHighlight: false,
enableSelect: false,
highlightColor: 'red',
selectColor: 'blue',
enableTAA: false,
jitterScale: 1,
enableLighting: false,
@ -104,6 +108,10 @@ export default class GlobalConfigService implements IGlobalConfigService {
return this.sceneConfigCache[sceneId];
}
public getSceneWarninfo(id: string) {
return WarnInfo[id];
}
public setSceneConfig(sceneId: string, config: Partial<ISceneConfig>) {
this.sceneConfigCache[sceneId] = {
...defaultSceneConfig,

5
packages/core/src/services/config/IConfigService.ts
View File

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

12
packages/core/src/services/config/warnInfo.ts Normal file
View File

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

16
packages/core/src/services/interaction/IInteractionService.ts
View File

@ -1,6 +1,16 @@
import { ILngLat } from '../map/IMapService';
export enum InteractionEvent {
Hover = 'hover',
Click = 'click',
Select = 'select',
Active = 'active',
}
export interface IInteractionTarget {
x: number;
y: number;
lngLat: ILngLat;
type: string;
featureId?: number;
}
export interface IInteractionService {
@ -8,7 +18,9 @@ export interface IInteractionService {
destroy(): void;
on(
eventName: InteractionEvent,
callback: (params: { x: number; y: number; type: string }) => void,
callback: (params: IInteractionTarget) => void,
): void;
triggerHover({ x, y, type }: { x: number; y: number; type?: string }): void;
triggerHover({ x, y, type }: Partial<IInteractionTarget>): void;
triggerSelect(id: number): void;
triggerActive(id: number): void;
}

10
packages/core/src/services/interaction/InteractionService.ts
View File

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

30
packages/core/src/services/layer/ILayerService.ts
View File

@ -3,7 +3,11 @@ import { SyncBailHook, SyncHook, SyncWaterfallHook } from 'tapable';
import Clock from '../../utils/clock';
import { ISceneConfig } from '../config/IConfigService';
import { IMapService } from '../map/IMapService';
import { IModel, IModelInitializationOptions } from '../renderer/IModel';
import {
IBlendOptions,
IModel,
IModelInitializationOptions,
} from '../renderer/IModel';
import {
IMultiPassRenderer,
IPass,
@ -22,6 +26,16 @@ import {
StyleAttributeOption,
Triangulation,
} from './IStyleAttributeService';
export enum BlendType {
normal = 'normal',
additive = 'additive',
subtractive = 'subtractive',
min = 'min',
max = 'max',
}
export interface IBlendTypes {
[key: string]: Partial<IBlendOptions>;
}
export interface IDataState {
dataSourceNeedUpdate: boolean;
dataMappingNeedUpdate: boolean;
@ -38,6 +52,7 @@ export interface ILayerModelInitializationOptions {
export interface ILayerModel {
render(): void;
getUninforms(): IModelUniform;
getDefaultStyle(): unknown;
buildModels(): IModel[];
}
export interface IModelUniform {
@ -57,7 +72,8 @@ export interface IActiveOption {
export interface ILayer {
id: string; // 一个场景中同一类型 Layer 可能存在多个
name: string; // 代表 Layer 的类型
type: string; // 代表 Layer 的类型
name: string; //
inited: boolean; // 是否初始化完成
zIndex: number;
plugins: ILayerPlugin[];
@ -73,6 +89,8 @@ export interface ILayer {
beforePickingEncode: SyncHook<void>;
afterPickingEncode: SyncHook<void>;
beforeHighlight: SyncHook<[number[]]>;
beforeSelect: SyncHook<[number[]]>;
afterSelect: SyncHook<void>;
afterHighlight: SyncHook<void>;
beforeDestroy: SyncHook<void>;
afterDestroy: SyncHook<void>;
@ -86,6 +104,8 @@ export interface ILayer {
getLayerConfig(): Partial<ILayerConfig & ISceneConfig>;
getContainer(): Container;
setContainer(container: Container): void;
setCurrentPickId(id: number | null): void;
getCurrentPickId(): number | null;
buildLayerModel(
options: ILayerModelInitializationOptions &
Partial<IModelInitializationOptions>,
@ -116,6 +136,7 @@ export interface ILayer {
isVisible(): boolean;
setMaxZoom(min: number): ILayer;
setMinZoom(max: number): ILayer;
setBlend(type: keyof typeof BlendType): void;
// animate(field: string, option: any): ILayer;
render(): ILayer;
destroy(): void;
@ -186,6 +207,8 @@ export interface ILayerConfig {
visible: boolean;
zIndex: number;
autoFit: boolean;
name: string; //
blend: keyof typeof BlendType;
pickedFeatureID: number;
enableMultiPassRenderer: boolean;
passes: Array<string | [string, { [key: string]: unknown }]>;
@ -198,10 +221,13 @@ export interface ILayerConfig {
* 开启高亮
*/
enableHighlight: boolean;
enableSelect: boolean;
/**
* 高亮颜色
*/
highlightColor: string | number[];
selectColor: string | number[];
active: boolean;
activeColor: string | number[];
/**

5
packages/core/src/services/layer/LayerService.ts
View File

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

2
packages/core/src/services/log/LogService.ts
View File

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

9
packages/core/src/services/map/IMapService.ts
View File

@ -51,6 +51,7 @@ export interface IMapService<RawMap = {}> {
panBy(pixel: Point): void;
fitBounds(bound: Bounds): void;
setZoomAndCenter(zoom: number, center: Point): void;
setZoom(zoom: number): void;
setMapStyle(style: string): void;
// coordinates methods
@ -65,11 +66,15 @@ export const MapServiceEvent = ['mapload'];
/**
* 地图初始化配置项
*/
export interface IMapConfig {
export interface IMapConfig<RawMap = {}> {
/**
* 地图实例
*/
mapInstance?: RawMap;
/**
* 容器 DOM id
*/
id: string;
id: string | HTMLDivElement;
/**
* 地图

40
packages/core/src/services/renderer/IModel.ts
View File

@ -3,6 +3,29 @@ import { IAttribute } from './IAttribute';
import { IElements } from './IElements';
import { IUniform } from './IUniform';
export interface IBlendOptions {
// gl.enable(gl.BLEND)
enable: boolean;
// gl.blendFunc
func: BlendingFunctionSeparate;
// gl.blendEquation
equation: {
rgb:
| gl.FUNC_ADD
| gl.FUNC_SUBTRACT
| gl.FUNC_REVERSE_SUBTRACT
| gl.MIN_EXT
| gl.MAX_EXT;
alpha?:
| gl.FUNC_ADD
| gl.FUNC_SUBTRACT
| gl.FUNC_REVERSE_SUBTRACT
| gl.MIN_EXT
| gl.MAX_EXT;
};
// gl.blendColor
color: [number, number, number, number];
}
type stencilOp =
| gl.ZERO
| gl.KEEP
@ -153,20 +176,7 @@ export interface IModelInitializationOptions {
/**
* blending
*/
blend?: Partial<{
// gl.enable(gl.BLEND)
enable: boolean;
// gl.blendFunc
func: BlendingFunctionSeparate;
// gl.blendEquation
equation: {
// TODO: EXT_blend_minmax
rgb: gl.FUNC_ADD | gl.FUNC_SUBTRACT | gl.FUNC_REVERSE_SUBTRACT;
alpha: gl.FUNC_ADD | gl.FUNC_SUBTRACT | gl.FUNC_REVERSE_SUBTRACT;
};
// gl.blendColor
color: [number, number, number, number];
}>;
blend?: Partial<IBlendOptions>;
/**
* stencil
@ -221,6 +231,8 @@ export interface IModelDrawOptions {
[key: string]: IAttribute;
};
elements?: IElements;
blend?: IBlendOptions;
}
/**

4
packages/core/src/services/renderer/gl.ts
View File

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

8
packages/core/src/services/renderer/passes/BaseNormalPass.ts
View File

@ -1,5 +1,9 @@
import { inject, injectable } from 'inversify';
import { IRendererService, IShaderModuleService } from '../../../index';
import {
IMapService,
IRendererService,
IShaderModuleService,
} from '../../../index';
import { TYPES } from '../../../types';
import { ICameraService } from '../../camera/ICameraService';
import { IInteractionService } from '../../interaction/IInteractionService';
@ -17,6 +21,7 @@ export default class BaseNormalPass<InitializationOptions = {}>
protected rendererService: IRendererService;
protected cameraService: ICameraService;
protected mapService: IMapService;
protected interactionService: IInteractionService;
protected layerService: ILayerService;
@ -38,6 +43,7 @@ export default class BaseNormalPass<InitializationOptions = {}>
this.cameraService = layer
.getContainer()
.get<ICameraService>(TYPES.ICameraService);
this.mapService = layer.getContainer().get<IMapService>(TYPES.IMapService);
this.interactionService = layer
.getContainer()
.get<IInteractionService>(TYPES.IInteractionService);

140
packages/core/src/services/renderer/passes/PixelPickingPass.ts
View File

@ -1,20 +1,18 @@
import { decodePickingColor, encodePickingColor } from '@antv/l7-utils';
import { inject, injectable } from 'inversify';
import { TYPES } from '../../../types';
import { InteractionEvent } from '../../interaction/IInteractionService';
import {
IInteractionTarget,
InteractionEvent,
} from '../../interaction/IInteractionService';
import { ILayer } from '../../layer/ILayerService';
import { ILogService } from '../../log/ILogService';
import { ILngLat } from '../../map/IMapService';
import { gl } from '../gl';
import { IFramebuffer } from '../IFramebuffer';
import { PassType } from '../IMultiPassRenderer';
import BaseNormalPass from './BaseNormalPass';
function decodePickingColor(color: Uint8Array): number {
const [i1, i2, i3] = color;
// 1 was added to seperate from no selection
const index = i1 + i2 * 256 + i3 * 65536 - 1;
return index;
}
/**
* color-based PixelPickingPass
* @see https://github.com/antvis/L7/blob/next/dev-docs/PixelPickingEngine.md
@ -66,6 +64,14 @@ export default class PixelPickingPass<
// 监听 hover 事件
this.interactionService.on(InteractionEvent.Hover, this.pickFromPickingFBO);
this.interactionService.on(
InteractionEvent.Select,
this.selectFeatureHander.bind(this),
);
this.interactionService.on(
InteractionEvent.Active,
this.highlightFeatureHander.bind(this),
);
}
public render(layer: ILayer) {
@ -112,15 +118,7 @@ export default class PixelPickingPass<
* 拾取视口指定坐标属于的要素
* TODO：支持区域拾取
*/
private pickFromPickingFBO = ({
x,
y,
type,
}: {
x: number;
y: number;
type: string;
}) => {
private pickFromPickingFBO = ({ x, y, lngLat, type }: IInteractionTarget) => {
if (!this.layer.isVisible()) {
return;
}
@ -130,7 +128,7 @@ export default class PixelPickingPass<
useFramebuffer,
} = this.rendererService;
const { width, height } = getViewportSize();
const { enableHighlight } = this.layer.getLayerConfig();
const { enableHighlight, enableSelect } = this.layer.getLayerConfig();
const xInDevicePixel = x * window.devicePixelRatio;
const yInDevicePixel = y * window.devicePixelRatio;
@ -142,7 +140,6 @@ export default class PixelPickingPass<
) {
return;
}
let pickedColors: Uint8Array | undefined;
useFramebuffer(this.pickingFBO, () => {
// avoid realloc
@ -166,54 +163,63 @@ export default class PixelPickingPass<
const rawFeature = this.layer
.getSource()
.getFeatureById(pickedFeatureIdx);
const target = {
x,
y,
type,
lngLat,
featureId: pickedFeatureIdx,
feature: rawFeature,
};
if (!rawFeature) {
// this.logger.error(
// '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
// );
} else {
// trigger onHover/Click callback on layer
this.triggerHoverOnLayer({ x, y, type, feature: rawFeature });
this.layer.setCurrentPickId(pickedFeatureIdx);
this.triggerHoverOnLayer(target);
}
} else {
const target = {
x,
y,
lngLat,
type:
this.layer.getCurrentPickId() === null ? 'un' + type : 'mouseout',
featureId: null,
feature: null,
};
this.triggerHoverOnLayer({
...target,
type: 'unpick',
});
this.triggerHoverOnLayer(target);
this.layer.setCurrentPickId(null);
}
});
if (enableHighlight) {
this.highlightPickedFeature(pickedColors);
}
if (
enableSelect &&
type === 'click' &&
pickedColors?.toString() !== [0, 0, 0, 0].toString()
) {
this.selectFeature(pickedColors);
}
};
private triggerHoverOnLayer({
x,
y,
type,
feature,
}: {
private triggerHoverOnLayer(target: {
x: number;
y: number;
type: string;
lngLat: ILngLat;
feature: unknown;
featureId: number | null;
}) {
const { onHover, onClick } = this.layer.getLayerConfig();
// if (onHover) {
// onHover({
// x,
// y,
// feature,
// });
// }
// if (onClick) {
// onClick({
// x,
// y,
// feature,
// });
// }
this.layer.emit(type, {
x,
y,
feature,
});
this.layer.emit(target.type, target);
}
/**
@ -232,7 +238,6 @@ export default class PixelPickingPass<
private highlightPickedFeature(pickedColors: Uint8Array | undefined) {
const [r, g, b] = pickedColors;
const { clear, useFramebuffer } = this.rendererService;
// 先输出到 PostProcessor
const readFBO = this.layer.multiPassRenderer
.getPostProcessor()
@ -257,4 +262,43 @@ export default class PixelPickingPass<
});
this.layer.multiPassRenderer.getPostProcessor().render(this.layer);
}
private selectFeature(pickedColors: Uint8Array | undefined) {
const [r, g, b] = pickedColors;
const { clear, useFramebuffer } = this.rendererService;
// 先输出到 PostProcessor
const readFBO = this.layer.multiPassRenderer
.getPostProcessor()
.getReadFBO();
this.layer.hooks.beforeRender.call();
useFramebuffer(readFBO, () => {
clear({
color: [0, 0, 0, 0],
depth: 1,
stencil: 0,
framebuffer: readFBO,
});
// TODO: highlight pass 需要 multipass
const originRenderFlag = this.layer.multiPassRenderer.getRenderFlag();
this.layer.multiPassRenderer.setRenderFlag(false);
this.layer.hooks.beforeSelect.call([r, g, b]);
this.layer.render();
this.layer.hooks.afterSelect.call();
this.layer.hooks.afterRender.call();
this.layer.multiPassRenderer.setRenderFlag(originRenderFlag);
});
this.layer.multiPassRenderer.getPostProcessor().render(this.layer);
}
private selectFeatureHander({ featureId }: Partial<IInteractionTarget>) {
const pickedColors = encodePickingColor(featureId as number);
this.selectFeature(new Uint8Array(pickedColors));
}
private highlightFeatureHander({ featureId }: Partial<IInteractionTarget>) {
const pickedColors = encodePickingColor(featureId as number);
this.highlightPickedFeature(new Uint8Array(pickedColors));
}
}

1
packages/core/src/services/scene/ISceneService.ts
View File

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

7
packages/core/src/services/scene/SceneService.ts
View File

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

2
packages/core/src/services/source/ISourceService.ts
View File

@ -63,6 +63,8 @@ export interface ISource {
clusterOptions: Partial<IClusterOptions>;
updateClusterData(zoom: number): void;
getFeatureById(id: number): unknown;
getClusters(zoom: number): any;
getClustersLeaves(id: number): any;
}
export interface IRasterCfg {
extent: [number, number, number, number];

44
packages/l7/CHANGELOG.md
View File

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

14
packages/l7/package.json
View File

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

79
packages/layers/CHANGELOG.md
View File

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

11
packages/layers/package.json
View File

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

98
packages/layers/src/core/BaseLayer.ts
View File

@ -1,4 +1,5 @@
import {
BlendType,
gl,
IActiveOption,
IAnimateOption,
@ -37,7 +38,6 @@ import {
TYPES,
} from '@antv/l7-core';
import Source from '@antv/l7-source';
import { bindAll } from '@antv/l7-utils';
import { EventEmitter } from 'eventemitter3';
import { Container } from 'inversify';
import { isFunction, isObject } from 'lodash';
@ -45,6 +45,7 @@ import { isFunction, isObject } from 'lodash';
import mergeJsonSchemas from 'merge-json-schemas';
import { SyncBailHook, SyncHook, SyncWaterfallHook } from 'tapable';
import { normalizePasses } from '../plugins/MultiPassRendererPlugin';
import { BlendTypes } from '../utils/blend';
import baseLayerSchema from './schema';
/**
* 分配 layer id
@ -55,6 +56,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
implements ILayer {
public id: string = `${layerIdCounter++}`;
public name: string;
public type: string;
public visible: boolean = true;
public zIndex: number = 0;
public minZoom: number;
@ -81,6 +83,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
afterPickingEncode: new SyncHook<void>(),
beforeHighlight: new SyncHook<[number[]]>(['pickedColor']),
afterHighlight: new SyncHook<void>(),
beforeSelect: new SyncHook<[number[]]>(['pickedColor']),
afterSelect: new SyncHook<void>(),
beforeDestroy: new SyncHook<void>(),
afterDestroy: new SyncHook<void>(),
};
@ -142,6 +146,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
private configSchema: object;
private currentPickId: number | null = null;
private rawConfig: Partial<ILayerConfig & ChildLayerStyleOptions>;
private needUpdateConfig: Partial<ILayerConfig & ChildLayerStyleOptions>;
@ -159,8 +165,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
private scaleOptions: IScaleOptions = {};
constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions>) {
constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
super();
this.name = config.name || this.id;
this.rawConfig = config;
}
@ -214,7 +221,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
public init() {
// 设置配置项
const sceneId = this.container.get<string>(TYPES.SceneID);
this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
this.configService.setLayerConfig(sceneId, this.id, {});
// 全局容器服务
this.iconService = this.container.get<IIconService>(TYPES.IIconService);
@ -291,10 +298,15 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
this.inited = true;
this.hooks.afterInit.call();
// 更新 module 样式
this.updateLayerConfig({
...this.rawConfig,
...(this.getDefaultConfig() as object),
});
this.buildModels();
// 触发初始化完成事件;
this.emit('inited');
this.emit('added');
return this;
}
@ -437,12 +449,17 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
public active(options: IActiveOption) {
this.updateLayerConfig({
enableHighlight: isObject(options) ? true : options,
highlightColor: isObject(options)
? options.color
: this.getLayerConfig().highlightColor,
});
const activeOption: Partial<ILayerConfig> = {};
activeOption.enableHighlight = isObject(options) ? true : options;
if (isObject(options)) {
activeOption.enableHighlight = true;
if (options.color) {
activeOption.highlightColor = options.color;
}
} else {
activeOption.enableHighlight = !!options;
}
this.updateLayerConfig(activeOption);
return this;
}
public setActive(
@ -464,10 +481,22 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
? options.color
: this.getLayerConfig().highlightColor,
});
this.interactionService.triggerActive(id);
}
}
public select(option: IActiveOption | false): ILayer {
const activeOption: Partial<ILayerConfig> = {};
activeOption.enableSelect = isObject(option) ? true : option;
if (isObject(option)) {
activeOption.enableSelect = true;
if (option.color) {
activeOption.selectColor = option.color;
}
} else {
activeOption.enableHighlight = !!option;
}
this.updateLayerConfig(activeOption);
return this;
}
@ -475,12 +504,36 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
id: number | { x: number; y: number },
options?: IActiveOption,
): void {
throw new Error('Method not implemented.');
if (isObject(id)) {
const { x = 0, y = 0 } = id;
this.updateLayerConfig({
selectColor: isObject(options)
? options.color
: this.getLayerConfig().selectColor,
});
this.pick({ x, y });
} else {
this.updateLayerConfig({
pickedFeatureID: id,
selectColor: isObject(options)
? options.color
: this.getLayerConfig().selectColor,
});
this.interactionService.triggerSelect(id);
}
}
public setBlend(type: keyof typeof BlendType): void {
this.updateLayerConfig({
blend: type,
});
this.layerModelNeedUpdate = true;
this.render();
}
public show(): ILayer {
this.updateLayerConfig({
visible: true,
});
return this;
}
@ -497,6 +550,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
return this;
}
public setCurrentPickId(id: number) {
this.currentPickId = id;
}
public getCurrentPickId(): number | null {
return this.currentPickId;
}
public isVisible(): boolean {
const zoom = this.mapService.getZoom();
@ -641,15 +701,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
fs,
vs,
elements,
blend: {
enable: true,
func: {
srcRGB: gl.SRC_ALPHA,
srcAlpha: 1,
dstRGB: gl.ONE_MINUS_SRC_ALPHA,
dstAlpha: 1,
},
},
blend: BlendTypes[BlendType.normal],
...rest,
});
}
@ -666,6 +718,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
throw new Error('Method not implemented.');
}
protected getModelType(): unknown {
throw new Error('Method not implemented.');
}
protected getDefaultConfig() {
return {};
}
private splitValuesAndCallbackInAttribute(
valuesOrCallback?: unknown[],
defaultValues?: unknown[],

16
packages/layers/src/core/BaseModel.ts
View File

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

8
packages/layers/src/heatmap/index.ts
View File

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

2
packages/layers/src/heatmap/models/heatmap.ts
View File

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

57
packages/layers/src/line/dash.ts
View File

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

16
packages/layers/src/line/index.ts
View File

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

Some files were not shown because too many files have changed in this diff Show More