Merge branch 'master' into docs

.github/CONTRIBUTING.md

@@ -0,0 +1,84 @@
+# Contributing to L7
+
+👍🎉 欢迎向 L7 贡献代码! 🎉👍
+
+## 前置依赖安装
+
+### 安装 Yarn
+
+由于使用了 Yarn workspace，首先需要安装 Yarn：https://yarnpkg.com/en/docs/install#windows-stable
+
+### Windows 环境配置
+
+[L7 测试方案](https://github.com/antvis/L7/blob/master/dev-docs/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E6%96%B9%E6%A1%88.md)依赖 headless-gl，其中需要 node-gyp [编译本地依赖](https://github.com/nodejs/node-gyp#on-windows)。
+
+1. 首先以管理员身份启动 PowerShell
+2. 运行 `npm install --global --production windows-build-tools`，安装 Microsoft's windows-build-tools
+
+安装过程中其他问题[详见](https://github.com/antvis/L7/issues/101)。
+
+## 安装依赖
+
+安装依赖并完成 Yarn workspace 初始化：
+```bash
+yarn install
+```
+
+### Windows
+
+```bash
+copy node_modules/gl/deps/windows/dll/x64/*.dll c:\windows\system32
+```
+
+## 运行 DEMO
+
+启动各个 package 代码变更监听：
+```bash
+yarn watch
+```
+
+启动 Storybook，会自动打开 `http://localhost:6006/`：
+```bash
+yarn storybook
+```
+
+## 运行测试
+
+运行单元测试：
+```bash
+yarn test
+```
+
+运行单元测试并查看代码覆盖率：
+```bash
+yarn coveralls
+```
+
+## 添加 Lerna package
+
+添加一个新的 lerna package：
+```bash
+lerna create my-pack -y
+```
+
+将 ui-lib 作为 my-pack 的依赖：
+```bash
+yarn workspace my-pack add ui-lib/1.0.0
+```
+
+将 lodash 添加为所有 package 的依赖(不包含root）
+```bash
+yarn workspaces run add lodash
+```
+
+将 typescript 设置为 root 的开发依赖
+```bash
+yarn add -W -D typescript jest
+```
+
+## 提交代码
+
+代替 `git commit` 提交：
+```bash
+yarn commit
+```

.storybook/webpack.config.js

@@ -1,9 +1,9 @@
 module.exports = ({ config }) => {
 
-  // config.module.rules.push({
+  config.module.rules.push({
-  //   test: /\.glsl$/,
+    test: /\.glsl$/,
-  //   loader: 'raw-loader'
+    loader: 'raw-loader'
-  // });
+  });
 
   // config.module.rules.push({
   //   test: /\.worker\.(js|ts)$/,

.travis.yml

@@ -1,4 +1,15 @@
 language: node_js
+os: linux
+sudo: required
+dist: trusty
+addons:
+  apt:
+    packages:
+    - mesa-utils
+    - xvfb
+    - libgl1-mesa-dri
+    - libglapi-mesa
+    - libosmesa6
 
 node_js:
   - '12'
@@ -13,6 +24,10 @@ before_install:
 install:
   - yarn install
 
+before_script:
+  - export DISPLAY=:99.0; sh -e /etc/init.d/xvfb start
+
 script:
   - yarn lint
   - yarn test
+  - yarn build

CHANGELOG.md

@@ -1,9 +1,344 @@
+# Change Log
+
+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.16](https://github.com/antvis/L7/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2019-11-29)
+
+**Note:** Version bump only for package L7
+
+
+
+
+
+# [2.0.0-beta.15](https://github.com/antvis/L7/compare/v2.0.0-beta.14...v2.0.0-beta.15) (2019-11-29)
+
+
+### Bug Fixes
+
+* **control:** lint error ([c863d7c](https://github.com/antvis/L7/commit/c863d7c8d15e560e3dfaf39d0ea3fac3242d776a))
+* **map:** temporarily closed  amap offset coordinate ([9a20f64](https://github.com/antvis/L7/commit/9a20f6480321c9297ff27fe4cfe6af9032fcb969))
+
+
+
+
+
+# [2.0.0-beta.14](https://github.com/antvis/L7/compare/v2.0.0-beta.13...v2.0.0-beta.14) (2019-11-28)
+
+**Note:** Version bump only for package L7
+
+
+
+
+
+# [2.0.0-beta.13](https://github.com/antvis/L7/compare/v2.0.0-beta.12...v2.0.0-beta.13) (2019-11-28)
+
+**Note:** Version bump only for package L7
+
+
+
+
+
+# [2.0.0-beta.12](https://github.com/antvis/L7/compare/v2.0.0-beta.11...v2.0.0-beta.12) (2019-11-28)
+
+
+### Bug Fixes
+
+* **component:** fix marker ([14d4818](https://github.com/antvis/L7/commit/14d48184a1579241b077110ed51a8358de25e010))
+
+
+
+
+
+# 2.0.0-beta.11 (2019-11-28)
+
+
+### Bug Fixes
+
+* **active:** fliter acitve ([c603e30](https://github.com/antvis/L7/commit/c603e30e2368310c3bbb2559d6c1a703c489634b))
+* **babel:** gatsby env ([a0f249e](https://github.com/antvis/L7/commit/a0f249e40f18f712c522b2ccf3adf4434b9c2837))
+* **component:** rename  IPopupService ([a553111](https://github.com/antvis/L7/commit/a553111340065525be993b6a8df2754653880c59))
+* **demo:** bugs ([5a857f9](https://github.com/antvis/L7/commit/5a857f9c1b707c91cbc07b0fc4878be3fe56011b))
+* **demo:** demo ([a4e49a6](https://github.com/antvis/L7/commit/a4e49a6f6b25f585ba224f6d92fafd5cb5e0113f))
+* **demo:** demo ([3792e6c](https://github.com/antvis/L7/commit/3792e6c3ea55860dd8cffbab1b68a2c212052aca))
+* **demo:** gatsby ([5faac23](https://github.com/antvis/L7/commit/5faac2306c34ac8f3a02fdc61ad18337a4df7f49))
+* **demo:** gatsby ([b6a1785](https://github.com/antvis/L7/commit/b6a1785a0ba432134495f6d9ac65f92ecc045fe8))
+* **demo:** update demo ([3ae610f](https://github.com/antvis/L7/commit/3ae610f81421fb2720966dde76f5988dac8acc02))
+* **demo:** update demo ([f073b39](https://github.com/antvis/L7/commit/f073b3900b3bb7bdf030654c9e4bc71972179e84))
+* **doc:** file name lowercase ([3cbdc9c](https://github.com/antvis/L7/commit/3cbdc9c7f1d9be34e9c917f05531323946993eb4))
+* **fix:** fix ([f40e44f](https://github.com/antvis/L7/commit/f40e44ffa07d33d6fbf828e8a006f0ec708612f3))
+* **fix confilict:** conflict ([8a09ae2](https://github.com/antvis/L7/commit/8a09ae24bef7ba845e5b16759b3ecac210e472c5))
+* **fix css:** fix css png ([f7e5376](https://github.com/antvis/L7/commit/f7e5376b7d6c64b2b078dca8f2a230f4fce14c68))
+* **fix css:** fix css png ([da604e2](https://github.com/antvis/L7/commit/da604e266f36b70fcc7faa23fa7fe3359d3a1318))
+* **l7:** modules import ([7106b4f](https://github.com/antvis/L7/commit/7106b4f7ad494541ee2f8f56018d18a19c940ada))
+* **layer render:** scene 创建完成字段调用render方法 ([b5112a5](https://github.com/antvis/L7/commit/b5112a575083add0be1b770f7dafbc3644339230))
+* **layers:** heatmap 3d effect ([38d1736](https://github.com/antvis/L7/commit/38d173610fbf729dfc3a6fae94ad27bb68f33cb8))
+* **layerservice:** fix init bugs in layer service ([8cbbf7b](https://github.com/antvis/L7/commit/8cbbf7b28d63f4df16f061a4ae21726f243e7108))
+* **layerservice:** fix init bugs in layer service ([8844243](https://github.com/antvis/L7/commit/8844243050f619b28043c4e9ed1942fe172f561e))
+* **maker:** marker demo ([34d4d68](https://github.com/antvis/L7/commit/34d4d68151fe09992ec26bcec83a9862f6591920))
+* **maker:** marker demo ([685e17b](https://github.com/antvis/L7/commit/685e17bf44033ad86d7fd7793605018bbdc71206))
+* **map:** amap contanier creat new amap div ([bf43136](https://github.com/antvis/L7/commit/bf4313678501ec9c96da43de87b3b8dbf7be4c18))
+* **map:** export l7-maps in CDN bundle ([9d08549](https://github.com/antvis/L7/commit/9d085491f697ac2c17b80c55df8cc97e3e2c2298))
+* **map:** use P20 offset coordinates ([393e891](https://github.com/antvis/L7/commit/393e891a22098db3bcfb036a7182a45238ca6a73)), closes [#94](https://github.com/antvis/L7/issues/94)
+* **modules:** remove node_modules ([4239ca8](https://github.com/antvis/L7/commit/4239ca80dec24cfd92ad2f244f50337a3ae03d36))
+* **packages:** remove sub modules node_modules ([132b99e](https://github.com/antvis/L7/commit/132b99e4d2bef7ec5565a0b18c5659e8b246944b))
+* **site:** 首页头图位置,以及英文大小写 ([1c1f5b1](https://github.com/antvis/L7/commit/1c1f5b1f1efe150cbbc572fb6408141fbc97dc81))
+* chart demo code ([213a4bd](https://github.com/antvis/L7/commit/213a4bdb60a2a17670ae0d20a6f03efe3d9ba7c6))
+* eslint bug ([52e8afc](https://github.com/antvis/L7/commit/52e8afcb345151f4e544a4227590e6eebd7b42bd))
+* eslint missing in devDependencies ([3858f45](https://github.com/antvis/L7/commit/3858f4541ebce87f55b528625b33ff99c77fdd76))
+* **readme:** readme ([38d7c95](https://github.com/antvis/L7/commit/38d7c9520b5ef16e1c1b9468757703afc6f9ad52))
+* **render:** gl type ([f0d49d9](https://github.com/antvis/L7/commit/f0d49d915717c6799faabcb149339ec73923e616))
+* **rm cache:** rm cache ([51ea07e](https://github.com/antvis/L7/commit/51ea07ea664229f775b7c191cfde68299cc8c2d5))
+* **site:** site img ([0aabc0f](https://github.com/antvis/L7/commit/0aabc0f91b2488e09a0ccab5adb08df68ceb9c6e))
+* **site:** site img ([96d94d7](https://github.com/antvis/L7/commit/96d94d7f3889425568abf28d6fb9cc84b1ade53e))
+* **travis:** update travis ([2ac66b4](https://github.com/antvis/L7/commit/2ac66b4b50abfd0e7ddb998d54b698a718c1f86b))
+* **travis:** update travis ([909c9d1](https://github.com/antvis/L7/commit/909c9d18feb3bc6791be7ade9691295fa235e348))
+* babel.config.js for gatsby ([6c2cb7c](https://github.com/antvis/L7/commit/6c2cb7c7ddfab2b4ac84231f3a1558280589f996))
+* gatsby site examples ([624a88b](https://github.com/antvis/L7/commit/624a88b28843c8d62e7701eecbec1a6344c9cacc))
+* locale.json should be valid json ([a75c435](https://github.com/antvis/L7/commit/a75c43591ab68e9930e7ef60fa0d90e86b9c8db0))
+* locale.json should be valid json ([9ff435f](https://github.com/antvis/L7/commit/9ff435f52b75cc1535f17911cfbce51f9cfabf46))
+* **event:** add touch event ([e37a3eb](https://github.com/antvis/L7/commit/e37a3ebb8a95a0b2409dcc6db8423ae8e8797e4a))
+* **extrude:** add geojson rewind ([0d833f5](https://github.com/antvis/L7/commit/0d833f52d6757d324212730fee260b63635ef31e))
+* **extrude:** add geojson rewind ([12ca2c7](https://github.com/antvis/L7/commit/12ca2c7e36d5aa3611dbb6b784d4883ddda1a2f1))
+* **layer:** 修复数据更新数据为空 ([96bc0fc](https://github.com/antvis/L7/commit/96bc0fc1c0d570f0ceda7451c0594220543cd04d))
+* **layer:** 修复数据更新数据为空 ([d708f85](https://github.com/antvis/L7/commit/d708f85b1f366c39ddb32409e220bec21aa98915))
+* **layer:** eslint err ([6911b3f](https://github.com/antvis/L7/commit/6911b3f4e9be5e531c201cf860f48cdbd157b84e))
+* **layer:** eslint err ([219b8c1](https://github.com/antvis/L7/commit/219b8c12a4d4122f2f6995c3ebd86c271d5dc3c5))
+* **layers:** heatmap 3d effect ([c99bb27](https://github.com/antvis/L7/commit/c99bb27d94ad9b6b1e85b7b153953dd2a7455db8))
+* **line-layer:** 修复相邻线段重叠情况下的接头处理 ([d4a8f29](https://github.com/antvis/L7/commit/d4a8f2943e4efcbf0d7aa8a223aa343135a8662b))
+* **line-layer:** 修复相邻线段重叠情况下的接头处理 ([badca04](https://github.com/antvis/L7/commit/badca0446d79701fc5545fe84261456f76f85ca8))
+* **lint:** lint warning ([66c4304](https://github.com/antvis/L7/commit/66c4304c14d759d1ccb3301fd638c75bfbfb8031))
+* **lint:** lint warning ([45ec241](https://github.com/antvis/L7/commit/45ec241ed3fe6124daeaac32dfa94ba8af35f89d))
+* **map:** map style map ([9ab41ff](https://github.com/antvis/L7/commit/9ab41ff9d224b06be89c2ee50b40500b479aec3d))
+* **map:** map style map ([ac1056c](https://github.com/antvis/L7/commit/ac1056c3a28b71f622118ee6e05f8b163ce80b67))
+* **package:** update version ([e6bf285](https://github.com/antvis/L7/commit/e6bf28557cabecbde6db546c4d990294aeacc4c7))
+* **package:** update version ([1db0b47](https://github.com/antvis/L7/commit/1db0b4717227e05b7c60f0968c072a7aea1a8147))
+* **point:** 修复shape映射,图片加载的事件 ([8d54bc6](https://github.com/antvis/L7/commit/8d54bc6ab59a09f2f75015271dcf1862e1e1dffd))
+* **point:** 修复shape映射,图片加载的事件 ([84a55df](https://github.com/antvis/L7/commit/84a55dfdcd19c164cbb0136491123b0984a06f03))
+* **point-layer:** adjust shift bits in vertex compression ([1104e3a](https://github.com/antvis/L7/commit/1104e3afc5168f0bdf2411d9c8e4da95c72d1b8c))
+* **point-layer:** adjust shift bits in vertex compression ([865875d](https://github.com/antvis/L7/commit/865875d47874faec65f4c81f8f97c4be3fd04d5a))
+* **polygon-layer:** 修复 demo ([b4fdc97](https://github.com/antvis/L7/commit/b4fdc97b56929c372c1e2b2b5bfad1ffa483636b))
+* **polygon-layer:** 修复 demo ([f382bdb](https://github.com/antvis/L7/commit/f382bdbc0de1a48ddd6e11039e497d04dee588e5))
+* **poylygon:** json source ([3296975](https://github.com/antvis/L7/commit/3296975d0486f27e5000889e515dea70aacde1f7))
+* **poylygon:** json source ([0b099ca](https://github.com/antvis/L7/commit/0b099cac5e72241b97214639fa849bef112f6fd5))
+* **raster layer:** raster layer triangle ([cce659a](https://github.com/antvis/L7/commit/cce659aaa1fda8e6964bc6c839b875fa05a89c7d))
+* **raster layer:** update raster triangle ([b0f6265](https://github.com/antvis/L7/commit/b0f6265cd3b16c6ff39d0a6693788a25fca7bda2))
+* **scene:**  engine run ([c5ada86](https://github.com/antvis/L7/commit/c5ada860bb957918413437619c16064d27df86dc))
+* **travis:** travis nodejs  version ([93d1578](https://github.com/antvis/L7/commit/93d1578a77e6c017aad4ad200f543bae518290e6))
+* control css ([09ebe29](https://github.com/antvis/L7/commit/09ebe2981eff86b396594e73f975316370eb42e6))
+* **rendermask:** maskmesh ([1c2c33e](https://github.com/antvis/L7/commit/1c2c33ed05eca8efd722bdfdab2187c0e6f8e381))
+* **rendermask:** maskmesh ([d55ffff](https://github.com/antvis/L7/commit/d55ffff5aa9a87a3f4130b0a34ca69375de9ba83))
+* **scene:**  engine run ([9d8e531](https://github.com/antvis/L7/commit/9d8e531df67ea4603377abf30749cc9cf7724a1a))
+* **src:** lint err ([b269222](https://github.com/antvis/L7/commit/b269222d3d45337026b783877473e8b5fa837f68))
+* **src:** lint err ([9b4216d](https://github.com/antvis/L7/commit/9b4216db5159c6a5f4745d07adc8788a690dec84))
+* **style:** update bug ([a0ad3c4](https://github.com/antvis/L7/commit/a0ad3c42fdfd803f4d7d0abe960eb092b2cc0475))
+* **text:** demo ([bae149e](https://github.com/antvis/L7/commit/bae149e91d3cd83e30671ca5afe13c2452a00379))
+* **text:** demo ([71fcf42](https://github.com/antvis/L7/commit/71fcf42ff86286e4817e97576a98383ace244ee6))
+* **text:** shader defines ([0d9beb8](https://github.com/antvis/L7/commit/0d9beb8fe677d37414ea9e8c225603a07163a2bf))
+* **text:** shader defines ([408ce92](https://github.com/antvis/L7/commit/408ce92bfdcfde317f3385a3de16fe67d12f2ba2))
+* bevel joint in dashline ([03ce45c](https://github.com/antvis/L7/commit/03ce45c7ca4e2bb7519b2a95982e8d61cea6c973))
+* bevel joint in dashline ([dd8fcfa](https://github.com/antvis/L7/commit/dd8fcfab7a8c778d57d4e62b233cf6c1e3bb17da))
+* meshline triangulation bug ([9d530cb](https://github.com/antvis/L7/commit/9d530cb27babb7766348506ac94e66d506104f2b))
+* meshline triangulation bug ([b34ba8b](https://github.com/antvis/L7/commit/b34ba8b6a79e9e374cc497c4f7bf728b08465e63))
+* update babel.config.js ([fc45854](https://github.com/antvis/L7/commit/fc458545aaae8b1e76c77c52af604b68a34de94f))
+* **Amap:** fix map ([2a84b54](https://github.com/antvis/L7/commit/2a84b5480eaf6998139736d2bae84b9729f315b5))
+* **Amap:** fix map ([64906f7](https://github.com/antvis/L7/commit/64906f7e9d9cb8658fdf11454a64f76564154ffd))
+* **Amap:** fix mapstyle ([83df28b](https://github.com/antvis/L7/commit/83df28b24603595fc6e8e7051c1559d858176ad7))
+* **Amap:** fix mapstyle ([9be646b](https://github.com/antvis/L7/commit/9be646b8ab5dd77d4c03520ac6a34186bc9df2cf))
+* **Amap:** setstyle ([6588614](https://github.com/antvis/L7/commit/6588614d7f5238f29dfb51d461d18035eb142999))
+* **Amap:** setstyle ([907ea56](https://github.com/antvis/L7/commit/907ea56ece29e90681e55e12f0afadccff129bcf))
+* **code:** shaderpass ([349e04a](https://github.com/antvis/L7/commit/349e04a20634c6ddfbec9236c895781e03f309a1))
+* **code:** shaderpass ([65df7ce](https://github.com/antvis/L7/commit/65df7ce180578e9e9ae89b3c7fd015445a938184))
+* **core:** delete composer.js ([b558371](https://github.com/antvis/L7/commit/b5583715e3d4f4b927b2cdf6543d854e019065d4))
+* **core:** delete composer.js ([1ca12ff](https://github.com/antvis/L7/commit/1ca12ff2f9ad2db4f186e56856f36b7581e4c33a))
+* **core:** file name ([d79d7a3](https://github.com/antvis/L7/commit/d79d7a3df4ba26a53306e121f0df2abb2c3c5fae))
+* **core:** file name ([cd65288](https://github.com/antvis/L7/commit/cd652880bfc822a937e55f06cfafc6edcddad3f8))
+* **core:** shaderpass ([9d936e7](https://github.com/antvis/L7/commit/9d936e7a3c8bc3de3218d9bff0be39ecf92322fc))
+* **core:** shaderpass ([07672fe](https://github.com/antvis/L7/commit/07672fe2195a99dc974fe9c5c87e0243426abb60))
+* **geojson:** geometry is null ([3fc7747](https://github.com/antvis/L7/commit/3fc7747a1685955904a39b64270052751964dcdc))
+* **geojson:** geometry is null ([9d8bfb1](https://github.com/antvis/L7/commit/9d8bfb159a3b3076edb7220858d2e9dd2857f4a4))
+* **gloal:** snap ([8e4b4d3](https://github.com/antvis/L7/commit/8e4b4d31ae9827f53f7351c5034449f16664246a))
+* **gloal:** snap ([14b261c](https://github.com/antvis/L7/commit/14b261c2bcb77795d82e27feaf4cc159dfd58591))
+* **heat-map:** 修复bbox计算逻辑 ([13583ea](https://github.com/antvis/L7/commit/13583eab7ae53765134a154d7002226b6d649504))
+* **heat-map:** 修复bbox计算逻辑 ([7d7cbda](https://github.com/antvis/L7/commit/7d7cbda53cb31c67e7397dccff7b91c77b4c1afc))
+* **heat-map:** 渲染逻辑 & bbox ([62932e0](https://github.com/antvis/L7/commit/62932e093ff180bdff69f185bc9ce8720d7702f2))
+* **heat-map:** 渲染逻辑 & bbox ([b0df153](https://github.com/antvis/L7/commit/b0df153670567e4ff055094bb46548db91f3ab2b))
+* **heatmap:** 解决颜色插值问题，优化渲染性能 ([507a353](https://github.com/antvis/L7/commit/507a3537f50f45936391d9e312982d852f0d45ef))
+* **heatmap:** 解决颜色插值问题，优化渲染性能 ([45db805](https://github.com/antvis/L7/commit/45db805a6889b4435d946ae0f35cb4d1e141f92f))
+* **heatmap:** performance ([724d73b](https://github.com/antvis/L7/commit/724d73bd8478ea312871578c24de801e6599cd05))
+* **heatmap:** performance ([5e2ebd3](https://github.com/antvis/L7/commit/5e2ebd3dadd76d675b2ff8bc8869fdc7a2a7b966))
+* **heatmap:** setValue ([208ed7f](https://github.com/antvis/L7/commit/208ed7f6136e748439a81e4a854e454e7c2f9dd2))
+* **heatmap:** setValue ([2da2c1f](https://github.com/antvis/L7/commit/2da2c1f2af500cc88b67104a3b841c73ce80955d))
+* **imagedata:** image from origin data ([3928fe5](https://github.com/antvis/L7/commit/3928fe5233bf120a1b85268018c7a35b4c15d707))
+* **imagedata:** image from origin data ([66f0e94](https://github.com/antvis/L7/commit/66f0e94fa47309ca3cb2373d52e3ef5257bea42d))
+* **l7:** update package ([ee54e52](https://github.com/antvis/L7/commit/ee54e529b2fe05fa0fb5dff196af363aa651f8ac))
+* **l7:** update package ([f669629](https://github.com/antvis/L7/commit/f66962976961ebaad3915875a5bb8b13092a65ee))
+* **layer:** conflict ([1f54741](https://github.com/antvis/L7/commit/1f5474180fcc6914d272a96db951820d0bcde606))
+* **layer:** conflict ([bcc7388](https://github.com/antvis/L7/commit/bcc7388df224a8b7d96b7085ba535592d1e9aecb))
+* **line:** default activeId ([fdec4b1](https://github.com/antvis/L7/commit/fdec4b1a49c4c7b49d410e7ed784c556b4a9ed19))
+* **line:** default activeId ([1491a7b](https://github.com/antvis/L7/commit/1491a7b0aa0c4bd7e89c2dd3bfe5580a3f9cf7b2))
+* **mapbox:** scale ([f2d9214](https://github.com/antvis/L7/commit/f2d9214e075bdfee1913bbc5c6758e3346edebc8))
+* **mapbox:** scale ([e0f7ff3](https://github.com/antvis/L7/commit/e0f7ff398c5d08be598c19c15ef3a1b999ee851a))
+* **package:** update version ([580b4ef](https://github.com/antvis/L7/commit/580b4ef39d93b43ab84c7f15e7f4426c2afa90f6))
+* **package:** update version ([7a55d07](https://github.com/antvis/L7/commit/7a55d07664c63b0a2cdd2706f13cbbc52d73a6fa))
+* **package:** update version ([92cb458](https://github.com/antvis/L7/commit/92cb458c9820cdd9a2de2e36ae79222be035d741))
+* **package:** update version ([335021d](https://github.com/antvis/L7/commit/335021de1b3142b3c3c8efe19030c365a245a3cf))
+* **pick:** event ([5d2b690](https://github.com/antvis/L7/commit/5d2b6902f64c04bd44e2ade8bf7244d8181bb19d))
+* **pick:** event ([952e03a](https://github.com/antvis/L7/commit/952e03aeb16de63a2562d5ee2ba8818d97da824b))
+* **raster:** layer clone typeArray ([7ca322d](https://github.com/antvis/L7/commit/7ca322d234a2b14f79dfeefb8bbb8ea2ef9d0ea1))
+* **raster:** layer clone typeArray ([29bcb5d](https://github.com/antvis/L7/commit/29bcb5d3003085d1035f0b334586bd44d063019b))
+* **renderTarget:** 修复了threeJS更新版本后引发的renderPass渲染问题 ([a2e00e3](https://github.com/antvis/L7/commit/a2e00e382b0dbb4b2708bc36cbf4e32ef74d18a2))
+* **renderTarget:** 修复了threeJS更新版本后引发的renderPass渲染问题 ([81e0f15](https://github.com/antvis/L7/commit/81e0f15873e7d3ae945b95248e2f184d6e9b3f67))
+* **scene:** event on map ([7b58386](https://github.com/antvis/L7/commit/7b583866fa80f283a736f9cabed232f46a683f06))
+* **scene:** event on map ([cf5444f](https://github.com/antvis/L7/commit/cf5444f0a6d5018a6a737bee14e7f46e43514440))
+* **scene:** render ([6ba7f07](https://github.com/antvis/L7/commit/6ba7f07c7d1d0f11d280dc5a049dca6e75f31ea2))
+* **scene:** render ([97af34f](https://github.com/antvis/L7/commit/97af34f5953d3b5b881c09358772fb84f88f543f))
+* **source:** cluster layer ([abc4bf1](https://github.com/antvis/L7/commit/abc4bf10906469d8bd3b64dd7aae322b7379a366))
+* **source:** cluster layer ([642a841](https://github.com/antvis/L7/commit/642a841f10aca0d4ba93481874a8240064465969))
+* **source:** geojson parser filter invalid ([d546527](https://github.com/antvis/L7/commit/d5465275a05f85f401d80a48f6fda26844c550e6))
+* **source:** geojson parser filter invalid ([2702f02](https://github.com/antvis/L7/commit/2702f028b05ed808b8050ca495eddcd0187569fc))
+* **source:** import supercluster ([e69f860](https://github.com/antvis/L7/commit/e69f8600450d255855ab55ee01fdf5ad3e64c6f2))
+* **source:** import supercluster ([b00bcaf](https://github.com/antvis/L7/commit/b00bcaf150b563d15af4d7f709a86dcb13909e1c))
+* **src:** require 引入方式切换成import ([988afc1](https://github.com/antvis/L7/commit/988afc18af4b0081c4ec1ce14bd2f9b18826bc67))
+* **src:** require 引入方式切换成import ([f652dca](https://github.com/antvis/L7/commit/f652dcae7a0dac2e08419ff6f2b8abcdda84e8b6))
+* **test:** compile threejs source ([bd53b2b](https://github.com/antvis/L7/commit/bd53b2bd89b57317a09637567fec443e651b8d84))
+* **test:** use the proper version of torchjs and babel, etc. ([758db46](https://github.com/antvis/L7/commit/758db46202136428803f24d40db2f43b996d3c98))
+* **text:** layer ([f527be2](https://github.com/antvis/L7/commit/f527be22cc4ac5e6e2dc715e4f666e1c0f72f954))
+* **text:** layer ([725c0cf](https://github.com/antvis/L7/commit/725c0cf232ee801fdd7c1f3ab6ff4227f5e6ab9e))
+* **threejs:** remove unuse import ([6c283ef](https://github.com/antvis/L7/commit/6c283ef1b0870cce29dc001cf2f57e648b25c75a))
+* **threejs:** remove unuse import ([a93d34b](https://github.com/antvis/L7/commit/a93d34b8215aadd331616ba289cc18e33c69ed13))
+* **tile:** vectorMap ([fe345e1](https://github.com/antvis/L7/commit/fe345e1579d6a8e31e7f935a91de908779cb354c))
+* **tile:** vectorMap ([0888f31](https://github.com/antvis/L7/commit/0888f31769c13aee825c0b97e38ac788608bbc10))
+* **tilelayer:** point pickup ([facce2a](https://github.com/antvis/L7/commit/facce2a255ca4b43ba120f5d58457c7f41b81044))
+* **tilelayer:** point pickup ([cef72bc](https://github.com/antvis/L7/commit/cef72bc497b50b0150cb0dd62002791fbaf284e7))
+* **transform:** stattistics ([3745540](https://github.com/antvis/L7/commit/374554037c764867d63f31bbbcb22ec522d14c51))
+* **transform:** stattistics ([49d8f60](https://github.com/antvis/L7/commit/49d8f603cd6d24f757c52db7d022a3f4bcd5d788))
+* **util:** extent ([e20c4ca](https://github.com/antvis/L7/commit/e20c4cabcf7f287e3ab63483f26aec9d0e9d8fff))
+* **util:** extent ([0ee3ce9](https://github.com/antvis/L7/commit/0ee3ce958d8a752aab95dc29518c6e20e096e720))
+* **util:** geo convert ([7c555c2](https://github.com/antvis/L7/commit/7c555c2cf11fdbe3355f7f5aa8ca506abdb540ff))
+* **util:** geo convert ([113aae9](https://github.com/antvis/L7/commit/113aae900b354447d20ad2e26a88f497671d5837))
+
+
+### Features
+
+* **add l7 site:** add websites ([0463ff8](https://github.com/antvis/L7/commit/0463ff874eab1c484b593e8c02f73c85a02c000c))
+* **add point demo:** add demo ([cfecc93](https://github.com/antvis/L7/commit/cfecc930454c7b0a49884d383464c3d579ff8bf1))
+* **add point demo:** add demo ([90f6945](https://github.com/antvis/L7/commit/90f6945feb4818842c6231f5b5683db6cda15a73))
+* **attr:** add pattern ([a5767f2](https://github.com/antvis/L7/commit/a5767f25753b902c896799eb396da4594aec1522))
+* **attr:** add pattern ([1eef58a](https://github.com/antvis/L7/commit/1eef58a29a167c1045a7cf1c2cfee38d7b60cadc))
+* **chart:** add chart demo ([2a19b07](https://github.com/antvis/L7/commit/2a19b07c1bca7dfbf191618f15ab06a18c262148))
+* **chart:** add chart demo ([12cc906](https://github.com/antvis/L7/commit/12cc906139ae20583174ddf12c1c0cce96da44c4))
+* **component:** add layer control ([7f4646e](https://github.com/antvis/L7/commit/7f4646efd3b0004fde4e9f6860e618c7668af1a7))
+* **component:** add scale ,zoom, popup, marker map method ([a6baef4](https://github.com/antvis/L7/commit/a6baef4954c11d9c6582c27de2ba667f18538460))
+* **control:** add marker ([c83f1c3](https://github.com/antvis/L7/commit/c83f1c3d0b1f325c7328bf465164901fc5a84e90))
+* **control:** add marker ([39e870a](https://github.com/antvis/L7/commit/39e870af093cd67aa428dc44ac71e26f072c47e3))
+* **control:** add scale, layer.zoom control ([f6983ac](https://github.com/antvis/L7/commit/f6983ac907730a8421648a3e439830ec9bdf8904))
+* **control:** add scale, layer.zoom control ([1bd12f1](https://github.com/antvis/L7/commit/1bd12f15605b651073bd64a31e53d0c7428e34df))
+* **core:** add map method ([853c190](https://github.com/antvis/L7/commit/853c1901fbb8559a9d3bdb3631ec13a7dcaf0ea7))
+* **demo:** add point chart demo ([8c2e4a8](https://github.com/antvis/L7/commit/8c2e4a82bf7a49b29004d5e261d8e9c46cd0bd9d))
+* **demo:** add point chart demo ([fe5d8cd](https://github.com/antvis/L7/commit/fe5d8cdb324fbdcc28ac20d243b7a945e80e79e5))
+* **demo:** normalization demo ([09e2e22](https://github.com/antvis/L7/commit/09e2e22fcc54d9dd308ad0dba14d88e003ebe5d2))
+* **demo:** normalization demo ([67edabe](https://github.com/antvis/L7/commit/67edabeac7d1d97e6659f111108611d6d568c270))
+* **filter:** filter by pickids ([a0499b7](https://github.com/antvis/L7/commit/a0499b78d1c7e9ca9659ca71b468430fada8d31f))
+* **json:** point数据coord 设置支持数组 ([fb5be34](https://github.com/antvis/L7/commit/fb5be34932b1dac06c0476ec71b370d42b400d76))
+* **json:** point数据coord 设置支持数组 ([a4ad61f](https://github.com/antvis/L7/commit/a4ad61fac37955d43a1aa630c79fcb46a6c74a3e))
+* **layer:** 新增sourceplugin, attribute 增加类型判断 ([2570b8c](https://github.com/antvis/L7/commit/2570b8c242af29bae07640b1ec7eaadfb04ec9d6))
+* **layer:** add arc2d layer ([420459c](https://github.com/antvis/L7/commit/420459ce5aee91dc8d6f770a2a2078c7e5bca4bf))
+* **layer:** add imagelayer ([a995815](https://github.com/antvis/L7/commit/a995815284652ca5d6e013c547b617fa52039ddc))
+* **layer:** add point line polygon image layer ([54f28be](https://github.com/antvis/L7/commit/54f28be495af94a39313b7840c69725be16dc1e2))
+* **layer:** point layer ([3da72c8](https://github.com/antvis/L7/commit/3da72c83ff0577455a29ba98df4bb7cd8838328a))
+* **layer:** style 增加blending 配置项 ([bab462a](https://github.com/antvis/L7/commit/bab462ac40a6c3e188743eae198481db65435b26))
+* **layer:** style 增加blending 配置项 ([53f7268](https://github.com/antvis/L7/commit/53f726872a37457bfa75d8fab1d840e69f910373))
+* **layers:** add arclayer ([7e499fd](https://github.com/antvis/L7/commit/7e499fdc877d9715000c138a5d3505924ebd083e))
+* **layers:** add girdheatmap  add raster imagelayer ([ddd1d0e](https://github.com/antvis/L7/commit/ddd1d0ef38cc44767d2ec5329eb844c31d847938))
+* **layers:** add heatmap 3d layer ([cd8409e](https://github.com/antvis/L7/commit/cd8409e4cb234f850f2d46dd68b35f4848daf74b))
+* **layers:** add polygon3d , pointimagelayer ([75f2eaa](https://github.com/antvis/L7/commit/75f2eaa083064ff21c8bbe13f5f6770682c23241))
+* **layers:** add polygon3d , pointimagelayer ([bda6b6c](https://github.com/antvis/L7/commit/bda6b6cfb06193f6ae83e505a9c8667811d80a2f))
+* **line:** greatCircle ([4977426](https://github.com/antvis/L7/commit/49774266456bf4845785247f2a37ad1b66518e2d))
+* **line:** greatCircle ([6188d07](https://github.com/antvis/L7/commit/6188d0783a10869e61cc5949407106965f73d0e7))
+* **map:** adjust Scene API, use @antv/l7-maps instead ([77b8f21](https://github.com/antvis/L7/commit/77b8f21b0bcf8b06e88d8e0bef213935bf32b957)), closes [#86](https://github.com/antvis/L7/issues/86)
+* **multi-pass:** support TAA(Temporal Anti-Aliasing) ([2cf0824](https://github.com/antvis/L7/commit/2cf082439ad04eb84b96b2922e45082476452aec))
+* **picking:** support advanced picking API: `layer.pick({x, y})` ([3e22f21](https://github.com/antvis/L7/commit/3e22f21a5c658e4ade31c0506bd77ae787ec2fcc))
+* **picking:** support PixelPickingPass and highlight the picked feature ([ff0ffa0](https://github.com/antvis/L7/commit/ff0ffa057e2f533dc6ac92f40d3892f9dd57fafb))
+* **point image:** add point image ([89b2513](https://github.com/antvis/L7/commit/89b25133a17f308c3e884c49baebcd3cc7a9470a))
+* **point image:** add point image ([ae4a594](https://github.com/antvis/L7/commit/ae4a594a9383443d0ade5eb84105f3c8f2c6c47c))
+* **point-layer:** use 2d sdf functions ([6ec7039](https://github.com/antvis/L7/commit/6ec70396b9f0358766af61663b76aaf987f4e3c7))
+* **point-layer:** use 2d sdf functions ([ea548ed](https://github.com/antvis/L7/commit/ea548edaa648a7eab4c67ced96f54b270c9b6368))
+* **post-processing:** add some post processing effects ([1d8e15c](https://github.com/antvis/L7/commit/1d8e15cec11abc62785bc68c8281550732550839))
+* **scene:** scene service inTransientScope ([ccf1ff4](https://github.com/antvis/L7/commit/ccf1ff464e1b220650e61c0999846725b075ef3a))
+* **schema-validation:** support validation for layer's options ([9c5766d](https://github.com/antvis/L7/commit/9c5766d0e37958d67f7072d465f51e2aa3d53939))
+* **text:** text add textAllowOverlap propertry ([4dcc177](https://github.com/antvis/L7/commit/4dcc17794112c914eb4233b365b9f7e5c316da26))
+* 增加对于点要素的自动标注 ([86d89dd](https://github.com/antvis/L7/commit/86d89dd5bff0d83a2b2c4acfb14853e549148310))
+* 增加对于点要素的自动标注 ([8feefb6](https://github.com/antvis/L7/commit/8feefb6d7580674c41948e0c4279e178d127b7d6))
+* **polygon-layer:** 支持多个平行光源配置 ([63e70a3](https://github.com/antvis/L7/commit/63e70a36796667c90987e8f522a125f32e5071d0))
+* **polygon-layer:** 支持多个平行光源配置 ([32cdcf8](https://github.com/antvis/L7/commit/32cdcf83f37dbe532336d8393f95d98aa94b3d5b))
+* **source:** reuse tileSource ([a9d2c27](https://github.com/antvis/L7/commit/a9d2c276d74166d8dece3e7f45f6a7d3e4d009d2))
+* **source:** reuse tileSource ([4ce9d60](https://github.com/antvis/L7/commit/4ce9d602569850e26ba550f0cf8b7753abf054c6))
+* **worker:** worker Source ([40947c0](https://github.com/antvis/L7/commit/40947c04ec85610bb1694f9a203ad174139fb2f3))
+* **worker:** worker Source ([1a5faae](https://github.com/antvis/L7/commit/1a5faaea45b9c7dbdb3da5d4d86da9709e8a397d))
+* **worker:** worker Source ([3bbdb5e](https://github.com/antvis/L7/commit/3bbdb5ec8870244f4ab0dc7cadbc49f7055a2256))
+* **worker:** worker Source ([d7d66a2](https://github.com/antvis/L7/commit/d7d66a26f636e9cf29e314b8e76bf876eae2df00))
+* lighting ([4d19584](https://github.com/antvis/L7/commit/4d1958467e0d112ec0bd1d5b2499294c909bf337))
+* lighting ([f8269ee](https://github.com/antvis/L7/commit/f8269ee35bd1a50bb150366cecdad5958919013d))
+* **hexagon:** hexagon heatmap ([00d58a0](https://github.com/antvis/L7/commit/00d58a03c5dfa92c5812c2b94fca4831694ceff6))
+* **hexagon:** hexagon heatmap ([f6847e1](https://github.com/antvis/L7/commit/f6847e15d644c84448dcb49ce3dc63f3ee0819fb))
+* **l7:** add shader module ([8a45456](https://github.com/antvis/L7/commit/8a454561ad1241f6b5bfea72d0c5967b2464c284))
+* **l7:** add shader module ([a6d4774](https://github.com/antvis/L7/commit/a6d477480444ea7e0c24456b31fc3b920e05506e))
+* **l7:** feat heatmap layer ([109f3f1](https://github.com/antvis/L7/commit/109f3f12d0913442f676691317b827b67b948d29))
+* **l7:** feat heatmap layer ([eec6a12](https://github.com/antvis/L7/commit/eec6a121ac4c1a13f3442d6285533395a70bbcf6))
+* **layer:** add controller ([7d33a17](https://github.com/antvis/L7/commit/7d33a17f4d5a984a740f1c8d3b4a0a604a1817e7))
+* **layer:** add controller ([d562f86](https://github.com/antvis/L7/commit/d562f86251869776761819ef85656bf74654bd02))
+* **layer:** add lengendcdg method ([c8ac525](https://github.com/antvis/L7/commit/c8ac525c020db01be12e9d182e82226aa809f45a))
+* **point-layer:** optimize 2d circle ([ee5611d](https://github.com/antvis/L7/commit/ee5611d892d9875b3d592cdfdd8c49296ab2a03b))
+* **point-layer:** optimize 2d circle ([e8704a1](https://github.com/antvis/L7/commit/e8704a1e7e305a5952bb9ba62012fa8a1708c6f9))
+* **point-layer:** vertex compression ([5e0bac0](https://github.com/antvis/L7/commit/5e0bac0fe410eb589ecfade7e1f09ebfbf5d18a2))
+* **point-layer:** vertex compression ([ef2a9dd](https://github.com/antvis/L7/commit/ef2a9dd95746fa92b2459736cec6824cbea17c37))
+* support bevel joint, dashline & anti-alias ([c0ea754](https://github.com/antvis/L7/commit/c0ea7545221a5aaf57742be52449cbe5a390f1c0))
+* support bevel joint, dashline & anti-alias ([393c5d0](https://github.com/antvis/L7/commit/393c5d0c5aeb4665ef2e78ad0733580bfd4ee33e))
+* **interaction:** add hash ([17d8483](https://github.com/antvis/L7/commit/17d8483a38a6e7acbdc98fbcacaaebfdee81a090))
+* **interaction:** add hash ([a290efb](https://github.com/antvis/L7/commit/a290efb7875cf2d8a122e10d9c4d8d8fa3f6efbd))
+* **layer:** add lengendcdg method ([14ce71d](https://github.com/antvis/L7/commit/14ce71d7bb9143892d42874bba890373127e9f4f))
+* **layer:** add repaint method ([48de69f](https://github.com/antvis/L7/commit/48de69f7d9d49ccd5b10f9652fc3a949d705bee0))
+* **layer:** add repaint method ([3d2bde5](https://github.com/antvis/L7/commit/3d2bde558e4bb305408ecf21fbde8008219821c0))
+* **layer:** add tile ([28bd807](https://github.com/antvis/L7/commit/28bd807916dc57100f87aa0d5bad84d0c0601acf))
+* **layer:** add tile ([181d7bc](https://github.com/antvis/L7/commit/181d7bc42f6a0be656669113486cb54d8c388d94))
+* **map:** add mapbox ([418b3bc](https://github.com/antvis/L7/commit/418b3bcbc973900406f1a1093fc043f33b00c3a8))
+* **map:** add mapbox ([8bb5bc6](https://github.com/antvis/L7/commit/8bb5bc66470ee527ba6d742b118054302beeaa72))
+* **mapbox:** add mapbox ([ef30053](https://github.com/antvis/L7/commit/ef30053ff3824c07d0c4d6879d3af2de5cc7f9cf))
+* **mapbox:** add mapbox ([e856519](https://github.com/antvis/L7/commit/e856519fa71e7662de5a6aed41c1ea68feef6d75))
+* **package:** update version ([25f9af3](https://github.com/antvis/L7/commit/25f9af30bba55ebb4e5d1b5d8d6ad0ae495c8906))
+* **package:** update version ([eda3042](https://github.com/antvis/L7/commit/eda3042b3f8c134791f84be75997055c8df5684b))
+* **pick:** update pick method ([2b21158](https://github.com/antvis/L7/commit/2b21158568295b629e7bbb516507c7b1ac11ec22))
+* **pick:** update pick method ([a1c534d](https://github.com/antvis/L7/commit/a1c534da698f615de54435e1b53c82629b432226))
+* **scene:** 按需进行渲染刷新 ([6b2d9b7](https://github.com/antvis/L7/commit/6b2d9b76caf40f276017afc2f3751ec76a68b7e5))
+* **scene:** 按需进行渲染刷新 ([691f223](https://github.com/antvis/L7/commit/691f2237d0ca6d6e45a708e3eaa25b2a6a3eb0b9))
+* **scene:** 实例化支持传入地图实例 ([e60e51c](https://github.com/antvis/L7/commit/e60e51c12d294a475a798d6b83957e7b76549711))
+* **scene:** 实例化支持传入地图实例 ([f0db13e](https://github.com/antvis/L7/commit/f0db13e711eed9657faeb68e4b0fd1e1a32b80fc))
+* **source:** hexagon ([3ab8aac](https://github.com/antvis/L7/commit/3ab8aac11a17ce93e74add1b066a8d50e93dd86f))
+* **source:** hexagon ([7d73d7f](https://github.com/antvis/L7/commit/7d73d7f34843d2eed8c916ed9b5350883c0ed491))
+* **src:** threejs render ([e75f215](https://github.com/antvis/L7/commit/e75f215625c0cc56c531254a8082d39690ea693f))
+* **tile:** add image tile layer ([f4f63c4](https://github.com/antvis/L7/commit/f4f63c48b1f8cc15d502bf1cda8ce12012b995bc))
+* **tile:** add image tile layer ([ab11b98](https://github.com/antvis/L7/commit/ab11b98e54262a6ab1e6e7abe05172d04ed07e83))
+* **tile:** add tile ([5e494fe](https://github.com/antvis/L7/commit/5e494fe7529252a256d147014257cafcc1c1bd78))
+* **tile:** add tile ([6dd6c5d](https://github.com/antvis/L7/commit/6dd6c5dd018551c67a42c1e1e28373c55ede58e9))
+* **tile:** fix point tile layer ([f0a1099](https://github.com/antvis/L7/commit/f0a10992ddcbd9639640d21617020df009503f18))
+* **tile:** fix point tile layer ([b6d2109](https://github.com/antvis/L7/commit/b6d2109a68a3f6d0c35963368bad3e0f94388802))
+* **tilelayer:** add mask ([e018661](https://github.com/antvis/L7/commit/e018661b7ad8acbfdcd01f85ef15d217f8d3b277))
+* **tilelayer:** add mask ([fb26f6e](https://github.com/antvis/L7/commit/fb26f6e5e89b598629aaf206d3d3f444b645150b))
+
+
+### Performance Improvements
+
+* **shader:** 优化线动画效果 ([9b2a4ca](https://github.com/antvis/L7/commit/9b2a4ca26cd58791a667e373a2bd04d63dc1570c))
+* **shader:** 优化线动画效果 ([94b7630](https://github.com/antvis/L7/commit/94b76304ef6b8989ccbdd955b4d24a1c09105b36))
+
+
+
+
+
 ## 2019.11.22
  
  ### L7 2.0 beta
 
 - 新架构
 - 多地图引擎
-
-
-

README.md

@@ -4,36 +4,92 @@
 
 Large-scale WebGL-powered Geospatial data visualization analysis framework.
 
-## l7 visualization demos
+[中文 README](./README.zh-CN.md)
+
+Powered by WebGL, the rendering technology of L7 supports fast and efficient rendering of big data, 2D/3D rendering, possible through calculation and analysis of spatial data by GPU Parallel Compu-ting.
+
+L7 focuses on  geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services 
+
+
+## 🌄 l7 visualization demos
 
 ![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SGU-QIZsnyoAAAAAAAAAAABkARQnAQ)
 
-### Installation
+
+## 🌟 Highlight features of L7 2.0
+
+- 🌏 Data-driven Visualization
+ 
+  Layer visualization API design base Semiology of Graphics.
+
+  It supports rich map visualization types for a better insight on data.
+
+- 🌏 High performance rendering with 2D/3D effect
+	
+  Real-time and dynamic rendering with millions of spatial data.
+
+- 🌏 Simple and flexible data format
+
+  L7 supports a wide variety of data formats including CSV, JSON, geojson, among others, eliminating the need to run conversions ahead of time.
+
+- 🌏 Multi-basemap
+
+  For global users, Mapbox is easy to be embedded by a simple line of code.
+
+## Getting Started
+
+### 📦 Installation
 
 ```
 npm install @antv/l7@beta
 ```
 
-## Development
+### Init Map by L7 scene
+
+```javascript
+import { Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+})
+
+```
+### Add Layer
+
+``` javascript
+
+import { PointLayer } from '@antv/l7';
+  const pointLayer = new PointLayer()
+      .source(data)
+      .shape('circle')
+      .size('mag', [ 1, 25 ])
+      .color('mag',['#5B8FF9', '#5CCEA1'])
+      .style({
+        opacity: 0.3,
+        strokeWidth: 1
+      });
+
+scene.addLayer(pointLayer);
 
-使用 Yarn Workspace 完成依赖安装以及各包之间的 link 工作：
-```bash
-yarn install
 ```
 
-开发模式：
+## :memo: Documentation
-```bash
-yarn watch
-```
 
-运行 Demo，基于 Storybook：
+- [Getting started with L7](https://l7.antv.vision/en/docs/api/l7)
-```bash
+- [Tutorials](https://l7.antv.vision/en/docs/tutorial/quickstart)
-yarn storybook
+- [API documentation](https://l7.antv.vision/en/docs/api/l7)
-```
+- [Examples](https://l7.antv.vision/en/examples/gallery/basic)
 
-## view doc example
+## 🔨 Development
 
-```bash
+We wrote a [contribution guide](./.github/CONTRIBUTING.md) to help you get started.
-yarn start
+
-```
+## ✅ License
-visit http://localhost:8000/
+
+[MIT license](./LICENSE).

README.zh-CN.md

@@ -67,53 +67,6 @@ npm install @antv/l7@beta
 
 ![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
 
-## Development
+## 向 L7 贡献代码
 
-使用 Yarn Workspace 完成依赖安装以及各包之间的 link 工作：
+您可以参考 [CONTRIBUTING.md](./.github/CONTRIBUTING.md) 向 L7 贡献代码。
-```bash
-yarn install
-```
-
-开发模式：
-```bash
-yarn watch
-```
-
-运行 Demo
-```bash
-yarn storybook
-```
-
-代替 `git commit` 提交：
-```bash
-yarn commit
-```
-
-## view doc example
-
-```bash
-  npm  start
-```
-visit http://localhost:8000/
-
-## Add Package
-
-add new package：
-```bash
-lerna create my-pack -y
-```
-
-将 ui-lib 作为 my-pack 的依赖：
-```bash
-yarn workspace my-pack add ui-lib/1.0.0
-```
-
-将 lodash 添加为所有 package 的依赖(不包含root）
-```bash
-yarn workspaces run add lodash
-```
-
-将 typescript 设置为 root 的开发依赖
-```bash
-yarn add -W -D typescript jest
-```

babel.config.js

@@ -60,6 +60,7 @@ module.exports = api => {
       '@babel/preset-typescript',
     ],
     plugins: [
+      '@babel/plugin-proposal-object-rest-spread',
       '@babel/plugin-proposal-optional-chaining',
       '@babel/plugin-proposal-nullish-coalescing-operator',
       [

demos/demo/arc.js

@@ -1,12 +1,16 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new Mapbox({
-  type: 'mapbox',
+    pitch: 0,
-  style: 'dark',
+    style: 'dark',
-  center: [ 0, 23.107329 ],
+    center: [ 0, 23.107329 ],
-  zoom: 0
+    zoom: 0
+  })
 });
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json'
 )

dev-docs/ConfigSchemaValidation.md

@@ -12,6 +12,36 @@ Invalid configuration object. MyPlugin has been initialised using a configuratio
 和 Webpack 一样，我们也选择 [ajv](https://github.com/epoberezkin/ajv) 作为 JSON Schema 校验器。
 目前我们只在 Layer 初始阶段进行校验，一旦校验失败会中断后续初始化插件的处理，并在控制台给出校验失败信息。后续需要在属性更新时同样进行校验。
 
+## 地图参数校验
+
+当用户传入地图参数时，需要进行校验：
+```javascript
+// l7-core/services/config/mapConfigSchema.ts
+
+export default {
+  properties: {
+    // 地图缩放等级
+    zoom: {
+      type: 'number',
+      minimum: 0,
+      maximum: 20,
+    },
+    // 地图中心点
+    center: {
+      item: {
+        type: 'number',
+      },
+      maxItems: 2,
+      minItems: 2,
+    },
+    // 仰角
+    pitch: {
+      type: 'number',
+    },
+  },
+};
+```
+
 ## Layer 基类配置项 Schema
 
 目前在基类中我们声明了如下属性及其对应的校验规则：

dev-docs/IoC 容器、依赖注入与服务说明.md

@@ -171,6 +171,7 @@ protected getConfigSchema() {
 通过 `mapService` 引用。
 
 常用地图状态获取方法如下：
+
 | 方法名 | 参数 | 返回值 | 说明 |
 | -------- | ------------- | --------- | --------- |
 | getSize  | 无 | `[number, number]` | 获取地图尺寸（像素单位） |
@@ -196,7 +197,6 @@ protected getConfigSchema() {
 通过 `rendererService` 引用。
 
 
-
 ### 图层管理服务
 
 开发者不需要显式调用。用于管理场景中所有的图层，负责图层的创建、销毁。

dev-docs/使用方法.md

@@ -39,12 +39,13 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
       // 创建场景
       const scene = new L7.Scene({
         id: 'map', // 容器 id
-        type: 'mapbox', // 高德 amap 或者 mapbox
+        map: new L7.Mapbox({ // 高德地图为 L7.AMap
-        style: 'mapbox://styles/mapbox/streets-v9',
+          style: 'mapbox://styles/mapbox/streets-v9',
-        center: [110.19382669582967, 50.258134],
+          center: [110.19382669582967, 50.258134],
-        pitch: 0,
+          pitch: 0,
-        zoom: 3,
+          zoom: 3,
-        token: 'pg.xxx', // 高德或者 Mapbox 的 token
+          token: 'pg.xxx', // 高德或者 Mapbox 的 token
+        }),
       });
 
       // 创建图层
@@ -89,16 +90,17 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
 
 ## 通过 Submodule 使用
 
-首先通过 `npm/yarn` 安装 `@antv/l7`：
+首先通过 `npm/yarn` 安装 `@antv/l7@beta`：
 ```bash
-npm install --save @antv/l7
+npm install --save @antv/l7@beta
 // or
-yarn add @antv/l7
+yarn add @antv/l7@beta
 ```
 
 然后就可以使用其中包含的场景和各类图层：
 ```typescript
 import { Scene, PolygonLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
 
 (async function() {
   // 获取数据
@@ -109,13 +111,14 @@ import { Scene, PolygonLayer } from '@antv/l7';
 
   // 创建场景
   const scene = new Scene({
-    center: [110.19382669582967, 50.258134],
     id: 'map',
-    pitch: 0,
+    map: new AMap({
-    style: 'dark',
+      center: [110.19382669582967, 50.258134],
-    type: 'amap',
+      pitch: 0,
-    zoom: 3,
+      style: 'dark',
-    token: 'pg.xxx', // 高德或者 Mapbox 的 token
+      zoom: 3,
+      token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    }),
   });
 
   // 创建图层
@@ -151,9 +154,10 @@ L7 目前的文档都通过这种方式使用，可以参考项目中的 stories
 React 组件待开发，目前可以暂时以 Submodule 方式使用：
 ```tsx
 import { Scene, PolygonLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
 import * as React from 'react';
 
-export default class AMap extends React.Component {
+export default class AMapExample extends React.Component {
   private scene: Scene;
 
   public componentWillUnmount() {
@@ -165,13 +169,14 @@ export default class AMap extends React.Component {
       'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
     );
     const scene = new Scene({
-      center: [110.19382669582967, 50.258134],
       id: 'map',
-      pitch: 0,
+      map: new AMap({
-      style: 'dark',
+        center: [110.19382669582967, 50.258134],
-      type: 'amap',
+        pitch: 0,
-      zoom: 3,
+        style: 'dark',
-      token: 'pg.xxx', // 高德或者 Mapbox 的 token
+        zoom: 3,
+        token: 'pg.xxx', // 高德或者 Mapbox 的 token
+      }),
     });
     const layer = new PolygonLayer({});
 

dev-docs/构建方案.md

@@ -344,9 +344,9 @@ yarn build
 }
 ```
 
-### [WIP] 异步加载 Mapbox
+### 按需引入地图依赖
 
 以 L7 Bundler 方式使用时，由于需要在运行时根据用户配置项选择地图底图，会导致构建时需要将全部地图依赖引入，无法进行 TreeShaking。
 目前高德地图使用运行时异步加载方式引入，不会导致该问题，但 Mapbox 同样使用 Bundler，对于高德用户就多余了。
 
-一个可能的方案是对于 Mapbox 使用 CodeSplitting。在容器首次获取 Mapbox 地图服务时异步加载并缓存。
+[ISSUE](https://github.com/antvis/L7/issues/86)

dev-docs/自定义后处理效果.md

@@ -136,11 +136,12 @@ void main() {
 // 场景定义
 const scene = new Scene({
   id: 'map',
-  type: 'mapbox',
+  map: new Mapbox({
-  style: 'mapbox://styles/mapbox/streets-v9',
+    style: 'mapbox://styles/mapbox/streets-v9',
-  center: [110.19382669582967, 50.258134],
+    center: [110.19382669582967, 50.258134],
-  pitch: 0,
+    pitch: 0,
-  zoom: 3,
+    zoom: 3,
+  }),
 });
 // 注册自定义后处理效果
 scene.registerPostProcessingPass(
@@ -154,7 +155,6 @@ scene.registerPostProcessingPass(
 和 L7 内置的后处理效果使用方法一致，通过效果名引用，同时传入定义参数即可：
 ```typescript
 const layer = new PolygonLayer({
-  enableMultiPassRenderer: true,
   enablePicking: true,
   enableHighlight: true,
   passes: [

docs/api/component/control.zh.md

@@ -2,44 +2,52 @@
 title: Control
 order: 3
 ---
-# control
 
 地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
 
 
-## 构造函数
+L7 目前支持Control
 
-```javascript
+-  Zoom 放大缩小
-const baseControl = new L7.Control.Base(option);
+-  Scale 比例尺
-```
+-  Layers 图层列表
+
+
+## 构造函数
 
 
 #### option
- position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
+ 
+ position: `string` 控件位置支持是个方位 
+
+- bottomright
+- topright
+- bottomleft,
+- topleft`
 
 
-#### scene 内置地图组件
-zoom 地图放大缩小  默认添加<br />Scale 地图比例尺   默认添加<br />attribution 地图数据属性  默认添加<br />layer 图层列表
 
-**scene配置项设置控件添加状态**
+### 组件介绍
+
+```
+import { Scale Layers, Zoom } from '@antv/l7';
 
-```javascript
-scene = new L7.scene({
-   zoomControl: true,
-   scaleControl: true,
-   attributionControl: true
-})
 ```
 
-#### 
+
+
 
 #### Zoom
+
 放大缩小组件 默认 左上角
 
 ```javascript
- new L7.Control.Zoom({
+ const zoomControl = new  Zoom({
       position: 'topleft'
-    }).addTo(scene);
+    })
+
+ scene.addControl(zoomControl);
+
 ```
 
 
@@ -47,50 +55,34 @@ scene = new L7.scene({
 比例尺组件默认左下角
 
 ```javascript
- new L7.Control.Scale({
+  const zoomControl = new  Zoom({
-      position: 'bottomleft'
+      position: 'topleft'
-    }).addTo(scene);
+    })
+
+ scene.addControl(zoomControl);
+
 ```
 
 
-#### attribution
+#### Layers
-默认右下角
+图层列表目前支持可视化的图层控制
 
 ```javascript
-new L7.Control.Attribution({
-      position: 'bottomleft'
-    }).addTo(scene);
-```
 
+ const overlayers = {
+        "点图层": layer,
         
-#### layer
-图层列表目前只支持可视化overlayers 图层控制
-
-```javascript
- var overlayers = {
-        "围栏填充": layer,
-        "围栏边界": layer2
       };
-new L7.Control.Layers({
+ const layersControl = new Layers({
-  overlayers: overlayers
+      overlayers
-}).addTo(scene);
+    });
+scene.addControl(layersControl);
+
 ```
 
 
 ## 方法
 
-#### onAdd
-组件添加到地图Scene时调用，自定义组件时需要实现此方法
-
-
-#### addTo
-添加到地图scene
-
-```javascript
-control.addTo(scene);
-```
-
-
 #### setPosition
 设置组件位置
 
@@ -106,32 +98,3 @@ control.setPosition('bottomright');
 control.remove();
 ```
 
-
-
-## 示例代码
-
-
-#### 自定义图例控件
-[源码](https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html)
-
-```javascript
-var legend = new L7.Control.Base({
-        position: 'bottomright'
-      });
-      legend.onAdd = function() {
-        var el = document.createElement('div');
-        el.className = 'infolegend legend';
-        var grades = [0, 8, 15, 30, 65, 120];
-        for (var i = 0; i < grades.length; i++) {
-          el.innerHTML += '<i style="background:' + colors[i] + '"></i> ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
-        }
-        return el;
-      };
-      legend.addTo(scene);
-
-```
-
-## 
-
-## FAQ
-

docs/api/component/marker.en.md

@@ -7,17 +7,26 @@ Marker 地图标注 目前只支持2D dom标注
 
 
 ## 构造函数
-Marker<br />`const Marker = new L7.Marker(option)`
+Marker
+
+`const Marker = new L7.Marker(option)`
+
+
 
 
 #### option
 
-- color        `string `   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32) 设置默认marker的颜色
+- color        `string ` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认marker的颜色
 - element    `Dom|string`    自定义marker Dom节点，可以是dom实例，也可以是dom id
 - anchor     `string`  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
 - offset    `Array`  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
 
 
+### 添加到Scene
+```javascript
+scene.addMarker(marker);
+```
+
 ## 方法
 
 #### setLnglat
@@ -77,7 +86,6 @@ new L7.Marker({
   element: el
 }).setLnglat(item.coordinates)
   .setPopup(popup)
-  .addTo(scene);
 ```
 
 

docs/api/l7stable.en.md

@@ -9,12 +9,12 @@ order: 1
 
  ## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
 
-目前 1.x 版本最新版本为 1.4.2 版本
+目前 1.x 版本最新版本为 ![L7 1.x 版本](https://badgen.net/npm/v/@antv/l7)
 
 #### CDN 在线使用连接为
 
 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.2/build/L7-min.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.4/build/L7-min.js"></script>
 ```
 
 ### npm 安装使用

docs/api/l7stable.zh.md

@@ -9,12 +9,12 @@ order: 1
 
  ## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
 
-目前 1.x 版本最新版本为 1.4.2 版本
+目前 1.x 版本最新版本为 ![L7 1.x 版本](https://badgen.net/npm/v/@antv/l7)
 
 #### CDN 在线使用连接为
 
 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.2/build/L7-min.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.4/build/L7-min.js"></script>
 ```
 
 ### npm 安装使用

docs/api/layer/layer.en.md

@@ -40,7 +40,7 @@ new Layer(option)
 
 ## 鼠标事件 
 
-beta版当前不支持，正式版会支持
+⚠️ beta版当前不支持，正式版会支持
 
 ```javascript
 layer.on('click', (ev)=>{});             // 鼠标左键点击图层事件

docs/api/layer/layer.zh.md

@@ -40,7 +40,7 @@ new Layer(option)
 
 ## 鼠标事件 
 
-beta版当前不支持，正式版会支持
+⚠️ beta版当前不支持，正式版会支持
 
 ```javascript
 layer.on('click', (ev)=>{});             // 鼠标左键点击图层事件

docs/api/scene.en.md

@@ -10,19 +10,24 @@ order: 2
 ```javascript
 // Module 引用
 import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
-  mapStyle: 'dark',
+  map: new GaodeMap({
-  center: [ 110.770672, 34.159869 ],
+    style: 'dark',
-  pitch: 45,
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
 });
 
 // CDN 使用方法
 const scene = new L7.Scene({
   id: 'map',
-  mapStyle: 'dark',
+  map: new L7.GaodeMap({
-  center: [ 110.770672, 34.159869 ],
+    style: 'dark',
-  pitch: 45,
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
 });
 ```
 
@@ -43,20 +48,21 @@ const scene = new L7.Scene({
 可以通过scene map 属性获取 map实例
 
 ```javascript
- const map = scene.map
+const map = scene.map
 
 ```
-为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
+为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
 
 示例代码
 
 ```javascript
-import { Scene } from '@antv/l7';
 const scene =new L7.Scene({
-    id:'map',
+  id: 'map',
-    mapStyle:'dark',
+  map: new L7.GaodeMap({
-    center:[ 110.770672, 34.159869 ],
+    style: 'dark',
-    pitch:45
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
 })
 ```
 
@@ -159,6 +165,31 @@ scene.getPitch();
 
 return {number} pitch
 
+### setMapStyle
+
+参数：`style`  {string}  地图样式 具体样式格式和各底图设置方法一致
+
+L7 内置了三种地图样式，AMAP 和MapBox都适用
+
+- light
+- dark
+- normal
+
+设置地图底图样式的方法
+
+```javascript
+// 快捷名称设置
+
+scene.setMapStyle('light');
+
+// mapbox 主题设置
+scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
+
+// AMap 
+scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
+
+```
+
 ### setCenter()
 设置地图中心点坐标
 

docs/api/scene.zh.md

@@ -7,7 +7,29 @@ order: 2
 
 ## Scene
 
-L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理
+```javascript
+// Module 引用
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
+});
+
+// CDN 使用方法
+const scene = new L7.Scene({
+  id: 'map',
+  map: new L7.GaodeMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
+});
+```
 
 
 ## Map
@@ -26,7 +48,7 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
 可以通过scene map 属性获取 map实例
 
 ```javascript
- const map = scene.map
+const map = scene.map
 
 ```
 为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
@@ -34,24 +56,17 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
 示例代码
 
 ```javascript
-// Module 引用
+const scene =new L7.Scene({
-import { Scene } from '@antv/l7';
-const scene = new Scene({
   id: 'map',
-  mapStyle: 'dark',
+  map: new L7.GaodeMap({
-  center: [ 110.770672, 34.159869 ],
+    style: 'dark',
-  pitch: 45,
+    center: [ 110.770672, 34.159869 ],
-});
+    pitch: 45,
-
+  }),
-// CDN 使用方法
+})
-const scene = new L7.Scene({
-  id: 'map',
-  mapStyle: 'dark',
-  center: [ 110.770672, 34.159869 ],
-  pitch: 45,
-});
 ```
 
+
 ### 构造函数
 
 **Scene** 
@@ -150,6 +165,31 @@ scene.getPitch();
 
 return {number} pitch
 
+### setMapStyle
+
+参数：`style`  {string}  地图样式 具体样式格式和各底图设置方法一致
+
+L7 内置了三种地图样式，AMAP 和MapBox都适用
+
+- light
+- dark
+- normal
+
+设置地图底图样式的方法
+
+```javascript
+// 快捷名称设置
+
+scene.setMapStyle('light');
+
+// mapbox 主题设置
+scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
+
+// AMap 
+scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
+
+```
+
 ### setCenter()
 设置地图中心点坐标
 
@@ -166,7 +206,9 @@ scene.setCenter([lng,lat])
 scene.setZoomAndCenter(zoom,center)
 ```
 
-参数：zoom {number}<br />center {LngLat}
+参数：
+- zoom {number}
+- center {LngLat}
 
 
 ### setRotation
@@ -195,14 +237,20 @@ scene.ZoomOUt()
 scene.panTo(LngLat)
 ```
 
-参数：`center`  LngLat 中心位置坐标
+参数：
+
+- `center`  LngLat 中心位置坐标
 
 ### panBy
 以像素为单位沿X方向和Y方向移动地图
 ```javascript
 scene.panBy(x,y)
 ```
-参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br />      `y`  {number} 垂直方向移动像素 向下为正方向
+参数：
+
+- `x` {number} 水平方向移动像素 向右为正方向
+
+- `y`  {number} 垂直方向移动像素 向下为正方向
 
 
 ### setPitch
@@ -211,11 +259,16 @@ scene.panBy(x,y)
 scene.setPitch(pitch)
 ```
 
-参数 :<br />   `pitch`  {number}
+参数 :
+-  `pitch`  {number}
 
 
 ### fitBounds
-地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
+地图缩放到某个范围内
+
+参数 :
+
+- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
 
 ```javascript
 scene.fitBounds([112,32,114,35]);
@@ -230,7 +283,9 @@ scene.fitBounds([112,32,114,35]);
 scene.removeLayer(layer)
 ```
 
-参数 `layer`  {Layer}
+参数 
+
+- `layer`  {Layer}
 
 ### getLayers
  获取所有的layer

docs/tutorial/map/amap.en.md

@@ -1,5 +1,5 @@
 ---
-title: AMap BaseMap
+title: GaodeMap BaseMap
 order: 0
 ---
 
@@ -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.9/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
 ```
 
 ### 添加div 标签指定地图容器
@@ -35,13 +35,13 @@ order: 0
 ``` javascript
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
+    map: new L7.GaodeMap({
-    center: [120.19382669582967, 30.258134],
+      style: 'dark', // 样式URL
-    pitch: 0,
+      center: [120.19382669582967, 30.258134],
-    zoom: 12,
+      pitch: 0,
-    type:'amap',
+      zoom: 12,
-    token: '高德地图token'
+      token: '高德地图token',
-
+    }),
   });
 
 ```
@@ -106,17 +106,18 @@ 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.9/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
 <script>
 
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
+    map: new L7.GaodeMap({
-    center: [120.19382669582967, 30.258134],
+      style: 'dark', // 样式URL
-    pitch: 0,
+      center: [120.19382669582967, 30.258134],
-    zoom: 12,
+      pitch: 0,
-    type:'amap',
+      zoom: 12,
-
+      token: '高德地图token',
+    }),
   });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')

docs/tutorial/map/amap.zh.md

@@ -18,7 +18,7 @@ order: 0
 2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token
 
 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
 ```
 
 ### 添加div 标签指定地图容器
@@ -35,13 +35,13 @@ order: 0
 ``` javascript
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
+    map: new L7.GaodeMap({
-    center: [120.19382669582967, 30.258134],
+      style: 'dark', // 样式URL
-    pitch: 0,
+      center: [120.19382669582967, 30.258134],
-    zoom: 12,
+      pitch: 0,
-    type:'amap',
+      zoom: 12,
-    token: '高德地图token'
+      token: '高德地图token',
-
+    }),
   });
 
 ```
@@ -106,17 +106,18 @@ 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.9/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
 <script>
 
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
+    map: new L7.GaodeMap({
-    center: [120.19382669582967, 30.258134],
+      style: 'dark', // 样式URL
-    pitch: 0,
+      center: [120.19382669582967, 30.258134],
-    zoom: 12,
+      pitch: 0,
-    type:'amap',
+      zoom: 12,
-
+      token: '高德地图token',
+    }),
   });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')

docs/tutorial/map/mapbox.en.md

@@ -24,7 +24,7 @@ order: 0
 
 
 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
 ```
 
 
@@ -42,13 +42,13 @@ order: 0
 ``` javascript
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
+    map: new L7.Mapbox({
-    center: [120.19382669582967, 30.258134],
+      style: 'dark', // 样式URL
-    pitch: 0,
+      center: [120.19382669582967, 30.258134],
-    zoom: 12,
+      pitch: 0,
-    type:'mapbox',
+      zoom: 12,
-    token: 'mapbox token'
+      token: 'mapbox token',
-
+    }),
   });
 
 ```
@@ -114,16 +114,17 @@ 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.9/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
 <script>
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
+    map: new L7.Mapbox({
-    center: [120.19382669582967, 30.258134],
+      style: 'dark', // 样式URL
-    pitch: 0,
+      center: [120.19382669582967, 30.258134],
-    zoom: 12,
+      pitch: 0,
-    type:'amap',
+      zoom: 12,
-
+      token: 'mapbox token',
+    }),
   });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')

docs/tutorial/map/mapbox.zh.md

@@ -24,7 +24,7 @@ order: 0
 
 
 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
 ```
 
 
@@ -39,18 +39,21 @@ order: 0
 ### 初始化 L7 Scene
 
 
+``` javascript
+
 ``` javascript
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
+    map: new L7.Mapbox({
-    center: [120.19382669582967, 30.258134],
+      style: 'dark', // 样式URL
-    pitch: 0,
+      center: [120.19382669582967, 30.258134],
-    zoom: 12,
+      pitch: 0,
-    type:'mapbox',
+      zoom: 12,
-    token: 'mapbox token'
+      token: 'mapbox token',
-
+    }),
   });
 
+
 ```
 
 这样我们就完成了通过L7 实例化mapbox地图
@@ -112,16 +115,17 @@ 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.9/dist/l7.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
 <script>
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
+    map: new L7.Mapbox({
-    center: [120.19382669582967, 30.258134],
+      style: 'dark', // 样式URL
-    pitch: 0,
+      center: [120.19382669582967, 30.258134],
-    zoom: 12,
+      pitch: 0,
-    type:'amap',
+      zoom: 12,
-
+      token: 'mapbox token',
+    }),
   });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')

docs/tutorial/quickstart.en.md

@@ -5,164 +5,79 @@ redirect_from:
   - /en/docs/tutorial
 ---
 
+## L7 
+
+Current version:  ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7/beta)
+
 # 使用方法
 
-L7 提供三种使用方式：CDN、Submodule。
 
-## 通过 CDN 使用
+##   通过L7 CDN 使用
+
+Include the L7 JS JavaScript  <head> of your HTML file.
 
-首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
 ```html
 <head>
-  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
+<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js'>
+</script>
 </head>
 ```
 
-如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
+- [use Gaode Map](../map/amap.en.md)
-```html
-<head>
-  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
-  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
-  <!-- 上一步引入的 L7 JS 和 CSS -->
-</head>
-```
-⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
 
-然后在 `<body>` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`：
+- [use Mapbox Map ](../map/mapbox.en.md)
-⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下：
-* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/)
-* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens)
 
-## 通过 Submodule 使用
 
-首先通过 `npm/yarn`
+## 通过 Module  bundle 使用
+
+Install the npm package.
+
 ```bash
 
+// L7 依赖
 npm install --save @antv/l7@beta
 
-yarn add  --save @antv/l7@beta
+// 第三方底图依赖
+npm install --save @antv/l7-maps;
 
 ```
 
-然后就可以使用其中包含的场景和各类图层：
+### 初始化地图
-```typescript
-import { Scene, PolygonLayer } from '@antv/l7';
 
-(async function() {
+#### 使用 高德 底图
-  // 获取数据
-  const response = await fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-  );
-  const data = await response.json();
 
-  // 创建场景
+```javascript
-  const scene = new Scene({
+
-    center: [110.19382669582967, 50.258134],
+import { Scene, PointLayer } from '@antv/l7';
-    id: 'map',
+import { GaodeMap } from '@antv/l7-maps';
-    pitch: 0,
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    pitch: 35.210526315789465,
     style: 'dark',
-    type: 'amap',
+    center: [ 104.288144, 31.239692 ],
-    zoom: 3,
+    zoom: 4.4
-    token: 'pg.xxx', // 高德或者 Mapbox 的 token
+  })
-  });
+});
-
-  // 创建图层
-  const layer = new PolygonLayer({});
-  layer
-    .source(data)
-    .size('name', [0, 10000, 50000, 30000, 100000])
-    .color('name', [
-      '#2E8AE6',
-      '#69D1AB',
-      '#DAF291',
-      '#FFD591',
-      '#FF7A45',
-      '#CF1D49',
-    ])
-    .shape('fill')
-    .style({
-      opacity: 0.8,
-    });
-
-  // 添加图层到场景中
-  scene.addLayer(layer);
-
-  // 渲染场景
-  scene.render();
-})();
 ```
 
+#### 使用Mapbox 底图
 
-L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
+```javascript
-* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
-* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
 
+import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 
-## [WIP] React
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'dark',
+    pitch: 0,
+    center: [ 127.5671666579043, 7.445038892195569 ],
+    zoom: 2.632456779444394
+  })
+});
 
-React 组件待开发，目前可以暂时以 Submodule 方式使用：
-```tsx
-import { Scene, PolygonLayer} from '@antv/l7';
-import * as React from 'react';
-
-export default class AMap extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-    );
-    const scene = new Scene({
-      center: [110.19382669582967, 50.258134],
-      id: 'map',
-      pitch: 0,
-      style: 'dark',
-      type: 'amap',
-      zoom: 3,
-      token: 'pg.xxx', // 高德或者 Mapbox 的 token
-    });
-    const layer = new PolygonLayer({});
-
-    layer
-      .source(await response.json())
-      .size('name', [0, 10000, 50000, 30000, 100000])
-      .color('name', [
-        '#2E8AE6',
-        '#69D1AB',
-        '#DAF291',
-        '#FFD591',
-        '#FF7A45',
-        '#CF1D49',
-      ])
-      .shape('fill')
-      .style({
-        opacity: 0.8,
-      });
-    scene.addLayer(layer);
-    scene.render();
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
 ```
 
-⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
-

docs/tutorial/quickstart.zh.md

@@ -5,164 +5,78 @@ redirect_from:
   - /zh/docs/tutorial
 ---
 
-# 使用方法
+# L7 
 
-L7 提供三种使用方式：CDN、Submodule。
+Current version:  ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7/beta)
 
-## 通过 CDN 使用
+## 使用方法
+
+###  通过  L7 CDN 使用
+
+Include the L7 JS JavaScript  <head> of your HTML file.
 
-首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
 ```html
 <head>
-  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
+<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js'>
+</script>
 </head>
 ```
 
-如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
+- [use Gaode Map](./map/amap)
-```html
-<head>
-  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
-  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
-  <!-- 上一步引入的 L7 JS 和 CSS -->
-</head>
-```
-⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
 
-然后在 `<body>` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`：
+- [use Mapbox Map ](./map/mapbox)
-⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下：
-* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/)
-* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens)
 
-## 通过 Submodule 使用
 
-首先通过 `npm/yarn`
+## 通过 Module  bundle 使用
+
+Install the npm package.
+
 ```bash
 
+// L7 依赖
 npm install --save @antv/l7@beta
 
-yarn add  --save @antv/l7@beta
+// 第三方底图依赖
+npm install --save @antv/l7-maps;
 
 ```
 
-然后就可以使用其中包含的场景和各类图层：
+### 初始化地图
-```typescript
-import { Scene, PolygonLayer } from '@antv/l7';
 
-(async function() {
+#### 使用 高德 底图
-  // 获取数据
-  const response = await fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-  );
-  const data = await response.json();
 
-  // 创建场景
+```javascript
-  const scene = new Scene({
+
-    center: [110.19382669582967, 50.258134],
+import { Scene, PointLayer } from '@antv/l7';
-    id: 'map',
+import { GaodeMap } from '@antv/l7-maps';
-    pitch: 0,
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    pitch: 35.210526315789465,
     style: 'dark',
-    type: 'amap',
+    center: [ 104.288144, 31.239692 ],
-    zoom: 3,
+    zoom: 4.4
-    token: 'pg.xxx', // 高德或者 Mapbox 的 token
+  })
-  });
+});
-
-  // 创建图层
-  const layer = new PolygonLayer({});
-  layer
-    .source(data)
-    .size('name', [0, 10000, 50000, 30000, 100000])
-    .color('name', [
-      '#2E8AE6',
-      '#69D1AB',
-      '#DAF291',
-      '#FFD591',
-      '#FF7A45',
-      '#CF1D49',
-    ])
-    .shape('fill')
-    .style({
-      opacity: 0.8,
-    });
-
-  // 添加图层到场景中
-  scene.addLayer(layer);
-
-  // 渲染场景
-  scene.render();
-})();
 ```
 
+#### 使用Mapbox 底图
 
-L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
+```javascript
-* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
-* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
 
+import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 
-## [WIP] React
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'dark',
+    pitch: 0,
+    center: [ 127.5671666579043, 7.445038892195569 ],
+    zoom: 2.632456779444394
+  })
+});
 
-React 组件待开发，目前可以暂时以 Submodule 方式使用：
-```tsx
-import { Scene, PolygonLayer} from '@antv/l7';
-import * as React from 'react';
-
-export default class AMap extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-    );
-    const scene = new Scene({
-      center: [110.19382669582967, 50.258134],
-      id: 'map',
-      pitch: 0,
-      style: 'dark',
-      type: 'amap',
-      zoom: 3,
-      token: 'pg.xxx', // 高德或者 Mapbox 的 token
-    });
-    const layer = new PolygonLayer({});
-
-    layer
-      .source(await response.json())
-      .size('name', [0, 10000, 50000, 30000, 100000])
-      .color('name', [
-        '#2E8AE6',
-        '#69D1AB',
-        '#DAF291',
-        '#FFD591',
-        '#FF7A45',
-        '#CF1D49',
-      ])
-      .shape('fill')
-      .style({
-        opacity: 0.8,
-      });
-    scene.addLayer(layer);
-    scene.render();
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
 ```
 
-⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
-

examples/gallery/basic/demo/arcCircle.js

@@ -1,13 +1,16 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new Mapbox({
-  type: 'mapbox',
+    style: 'dark',
-  style: 'dark',
+    pitch: 0,
-  center: [ 107.77791556935472, 35.443286920228644 ],
+    center: [ 107.77791556935472, 35.443286920228644 ],
-  zoom: 2.9142882493605033
+    zoom: 2.9142882493605033
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
   .then(res => res.text())
   .then(data => {

examples/gallery/basic/demo/bus_dark.js

@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  center: [ 103.83735604457024, 1.360253881403068 ],
+  map: new Mapbox({
-  pitch: 4.00000000000001,
+    style: 'dark',
-  zoom: 10.210275860702593,
+    center: [ 103.83735604457024, 1.360253881403068 ],
-  rotation: 19.313180925794313,
+    pitch: 4.00000000000001,
-  type: 'mapbox',
+    zoom: 10.210275860702593,
-  style: 'dark'
+    rotation: 19.313180925794313
+  })
 });
 
 fetch(

examples/gallery/basic/demo/column_dark.js

@@ -1,13 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 35.210526315789465,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 35.210526315789465,
-  style: 'dark',
+    style: 'dark',
-  center: [ 104.288144, 31.239692 ],
+    center: [ 104.288144, 31.239692 ],
-  zoom: 4.4
+    zoom: 4.4
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
   .then(res => res.json())
   .then(data => {

examples/gallery/basic/demo/light.js

@@ -1,15 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
+  map: new Mapbox({
-  pitch: 43,
+    style: 'dark',
-  center: [ 120.13383079335335, 29.651873105004427 ],
+    pitch: 43,
-  zoom: 7.068989519212174,
+    center: [ 120.13383079335335, 29.651873105004427 ],
-  type: 'mapbox'
+    zoom: 7.068989519212174
+  })
 });
 
-window.mapScene = scene;
-
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
 )

examples/gallery/basic/demo/normal.js

@@ -1,14 +1,15 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new GaodeMap({
-  style: 'dark',
+    center: [ 121.417463, 31.215175 ],
-  center: [ 121.417463, 31.215175 ],
+    pitch: 0,
-  pitch: 0,
+    zoom: 11
-  zoom: 11
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
   .then(res => res.text())
   .then(data => {

examples/gallery/basic/demo/point.js

@@ -1,13 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 64.88,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 64.88,
-  style: 'dark',
+    style: 'dark',
-  center: [ 114.060288, 22.53684 ],
+    center: [ 114.060288, 22.53684 ],
-  zoom: 15.63
+    zoom: 15.63
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
 )

examples/heatmap/grid/demo/china.js

@@ -1,13 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'light',
+  map: new GaodeMap({
-  pitch: 0,
+    style: 'light',
-  center: [ 107.054293, 35.246265 ],
+    pitch: 0,
-  zoom: 4.056,
+    center: [ 107.054293, 35.246265 ],
-  type: 'amap'
+    zoom: 4.056
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )

examples/heatmap/grid/demo/grid1.js

@@ -1,13 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
+  map: new GaodeMap({
-  pitch: 0,
+    style: 'dark',
-  center: [ 110.097892, 33.853662 ],
+    pitch: 0,
-  zoom: 4.056,
+    center: [ 110.097892, 33.853662 ],
-  type: 'amap'
+    zoom: 4.056
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )

examples/heatmap/grid/demo/heatmap3.js

@@ -1,11 +1,14 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'light',
+  map: new GaodeMap({
-  pitch: 0,
+    style: 'light',
-  center: [ 110.097892, 33.853662 ],
+    pitch: 0,
-  zoom: 4.056,
+    center: [ 110.097892, 33.853662 ],
-  type: 'amap'
+    zoom: 4.056
+  })
 });
 
 fetch(

examples/heatmap/grid/demo/world.js

@@ -1,14 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
+  map: new GaodeMap({
-  pitch: 0,
+    style: 'dark',
-  center: [ 110.097892, 33.853662 ],
+    pitch: 0,
-  zoom: 4.056,
+    center: [ 110.097892, 33.853662 ],
-  type: 'amap'
+    zoom: 4.056
+  })
 });
 
-window.mapScene = scene;
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )

examples/heatmap/heatmap/demo/heatmap.js

@@ -1,11 +1,14 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
+  map: new Mapbox({
-  pitch: 0,
+    style: 'dark',
-  center: [ 127.5671666579043, 7.445038892195569 ],
+    pitch: 0,
-  type: 'mapbox',
+    center: [ 127.5671666579043, 7.445038892195569 ],
-  zoom: 2.632456779444394
+    zoom: 2.632456779444394
+  })
 });
 
 fetch(

examples/heatmap/heatmap/demo/heatmap3d.js

@@ -1,14 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
+  map: new Mapbox({
-  pitch: 58.5,
+    style: 'dark',
-  center: [ 111.8759, 30.6942 ],
+    pitch: 58.5,
-  rotation: 0.519,
+    center: [ 111.8759, 30.6942 ],
-  type: 'mapbox',
+    rotation: 0.519,
-  zoom: 3.6116
+    zoom: 3.6116
+  })
 });
-window.mapScene = scene;
 
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'

examples/heatmap/heatmap/demo/heatmap_purple.js

@@ -1,11 +1,14 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
+  map: new Mapbox({
-  pitch: 0,
+    style: 'dark',
-  center: [ 127.5671666579043, 7.445038892195569 ],
+    pitch: 0,
-  type: 'mapbox',
+    center: [ 127.5671666579043, 7.445038892195569 ],
-  zoom: 2.632456779444394
+    zoom: 2.632456779444394
+  })
 });
 
 fetch(

examples/heatmap/hexagon/demo/china.js

@@ -1,13 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
+  map: new Mapbox({
-  pitch: 47.49999999999995,
+    style: 'dark',
-  center: [ 112.50447776627743, 30.830476390931125 ],
+    pitch: 47.49999999999995,
-  zoom: 3.9879693680088626,
+    center: [ 112.50447776627743, 30.830476390931125 ],
-  type: 'mapbox'
+    zoom: 3.9879693680088626
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )

examples/heatmap/hexagon/demo/hexagon.js

@@ -1,14 +1,17 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'light',
+  map: new Mapbox({
-  pitch: 56.499,
+    style: 'light',
-  center: [ 114.07737552216226, 22.542656745583486 ],
+    pitch: 56.499,
-  rotation: 39.19,
+    center: [ 114.07737552216226, 22.542656745583486 ],
-  zoom: 12.47985,
+    rotation: 39.19,
-  type: 'mapbox'
+    zoom: 12.47985
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
 )

examples/heatmap/hexagon/demo/light.js

@@ -1,15 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
+  map: new Mapbox({
-  pitch: 43,
+    style: 'dark',
-  center: [ 120.13383079335335, 29.651873105004427 ],
+    pitch: 43,
-  zoom: 7.068989519212174,
+    center: [ 120.13383079335335, 29.651873105004427 ],
-  type: 'mapbox'
+    zoom: 7.068989519212174
+  })
 });
 
-window.mapScene = scene;
-
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
 )

examples/heatmap/hexagon/demo/world.js

@@ -1,11 +1,14 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'light',
+  map: new GaodeMap({
-  pitch: 0,
+    style: 'light',
-  center: [ 104.995156, 31.450658 ],
+    pitch: 0,
-  type: 'amap',
+    center: [ 104.995156, 31.450658 ],
-  zoom: 3.79
+    zoom: 3.79
+  })
 });
 
 fetch(

examples/line/arc/demo/arcCircle.js

@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new Mapbox({
-  type: 'mapbox',
+    pitch: 0,
-  style: 'dark',
+    style: 'dark',
-  center: [ 107.77791556935472, 35.443286920228644 ],
+    center: [ 107.77791556935472, 35.443286920228644 ],
-  zoom: 2.9142882493605033
+    zoom: 2.9142882493605033
+  })
 });
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
   .then(res => res.text())

examples/line/arc/demo/trip_arc.js

@@ -1,11 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 60,
+  map: new Mapbox({
-  type: 'mapbox',
+    pitch: 60,
-  style: 'light',
+    type: 'mapbox',
-  center: [ -74.06967, 40.720399 ],
+    style: 'light',
-  zoom: 12.45977
+    center: [ -74.06967, 40.720399 ],
+    zoom: 12.45977
+  })
 });
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'

examples/line/arc/demo/trip_arc_dark.js

@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 60,
+  map: new Mapbox({
-  type: 'mapbox',
+    pitch: 60,
-  style: 'dark',
+    style: 'dark',
-  center: [ 104.34278, 41.12554 ],
+    center: [ 104.34278, 41.12554 ],
-  zoom: 2.94888,
+    zoom: 2.94888,
-  rotation: 42.3999
+    rotation: 42.3999
+  })
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')

examples/line/isoline/demo/ele.js

@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 53.6305,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 53.6305,
-  style: 'light',
+    style: 'light',
-  center: [ 102.600579, 23.114887 ],
+    center: [ 102.600579, 23.114887 ],
-  zoom: 14.66
+    zoom: 14.66
+  })
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')

examples/line/isoline/demo/ele_dark.js

@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 26.842105263157915,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 26.842105263157915,
-  style: 'dark',
+    style: 'dark',
-  center: [ 102.599436, 23.116371 ],
+    center: [ 102.599436, 23.116371 ],
-  zoom: 14.78
+    zoom: 14.78
+  })
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')

examples/line/isoline/demo/isoline.js

@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'light',
+    style: 'light',
-  center: [ 104.117492, 36.492696 ],
+    center: [ 104.117492, 36.492696 ],
-  zoom: 3.89
+    zoom: 3.89
+  })
 });
 
 fetch(

examples/line/line/demo/isoline.js

@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'light',
+    style: 'light',
-  center: [ 104.117492, 36.492696 ],
+    center: [ 104.117492, 36.492696 ],
-  zoom: 3.89
+    zoom: 3.89
+  })
 });
 
 fetch(

examples/line/path/demo/bus_dark.js

@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  center: [ 103.83735, 1.3602538 ],
+  map: new Mapbox({
-  pitch: 4.00000000000001,
+    center: [ 103.83735, 1.3602538 ],
-  zoom: 10.210275860702593,
+    pitch: 4.00000000000001,
-  rotation: 19.313180925794313,
+    zoom: 10.210275860702593,
-  type: 'mapbox',
+    rotation: 19.313180925794313,
-  style: 'dark'
+    style: 'dark'
+  })
 });
 
 fetch(

examples/line/path/demo/bus_light.js

@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  center: [ 103.83735604457024, 1.360253881403068 ],
+  map: new Mapbox({
-  pitch: 4.00000000000001,
+    center: [ 103.83735604457024, 1.360253881403068 ],
-  zoom: 10.210275860702593,
+    pitch: 4.00000000000001,
-  rotation: 19.313180925794313,
+    zoom: 10.210275860702593,
-  type: 'mapbox',
+    rotation: 19.313180925794313,
-  style: 'light'
+    style: 'light'
+  })
 });
 
 fetch(

examples/line/path/demo/road_dark.js

@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  center: [ 116.3956, 39.9392 ],
+  map: new Mapbox({
-  pitch: 0,
+    center: [ 116.3956, 39.9392 ],
-  zoom: 10,
+    pitch: 0,
-  rotation: 0,
+    zoom: 10,
-  type: 'mapbox',
+    rotation: 0,
-  style: 'dark'
+    style: 'dark'
+  })
 });
 
 fetch(

examples/line/path/demo/road_light.js

@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  center: [ 116.3956, 39.9392 ],
+  map: new Mapbox({
-  pitch: 0,
+    center: [ 116.3956, 39.9392 ],
-  zoom: 10,
+    pitch: 0,
-  rotation: 0,
+    zoom: 10,
-  type: 'mapbox',
+    rotation: 0,
-  style: 'light'
+    style: 'light'
+  })
 });
 
 fetch(

examples/point/bubble/demo/color.js

@@ -1,13 +1,15 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'light',
+    style: 'light',
-  center: [ 121.435159, 31.256971 ],
+    center: [ 121.435159, 31.256971 ],
-  zoom: 14.89,
+    zoom: 14.89,
-  minZoom: 10
+    minZoom: 10
+  })
 });
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'

examples/point/bubble/demo/point.js

@@ -1,12 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'light',
+    type: 'amap',
-  center: [ 140.067171, 36.26186 ],
+    style: 'light',
-  zoom: 5.32,
+    center: [ 140.067171, 36.26186 ],
-  maxZoom: 10
+    zoom: 5.32,
+    maxZoom: 10
+  })
 });
 
 fetch(

examples/point/bubble/demo/scatter.js

@@ -1,11 +1,14 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new GaodeMap({
-  style: 'light',
+    style: 'light',
-  center: [ -121.24357, 37.58264 ],
+    center: [ -121.24357, 37.58264 ],
-  pitch: 0,
+    pitch: 0,
-  zoom: 6.45
+    zoom: 6.45
+  })
 });
 
 fetch(

examples/point/bubble/demo/world.js

@@ -1,12 +1,15 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new Mapbox({
-  type: 'mapbox',
+    pitch: 0,
-  style: 'dark',
+    style: 'dark',
-  center: [ 96.99215001469588, 29.281597225674773 ],
+    center: [ 96.99215001469588, 29.281597225674773 ],
-  zoom: 2.194613775109773,
+    zoom: 2.194613775109773,
-  maxZoom: 10
+    maxZoom: 10
+  })
 });
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'

examples/point/chart/demo/bar.js

@@ -1,17 +1,20 @@
 import { Scene, Marker } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as G2 from '@antv/g2';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new GaodeMap({
-  style: 'light',
+    style: 'light',
-  center: [ 2.6125016864608597, 49.359131 ],
+    center: [ 2.6125016864608597, 49.359131 ],
-  pitch: 0,
+    pitch: 0,
-  zoom: 4.19
+    zoom: 4.19
+  })
 });
+addChart();
 scene.render();
-scene.on('loaded', () => {
+
-  addChart();
+
-});
 function addChart() {
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@@ -64,14 +67,14 @@ function addChart() {
           .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
           .opacity(1);
         chart.render();
-        new Marker({
+        const marker = new Marker({
           element: el
         })
           .setLnglat({
             lng: item.coordinates[0],
             lat: item.coordinates[1]
-          })
+          });
-          .addTo(scene);
+        scene.addMarker(marker);
       });
     });
 }

examples/point/chart/demo/chart.js

@@ -1,17 +1,19 @@
 import { Scene, Marker } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as G2 from '@antv/g2';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new GaodeMap({
-  style: 'light',
+    style: 'light',
-  center: [ 2.6125016864608597, 49.359131 ],
+    center: [ 2.6125016864608597, 49.359131 ],
-  pitch: 0,
+    pitch: 0,
-  zoom: 4.19
+    zoom: 4.19
+  })
 });
+addChart();
 scene.render();
-scene.on('loaded', () => {
+
-  addChart();
-});
 function addChart() {
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@@ -86,14 +88,14 @@ function addChart() {
           .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
           .shape('sliceShape');
         chart.render();
-        new Marker({
+        const marker = new Marker({
           element: el
         })
           .setLnglat({
             lng: item.coordinates[0],
             lat: item.coordinates[1]
-          })
+          });
-          .addTo(scene);
+        scene.addMarker(marker);
       });
     });
 }

examples/point/chart/demo/ring.js

@@ -1,4 +1,5 @@
 import { Scene, Marker } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as G2 from '@antv/g2';
 
 const CSS = `.l7-marker .g2-guide-html {
@@ -36,75 +37,73 @@ loadCssCode(CSS);
 
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new Mapbox({
-  type: 'mapbox',
+    pitch: 0,
-  style: 'dark',
+    style: 'dark',
-  center: [ 52.21496184144132, 24.121126851768906 ],
+    center: [ 52.21496184144132, 24.121126851768906 ],
-  zoom: 3.802
+    zoom: 3.802
+  })
 });
-scene.render();
+Promise.all([
-scene.on('loaded', () => {
+  fetch(
-  Promise.all([
+    'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
-    fetch(
+  ).then(d => d.json()),
-      'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
+  fetch(
-    ).then(d => d.json()),
+    'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
-    fetch(
+  ).then(d => d.json())
-      'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
+]).then(function onLoad([ center, population ]) {
-    ).then(d => d.json())
+  const popobj = {};
-  ]).then(function onLoad([ center, population ]) {
+  population.forEach(element => {
-    const popobj = {};
+    popobj[element.Code] =
-    population.forEach(element => {
+      element['Population, female (% of total) (% of total)'];
-      popobj[element.Code] =
+  });
-        element['Population, female (% of total) (% of total)'];
+  // 数据绑定
-    });
-    // 数据绑定
 
-    center.features = center.features.map(fe => {
+  center.features = center.features.map(fe => {
-      fe.properties.female = popobj[fe.properties.id] * 1 || 0;
+    fe.properties.female = popobj[fe.properties.id] * 1 || 0;
-      return fe;
+    return fe;
+  });
+  center.features.forEach(point => {
+    const el = document.createElement('div');
+    const coord = point.geometry.coordinates;
+    const v = point.properties.female * 1;
+    if (v < 1 || (v > 46 && v < 54)) { return; }
+    const size = 60;
+    const data = [
+      {
+        type: '男性',
+        value: 100.0 - v.toFixed(2)
+      },
+      {
+        type: '女性',
+        value: v.toFixed(2) * 1
+      }
+    ];
+    const chart = new G2.Chart({
+      container: el,
+      width: size,
+      height: size,
+      render: 'svg',
+      padding: 0
     });
-    center.features.forEach(point => {
+    chart.source(data);
-      const el = document.createElement('div');
+    chart.legend(false);
-      const coord = point.geometry.coordinates;
+    chart.tooltip(false);
-      const v = point.properties.female * 1;
+    chart.coord('theta', {
-      if (v < 1 || (v > 46 && v < 54)) { return; }
+      radius: 0.9,
-      const size = 60;
+      innerRadius: 0.6
-      const data = [
-        {
-          type: '男性',
-          value: 100.0 - v.toFixed(2)
-        },
-        {
-          type: '女性',
-          value: v.toFixed(2) * 1
-        }
-      ];
-      const chart = new G2.Chart({
-        container: el,
-        width: size,
-        height: size,
-        render: 'svg',
-        padding: 0
-      });
-      chart.source(data);
-      chart.legend(false);
-      chart.tooltip(false);
-      chart.coord('theta', {
-        radius: 0.9,
-        innerRadius: 0.6
-      });
-      chart
-        .intervalStack()
-        .position('value')
-        .color('type', [ '#5CCEA1', '#5B8FF9' ])
-        .opacity(1);
-      chart.render();
-      new Marker({ element: el })
-        .setLnglat({
-          lng: coord[0],
-          lat: coord[1]
-        })
-        .addTo(scene);
     });
+    chart
+      .intervalStack()
+      .position('value')
+      .color('type', [ '#5CCEA1', '#5B8FF9' ])
+      .opacity(1);
+    chart.render();
+    const marker = new Marker({ element: el })
+      .setLnglat({
+        lng: coord[0],
+        lat: coord[1]
+      });
+    scene.addMarker(marker);
   });
 });

examples/point/column/demo/clumn_shape.js

@@ -1,14 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 66.02383,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 66.02383,
-  style: 'dark',
+    style: 'dark',
-  center: [ 121.400257, 31.25287 ],
+    center: [ 121.400257, 31.25287 ],
-  zoom: 14.55,
+    zoom: 14.55,
-  rotation: 134.9507
+    rotation: 134.9507
+  })
 });
-window.mapScene = scene;
 
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'

examples/point/column/demo/clumn_shape_light.js

@@ -1,14 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 60,
+  map: new Mapbox({
-  type: 'mapbox',
+    pitch: 60,
-  style: 'light',
+    style: 'light',
-  center: [ 121.412224, 31.26192438 ],
+    center: [ 121.412224, 31.26192438 ],
-  zoom: 13.13438,
+    zoom: 13.13438,
-  rotation: 35.97133
+    rotation: 35.97133
+  })
 });
-window.mapScene = scene;
 
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'

examples/point/column/demo/column_dark.js

@@ -1,14 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  pitch: 35.210526315789465,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 35.210526315789465,
-  style: 'dark',
+    style: 'dark',
-  center: [ 104.288144, 31.239692 ],
+    center: [ 104.288144, 31.239692 ],
-  zoom: 4.4
+    zoom: 4.4
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
   .then(res => res.json())
   .then(data => {

examples/point/column/demo/column_light.js

@@ -1,14 +1,17 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 48.62562,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 48.62562,
-  style: 'light',
+    style: 'light',
-  center: [ 104.026043, 31.847 ],
+    center: [ 104.026043, 31.847 ],
-  rotation: -0.76,
+    rotation: -0.76,
-  zoom: 4.48
+    zoom: 4.48
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
   .then(res => res.json())
   .then(data => {

examples/point/image/demo/image.js

@@ -1,11 +1,14 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'light',
+    style: 'light',
-  center: [ 121.434765, 31.256735 ],
+    center: [ 121.434765, 31.256735 ],
-  zoom: 14.83
+    zoom: 14.83
+  })
 });
 
 fetch(

examples/point/image/demo/locate.js

@@ -1,11 +1,14 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'light',
+    style: 'light',
-  center: [ 116.276227, 35.256776 ],
+    center: [ 116.276227, 35.256776 ],
-  zoom: 6
+    zoom: 6
+  })
 });
 
 fetch(

examples/point/image/demo/weather.js

@@ -1,12 +1,15 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new GaodeMap({
-  style: 'dark',
+    style: 'dark',
-  center: [ 120.5969, 29.7918 ],
+    center: [ 120.5969, 29.7918 ],
-  pitch: 35,
+    pitch: 35,
-  zoom: 7,
+    zoom: 7,
-  rotation: 4.183582
+    rotation: 4.183582
+  })
 });
 scene.addImage(
   '00',

examples/point/marker/demo/marker.js

@@ -1,16 +1,18 @@
 import { Scene, Marker } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new GaodeMap({
-  style: 'light',
+    style: 'light',
-  center: [ 105.790327, 36.495636 ],
+    center: [ 105.790327, 36.495636 ],
-  pitch: 0,
+    pitch: 0,
-  zoom: 4
+    zoom: 4
+  })
 });
+addMarkers();
 scene.render();
-scene.on('loaded', () => {
+
-  addMarkers();
-});
 
 function addMarkers() {
   fetch(
@@ -25,11 +27,11 @@ function addMarkers() {
         el.textContent = nodes[i].v + '℃';
         el.style.background = getColor(nodes[i].v);
         el.style.borderColor = getColor(nodes[i].v);
-        new Marker({
+        const marker = new Marker({
           element: el
         })
-          .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
+          .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
-          .addTo(scene);
+        scene.addMarker(marker);
       }
     });
 }

examples/point/scatter/demo/normal.js

@@ -1,13 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new GaodeMap({
-  style: 'dark',
+    style: 'dark',
-  center: [ 121.417463, 31.215175 ],
+    center: [ 121.417463, 31.215175 ],
-  pitch: 0,
+    pitch: 0,
-  zoom: 11
+    zoom: 11
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
   .then(res => res.text())
   .then(data => {

examples/point/scatter/demo/normal2.js

@@ -1,13 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 64.88,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 64.88,
-  style: 'dark',
+    style: 'dark',
-  center: [ 114.060288, 22.53684 ],
+    center: [ 114.060288, 22.53684 ],
-  zoom: 15.63
+    zoom: 15.63
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
 )

examples/polygon/3d/demo/polygon.js

@@ -1,14 +1,16 @@
 import { Scene, PolygonLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'dark',
+    style: 'dark',
-  center: [ 114.050008, 22.529272 ],
+    center: [ 114.050008, 22.529272 ],
-  zoom: 14.1
+    zoom: 14.1
+  })
 });
 
-window.mapScene = scene;
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
 )

examples/polygon/fill/demo/fill.js

@@ -1,13 +1,16 @@
 import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'light',
+    style: 'light',
-  center: [ 116.368652, 39.93866 ],
+    center: [ 116.368652, 39.93866 ],
-  zoom: 10.07
+    zoom: 10.07
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'
 )

examples/polygon/fill/demo/polygon.js

@@ -1,11 +1,14 @@
 import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'light',
+    style: 'light',
-  center: [ 107.042225, 37.66565 ],
+    center: [ 107.042225, 37.66565 ],
-  zoom: 3.87
+    zoom: 3.87
+  })
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')

examples/polygon/fill/demo/population.js

@@ -1,11 +1,14 @@
 import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new Mapbox({
-  type: 'mapbox',
+    pitch: 0,
-  style: 'light',
+    style: 'light',
-  center: [ 3.438, 40.16797 ],
+    center: [ 3.438, 40.16797 ],
-  zoom: 0.51329
+    zoom: 0.51329
+  })
 });
 Promise.all([
   fetch(

examples/raster/basic/demo/image.js

@@ -1,11 +1,14 @@
 import { Scene, ImageLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'light',
+    style: 'light',
-  center: [ 121.268, 30.3628 ],
+    center: [ 121.268, 30.3628 ],
-  zoom: 13
+    zoom: 13
+  })
 });
 
 const layer = new ImageLayer({});

examples/raster/basic/demo/radar.js

@@ -1,11 +1,14 @@
 import { Scene, ImageLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  map: new GaodeMap({
-  type: 'amap',
+    pitch: 0,
-  style: 'dark',
+    style: 'dark',
-  center: [ 115.5268, 34.3628 ],
+    center: [ 115.5268, 34.3628 ],
-  zoom: 7
+    zoom: 7
+  })
 });
 
 const layer = new ImageLayer({});

examples/tutorial/control/demo/amap.js

@@ -0,0 +1,53 @@
+import { PointLayer, Scale, Scene, Layers, Zoom } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 121.4316962, 31.26082325 ],
+    zoom: 15.056
+  })
+});
+fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+  .then(res => res.json())
+  .then(data => {
+    const pointLayer =
+      new PointLayer({
+      })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude'
+          }
+        }).shape('circle')
+        .size('unit_price', [ 5, 25 ])
+        .color('name', [ '#49B5AD', '#5B8FF9' ])
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1
+        });
+
+    scene.addLayer(pointLayer);
+    const overlayers = {
+      围栏填充: pointLayer
+    };
+    const layersControl = new Layers({
+      overlayers
+    });
+
+    scene.addControl(layersControl);
+
+  });
+
+
+const zoomControl = new Zoom({
+  position: 'topright'
+});
+const scaleControl = new Scale({
+  position: 'bottomright'
+});
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+

examples/tutorial/control/demo/mapbox.js

@@ -0,0 +1,17 @@
+import { Scale, Zoom, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+});
+
+const zoomControl = new Zoom();
+const scaleControl = new Scale();
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+

examples/tutorial/control/demo/meta.json

@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "高德底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*yXzQRYcGTyoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/tutorial/control/index.en.md

@@ -0,0 +1,5 @@
+---
+title: control
+order: 2
+---
+How to use the map control

examples/tutorial/control/index.zh.md

@@ -0,0 +1,5 @@
+---
+title: 组件
+order: 2
+---
+如何使用组件

examples/tutorial/data/demo/line.js

@@ -0,0 +1,11 @@
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+});

examples/tutorial/data/demo/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "图库",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "line.js",
+      "title": "json数据"",
+      "screenshot": ""
+    }
+  ]
+}

examples/tutorial/data/index.en.md

@@ -0,0 +1,6 @@
+---
+title: Data
+order: 1
+---
+
+coming soon ……

examples/tutorial/data/index.zh.md

@@ -0,0 +1,5 @@
+---
+title: 数据
+order: 1
+---
+在路上 ……

examples/tutorial/map/demo/amap.js

@@ -0,0 +1,11 @@
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+});

examples/tutorial/map/demo/mapbox.js

@@ -0,0 +1,11 @@
+import { Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+});

examples/tutorial/map/demo/meta.json

@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "高德底图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*F0JPSoLcSesAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/tutorial/map/index.en.md

@@ -0,0 +1,6 @@
+---
+title: map
+order: 0
+---
+
+how to  use L7 Initialize third-party maps

examples/tutorial/map/index.zh.md

@@ -0,0 +1,7 @@
+---
+title: 地图
+order: 0
+---
+介绍如何初始化一个第三方底图
+
+

examples/tutorial/marker/demo/amap.js

@@ -0,0 +1,21 @@
+import { Scene, Marker, Popup } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 121.4316962, 31.26082325 ],
+    zoom: 12.056
+  })
+});
+// 创建默认 marker
+const popup = new Popup({
+  offsets: [ 0, 20 ]
+}).setText('hello');
+
+const marker = new Marker()
+  .setLnglat([ 121.4316962, 31.26082325 ])
+  .setPopup(popup);
+
+scene.addMarker(marker);

examples/tutorial/marker/demo/mapbox.js

@@ -0,0 +1,17 @@
+import { Scale, Zoom, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+});
+
+const zoomControl = new Zoom();
+const scaleControl = new Scale();
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+

examples/tutorial/marker/demo/meta.json

@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "添加默认Marker",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Gzj7SYk-vdEAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/tutorial/marker/index.en.md

@@ -0,0 +1,5 @@
+---
+title: control
+order: 2
+---
+add  Rich text  annotation  to scene

examples/tutorial/marker/index.zh.md

@@ -0,0 +1,5 @@
+---
+title: Marker
+order: 2
+---
+通过添加dom实现富文本地图标注

gatsby-browser.js

@@ -4,3 +4,4 @@ require('./packages/component/src/css/l7.css');
 window.geotiff = require('geotiff/dist/geotiff.bundle.min.js');
 window.g2 = require('@antv/g2');
 window.l7 = require('@antv/l7');
+window.l7Maps = require('@antv/l7-maps');

gatsby-config.js

@@ -166,7 +166,8 @@ module.exports = {
     playground: {
       container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
       dependencies: {
-        '@antv/l7': 'beta'
+        '@antv/l7': 'beta',
+        '@antv/l7-maps': 'latest'
       }
     }
   }

jest.config.js

@@ -24,7 +24,7 @@ module.exports = {
   //   },
   // },
   moduleFileExtensions: [ 'ts', 'tsx', 'js' ],
-  modulePathIgnorePatterns: [ 'dist', 'packages/renderer' ], // TODO: 暂时关闭render test
+  modulePathIgnorePatterns: [ 'dist' ],
   moduleNameMapper: {
     '@antv/l7-(.+)$': '<rootDir>packages/$1/src'
   },