refactor: merge master
|
@ -82,3 +82,18 @@ yarn add -W -D typescript jest
|
||||||
```bash
|
```bash
|
||||||
yarn commit
|
yarn commit
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 发布
|
||||||
|
|
||||||
|
### 设置版本号
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn run version:prerelease
|
||||||
|
```
|
||||||
|
设置完成后需要commit一下代码
|
||||||
|
|
||||||
|
### 发布
|
||||||
|
|
||||||
|
yarn run release
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -79,3 +79,4 @@ node_modules/
|
||||||
packages/l7/package_bak.json
|
packages/l7/package_bak.json
|
||||||
|
|
||||||
stories/Test
|
stories/Test
|
||||||
|
packages/draw/node_modules/@turf
|
|
@ -1,3 +1,3 @@
|
||||||
// import '@storybook/addon-actions/register';
|
// import '@storybook/addon-actions/register';
|
||||||
import '@storybook/addon-notes/register';
|
// import '@storybook/addon-notes/register';
|
||||||
import '@storybook/addon-storysource/register';
|
// import '@storybook/addon-storysource/register';
|
||||||
|
|
|
@ -1,13 +1,12 @@
|
||||||
// tslint:disable-next-line:no-submodule-imports
|
// tslint:disable-next-line:no-submodule-imports
|
||||||
import '!style-loader!css-loader!sass-loader!./iframe.scss';
|
// import '!style-loader!css-loader!sass-loader!./iframe.scss';
|
||||||
// import '@storybook/addon-console';
|
|
||||||
import { addParameters, configure } from '@storybook/react';
|
import { addParameters, configure } from '@storybook/react';
|
||||||
import { create } from '@storybook/theming';
|
import { create } from '@storybook/theming';
|
||||||
|
|
||||||
addParameters({
|
addParameters({
|
||||||
options: {
|
options: {
|
||||||
isFullscreen: false,
|
isFullscreen: false,
|
||||||
showAddonsPanel: true,
|
showAddonsPanel: false,
|
||||||
showSearchBox: false,
|
showSearchBox: false,
|
||||||
panelPosition: 'bottom',
|
panelPosition: 'bottom',
|
||||||
hierarchySeparator: /\./,
|
hierarchySeparator: /\./,
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
// Export a function. Accept the base config as the only param.
|
||||||
|
module.exports = {
|
||||||
|
webpackFinal: async (config, { configType }) => {
|
||||||
|
config.module.rules.push({
|
||||||
|
test: /\.stories\**.svg$/,
|
||||||
|
loader: 'svg-inline-loader'
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
};
|
|
@ -20,17 +20,21 @@ module.exports = ({ config }) => {
|
||||||
|
|
||||||
config.module.rules.push({
|
config.module.rules.push({
|
||||||
test: /\.stories\.tsx?$/,
|
test: /\.stories\.tsx?$/,
|
||||||
loaders: [
|
// loaders: [
|
||||||
{
|
// {
|
||||||
loader: require.resolve('@storybook/addon-storysource/loader'),
|
// loader: require.resolve('@storybook/addon-storysource/loader'),
|
||||||
options: { parser: 'typescript' },
|
// options: { parser: 'typescript' },
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
enforce: 'pre',
|
enforce: 'pre',
|
||||||
},{
|
},{
|
||||||
test: /\.stories\.css?$/,
|
test: /\.stories\.css?$/,
|
||||||
use: ['style-loader', 'css-loader'],
|
use: ['style-loader', 'css-loader'],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.stories\.svg$/,
|
||||||
|
loader: 'svg-inline-loader'
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
config.resolve.extensions.push('.ts', '.tsx', '.js', '.glsl');
|
config.resolve.extensions.push('.ts', '.tsx', '.js', '.glsl');
|
||||||
|
|
|
@ -22,6 +22,8 @@ before_install:
|
||||||
- export PATH="$HOME/.yarn/bin:$PATH"
|
- export PATH="$HOME/.yarn/bin:$PATH"
|
||||||
|
|
||||||
install:
|
install:
|
||||||
|
- export DISPLAY=':99.0'
|
||||||
|
- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
|
||||||
- yarn install
|
- yarn install
|
||||||
|
|
||||||
before_script:
|
before_script:
|
||||||
|
@ -31,3 +33,6 @@ script:
|
||||||
- yarn lint
|
- yarn lint
|
||||||
- yarn test
|
- yarn test
|
||||||
- yarn build
|
- yarn build
|
||||||
|
|
||||||
|
notifications:
|
||||||
|
webhooks: https://oapi.dingtalk.com/robot/send?access_token=2dacc76d8b1ea8bcdc792b50f103d13efdba9ef53ec0caeb70631bc3add56118
|
||||||
|
|
431
CHANGELOG.md
|
@ -3,6 +3,437 @@
|
||||||
All notable changes to this project will be documented in this file.
|
All notable changes to this project will be documented in this file.
|
||||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
## [2.1.12](https://github.com/antvis/L7/compare/v2.1.11...v2.1.12) (2020-04-10)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- 采用非偏移坐标系坐标系解决高德地图中国区域抖动的问题 ([124a1d2](https://github.com/antvis/L7/commit/124a1d27aa97c9a6af1de6d041785c420f02ce4c))
|
||||||
|
- **heatmap:** 修复热力图某些设备上黑色 fix [#278](https://github.com/antvis/L7/issues/278) ([b8f5899](https://github.com/antvis/L7/commit/b8f58992d1fce38fdaac9d82ebfbec14e35298bd))
|
||||||
|
- 绘制组件高德地图 mousedown 事件不能监听的问题 ([1eb3313](https://github.com/antvis/L7/commit/1eb3313919b2c7c9162bee70a249846b897ef4b4))
|
||||||
|
|
||||||
|
## [2.1.11](https://github.com/antvis/L7/compare/v2.1.10...v2.1.11) (2020-04-07)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- marker event ([ce6eefd](https://github.com/antvis/L7/commit/ce6eefdeb87935f48d7ca2779837270f1498f3a5))
|
||||||
|
|
||||||
|
## [2.1.8](https://github.com/antvis/L7/compare/v2.1.7...v2.1.8) (2020-03-26)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- 3d 热力图抖动问题 fixes [#138](https://github.com/antvis/L7/issues/138) [#263](https://github.com/antvis/L7/issues/263) ([d56e8d6](https://github.com/antvis/L7/commit/d56e8d6205942ca12fa7ac3dfd226aecbb850ed2))
|
||||||
|
- 拾取 invalid x offset ([8282007](https://github.com/antvis/L7/commit/82820077f40998e156337b266623309eff6b2d60))
|
||||||
|
|
||||||
|
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- 修复颜色纹理取色问题 & 图片标注默认颜色问题 ([9d6b198](https://github.com/antvis/L7/commit/9d6b198f76b44c55ce0a094c6649c9e4130a398b))
|
||||||
|
|
||||||
|
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- observerable 打包问题 ([412e2a8](https://github.com/antvis/L7/commit/412e2a83f78a9a448f0a5b65ccaf2ea97f78b47a))
|
||||||
|
- picking ([d6c6694](https://github.com/antvis/L7/commit/d6c66941323fb21e6810e1d72d5b43e40867be71))
|
||||||
|
|
||||||
|
## [2.1.3](https://github.com/antvis/L7/compare/v2.0.36...v2.1.3) (2020-03-17)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- fix build layer opactiy ([5a58ab8](https://github.com/antvis/L7/commit/5a58ab8f86ec969ca384e984784355c2c91b1a47))
|
||||||
|
- fix build layer opactiy ([0ccca2b](https://github.com/antvis/L7/commit/0ccca2b383964e058ed87cc980c57c9c67917cf5))
|
||||||
|
- ios 12 点击事件问题 & regl 版本锁定 ([ad52e8e](https://github.com/antvis/L7/commit/ad52e8e8fde4a7b4b3e16d86a6035bd7c07fb80c))
|
||||||
|
- ios touchstart && double touch ([4fc3a11](https://github.com/antvis/L7/commit/4fc3a11de953918a9f5ba13d767c00429d1711cd))
|
||||||
|
- mapbox 光照问题 ([20d2a6d](https://github.com/antvis/L7/commit/20d2a6d8b803ca3ad87cc1ef69a59d1e3d348cef))
|
||||||
|
- mapbox 光照问题 ([88aa585](https://github.com/antvis/L7/commit/88aa585c2a8339f6eb7518a92e5544733ba356e3))
|
||||||
|
- update demo style ([c1960b5](https://github.com/antvis/L7/commit/c1960b50ef3e3d3aed6eb0f1934515678c2dbde8))
|
||||||
|
- 图层不可见,取消拾取 ([f4abe6a](https://github.com/antvis/L7/commit/f4abe6a6b91d9d568573018ed4cad6cf01c592d3))
|
||||||
|
|
||||||
|
## [2.1.2](https://github.com/antvis/L7/compare/v2.0.36...v2.1.2) (2020-03-15)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- ios 12 点击事件问题 & regl 版本锁定 ([ad52e8e](https://github.com/antvis/L7/commit/ad52e8e8fde4a7b4b3e16d86a6035bd7c07fb80c))
|
||||||
|
- ios touchstart && double touch ([4fc3a11](https://github.com/antvis/L7/commit/4fc3a11de953918a9f5ba13d767c00429d1711cd))
|
||||||
|
- mapbox 光照问题 ([20d2a6d](https://github.com/antvis/L7/commit/20d2a6d8b803ca3ad87cc1ef69a59d1e3d348cef))
|
||||||
|
- mapbox 光照问题 ([88aa585](https://github.com/antvis/L7/commit/88aa585c2a8339f6eb7518a92e5544733ba356e3))
|
||||||
|
- update demo style ([c1960b5](https://github.com/antvis/L7/commit/c1960b50ef3e3d3aed6eb0f1934515678c2dbde8))
|
||||||
|
- 图层不可见,取消拾取 ([f4abe6a](https://github.com/antvis/L7/commit/f4abe6a6b91d9d568573018ed4cad6cf01c592d3))
|
||||||
|
|
||||||
|
## [2.1.1](https://github.com/antvis/L7/compare/v2.0.36...v2.1.1) (2020-03-15)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- ios 12 点击事件问题 & regl 版本锁定 ([ad52e8e](https://github.com/antvis/L7/commit/ad52e8e8fde4a7b4b3e16d86a6035bd7c07fb80c))
|
||||||
|
- mapbox 光照问题 ([20d2a6d](https://github.com/antvis/L7/commit/20d2a6d8b803ca3ad87cc1ef69a59d1e3d348cef))
|
||||||
|
- mapbox 光照问题 ([88aa585](https://github.com/antvis/L7/commit/88aa585c2a8339f6eb7518a92e5544733ba356e3))
|
||||||
|
- update demo style ([c1960b5](https://github.com/antvis/L7/commit/c1960b50ef3e3d3aed6eb0f1934515678c2dbde8))
|
||||||
|
|
||||||
|
## [2.0.34](https://github.com/antvis/L7/compare/v2.0.32...v2.0.34) (2020-03-02)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- fix map reference ([79e16f5](https://github.com/antvis/L7/commit/79e16f5393c6c31cc088e946dc865cdddfde9b73))
|
||||||
|
|
||||||
|
# [2.0.0-beta.28](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.28) (2020-01-02)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **pointlayer:** point amimate ([fd66d90](https://github.com/antvis/L7/commit/fd66d90c1dad1925d1b8a3c99e89172a16bb9f60))
|
||||||
|
- rollup plugin ([2e6fc51](https://github.com/antvis/L7/commit/2e6fc512f918c637dec6009d99157a8941b3b7fb))
|
||||||
|
- **package:** fix package fsevents version ([f1ff9d7](https://github.com/antvis/L7/commit/f1ff9d7afeecadf42409f133a165a5d570046841))
|
||||||
|
- **package:** fix package fsevents version ([1b856b2](https://github.com/antvis/L7/commit/1b856b2279d13d7837fe41eae363db1d706a5357))
|
||||||
|
- animate time ([d2b8041](https://github.com/antvis/L7/commit/d2b8041ebe77753f5687383ce690950b745f748c))
|
||||||
|
- **doc:** add Scale example ([5e49ff2](https://github.com/antvis/L7/commit/5e49ff276d75980f12e7af61f712fbd1fa7f33f9))
|
||||||
|
- layer style storkeColor->stroke ([27f66a9](https://github.com/antvis/L7/commit/27f66a9918a3568f7f591af161953ac498d2dcba))
|
||||||
|
- layer style storkeColor->stroke ([ac8477b](https://github.com/antvis/L7/commit/ac8477bb44e861df2f5d0a0a2b06bd5795054c3b))
|
||||||
|
- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
|
||||||
|
- remove error yarn.lock ([a1a3eff](https://github.com/antvis/L7/commit/a1a3eff2eb3599761105de92987873ec475b0514))
|
||||||
|
- remove error yarn.lock ([64c7c65](https://github.com/antvis/L7/commit/64c7c650453f73b8d96e8510be58f5dada86900e))
|
||||||
|
- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
|
||||||
|
- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
|
||||||
|
- 高德地图底图模式,事件交互注册顺序的问题导致不生效 ([2ad4289](https://github.com/antvis/L7/commit/2ad4289e75519f956a9cb1b44a7231b1151c88fb))
|
||||||
|
- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
|
||||||
|
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||||
|
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||||
|
- **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
|
||||||
|
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||||
|
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||||
|
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||||
|
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||||
|
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- add raster layer ([2b28380](https://github.com/antvis/L7/commit/2b2838015198b8586b0c30fdc154116252a76f29))
|
||||||
|
- point text add overlap ([98869d8](https://github.com/antvis/L7/commit/98869d876b0e98dd9258c97b9be9f5a69c0a1612))
|
||||||
|
- polygon 支持 text ([f5a1546](https://github.com/antvis/L7/commit/f5a15465e230e6f58c92bec5f12b132bc9a9ae91))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
|
||||||
|
- **layer:** add citybuildinglayer & add line add animate ([d657286](https://github.com/antvis/L7/commit/d657286d58c795ba968ae930eb382ca422bdbd08))
|
||||||
|
- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
|
||||||
|
- **layer:** pointLayer add text model ([84a9193](https://github.com/antvis/L7/commit/84a9193e3a8a311bb52bbedabc8847eabba7dc9a))
|
||||||
|
- **layer:** pointLayer add text model ([20ad754](https://github.com/antvis/L7/commit/20ad7540974fdf0a6e902e2ea3700dcd5cf28d1d))
|
||||||
|
- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
|
||||||
|
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||||
|
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||||
|
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||||
|
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||||
|
|
||||||
|
# [2.0.0-beta.27](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.27) (2020-01-01)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **pointlayer:** point amimate ([fd66d90](https://github.com/antvis/L7/commit/fd66d90c1dad1925d1b8a3c99e89172a16bb9f60))
|
||||||
|
- rollup plugin ([2e6fc51](https://github.com/antvis/L7/commit/2e6fc512f918c637dec6009d99157a8941b3b7fb))
|
||||||
|
- **package:** fix package fsevents version ([f1ff9d7](https://github.com/antvis/L7/commit/f1ff9d7afeecadf42409f133a165a5d570046841))
|
||||||
|
- **package:** fix package fsevents version ([1b856b2](https://github.com/antvis/L7/commit/1b856b2279d13d7837fe41eae363db1d706a5357))
|
||||||
|
- animate time ([d2b8041](https://github.com/antvis/L7/commit/d2b8041ebe77753f5687383ce690950b745f748c))
|
||||||
|
- **doc:** add Scale example ([5e49ff2](https://github.com/antvis/L7/commit/5e49ff276d75980f12e7af61f712fbd1fa7f33f9))
|
||||||
|
- layer style storkeColor->stroke ([27f66a9](https://github.com/antvis/L7/commit/27f66a9918a3568f7f591af161953ac498d2dcba))
|
||||||
|
- layer style storkeColor->stroke ([ac8477b](https://github.com/antvis/L7/commit/ac8477bb44e861df2f5d0a0a2b06bd5795054c3b))
|
||||||
|
- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
|
||||||
|
- remove error yarn.lock ([a1a3eff](https://github.com/antvis/L7/commit/a1a3eff2eb3599761105de92987873ec475b0514))
|
||||||
|
- remove error yarn.lock ([64c7c65](https://github.com/antvis/L7/commit/64c7c650453f73b8d96e8510be58f5dada86900e))
|
||||||
|
- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
|
||||||
|
- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
|
||||||
|
- 高德地图底图模式,事件交互注册顺序的问题导致不生效 ([2ad4289](https://github.com/antvis/L7/commit/2ad4289e75519f956a9cb1b44a7231b1151c88fb))
|
||||||
|
- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
|
||||||
|
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||||
|
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||||
|
- **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
|
||||||
|
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||||
|
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||||
|
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||||
|
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||||
|
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- point text add overlap ([98869d8](https://github.com/antvis/L7/commit/98869d876b0e98dd9258c97b9be9f5a69c0a1612))
|
||||||
|
- polygon 支持 text ([f5a1546](https://github.com/antvis/L7/commit/f5a15465e230e6f58c92bec5f12b132bc9a9ae91))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
|
||||||
|
- **layer:** add citybuildinglayer & add line add animate ([d657286](https://github.com/antvis/L7/commit/d657286d58c795ba968ae930eb382ca422bdbd08))
|
||||||
|
- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
|
||||||
|
- **layer:** pointLayer add text model ([84a9193](https://github.com/antvis/L7/commit/84a9193e3a8a311bb52bbedabc8847eabba7dc9a))
|
||||||
|
- **layer:** pointLayer add text model ([20ad754](https://github.com/antvis/L7/commit/20ad7540974fdf0a6e902e2ea3700dcd5cf28d1d))
|
||||||
|
- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
|
||||||
|
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||||
|
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||||
|
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||||
|
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||||
|
|
||||||
|
# [2.0.0-alpha.28](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-alpha.28) (2020-01-01)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- rollup plugin ([2e6fc51](https://github.com/antvis/L7/commit/2e6fc512f918c637dec6009d99157a8941b3b7fb))
|
||||||
|
- **package:** fix package fsevents version ([f1ff9d7](https://github.com/antvis/L7/commit/f1ff9d7afeecadf42409f133a165a5d570046841))
|
||||||
|
- **package:** fix package fsevents version ([1b856b2](https://github.com/antvis/L7/commit/1b856b2279d13d7837fe41eae363db1d706a5357))
|
||||||
|
- animate time ([d2b8041](https://github.com/antvis/L7/commit/d2b8041ebe77753f5687383ce690950b745f748c))
|
||||||
|
- **doc:** add Scale example ([5e49ff2](https://github.com/antvis/L7/commit/5e49ff276d75980f12e7af61f712fbd1fa7f33f9))
|
||||||
|
- layer style storkeColor->stroke ([27f66a9](https://github.com/antvis/L7/commit/27f66a9918a3568f7f591af161953ac498d2dcba))
|
||||||
|
- layer style storkeColor->stroke ([ac8477b](https://github.com/antvis/L7/commit/ac8477bb44e861df2f5d0a0a2b06bd5795054c3b))
|
||||||
|
- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
|
||||||
|
- remove error yarn.lock ([a1a3eff](https://github.com/antvis/L7/commit/a1a3eff2eb3599761105de92987873ec475b0514))
|
||||||
|
- remove error yarn.lock ([64c7c65](https://github.com/antvis/L7/commit/64c7c650453f73b8d96e8510be58f5dada86900e))
|
||||||
|
- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
|
||||||
|
- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
|
||||||
|
- 高德地图底图模式,事件交互注册顺序的问题导致不生效 ([2ad4289](https://github.com/antvis/L7/commit/2ad4289e75519f956a9cb1b44a7231b1151c88fb))
|
||||||
|
- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
|
||||||
|
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||||
|
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||||
|
- **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
|
||||||
|
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||||
|
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||||
|
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||||
|
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||||
|
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- point text add overlap ([98869d8](https://github.com/antvis/L7/commit/98869d876b0e98dd9258c97b9be9f5a69c0a1612))
|
||||||
|
- polygon 支持 text ([f5a1546](https://github.com/antvis/L7/commit/f5a15465e230e6f58c92bec5f12b132bc9a9ae91))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
|
||||||
|
- **layer:** add citybuildinglayer & add line add animate ([d657286](https://github.com/antvis/L7/commit/d657286d58c795ba968ae930eb382ca422bdbd08))
|
||||||
|
- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
|
||||||
|
- **layer:** pointLayer add text model ([84a9193](https://github.com/antvis/L7/commit/84a9193e3a8a311bb52bbedabc8847eabba7dc9a))
|
||||||
|
- **layer:** pointLayer add text model ([20ad754](https://github.com/antvis/L7/commit/20ad7540974fdf0a6e902e2ea3700dcd5cf28d1d))
|
||||||
|
- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
|
||||||
|
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||||
|
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||||
|
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||||
|
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||||
|
|
||||||
|
# [2.0.0-alpha.27](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-alpha.27) (2019-12-31)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- rollup plugin ([2e6fc51](https://github.com/antvis/L7/commit/2e6fc512f918c637dec6009d99157a8941b3b7fb))
|
||||||
|
- **package:** fix package fsevents version ([f1ff9d7](https://github.com/antvis/L7/commit/f1ff9d7afeecadf42409f133a165a5d570046841))
|
||||||
|
- **package:** fix package fsevents version ([1b856b2](https://github.com/antvis/L7/commit/1b856b2279d13d7837fe41eae363db1d706a5357))
|
||||||
|
- animate time ([d2b8041](https://github.com/antvis/L7/commit/d2b8041ebe77753f5687383ce690950b745f748c))
|
||||||
|
- **doc:** add Scale example ([5e49ff2](https://github.com/antvis/L7/commit/5e49ff276d75980f12e7af61f712fbd1fa7f33f9))
|
||||||
|
- layer style storkeColor->stroke ([27f66a9](https://github.com/antvis/L7/commit/27f66a9918a3568f7f591af161953ac498d2dcba))
|
||||||
|
- layer style storkeColor->stroke ([ac8477b](https://github.com/antvis/L7/commit/ac8477bb44e861df2f5d0a0a2b06bd5795054c3b))
|
||||||
|
- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
|
||||||
|
- remove error yarn.lock ([a1a3eff](https://github.com/antvis/L7/commit/a1a3eff2eb3599761105de92987873ec475b0514))
|
||||||
|
- remove error yarn.lock ([64c7c65](https://github.com/antvis/L7/commit/64c7c650453f73b8d96e8510be58f5dada86900e))
|
||||||
|
- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
|
||||||
|
- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
|
||||||
|
- 高德地图底图模式,事件交互注册顺序的问题导致不生效 ([2ad4289](https://github.com/antvis/L7/commit/2ad4289e75519f956a9cb1b44a7231b1151c88fb))
|
||||||
|
- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
|
||||||
|
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||||
|
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||||
|
- **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
|
||||||
|
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||||
|
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||||
|
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||||
|
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||||
|
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- point text add overlap ([98869d8](https://github.com/antvis/L7/commit/98869d876b0e98dd9258c97b9be9f5a69c0a1612))
|
||||||
|
- polygon 支持 text ([f5a1546](https://github.com/antvis/L7/commit/f5a15465e230e6f58c92bec5f12b132bc9a9ae91))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
|
||||||
|
- **layer:** add citybuildinglayer & add line add animate ([d657286](https://github.com/antvis/L7/commit/d657286d58c795ba968ae930eb382ca422bdbd08))
|
||||||
|
- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
|
||||||
|
- **layer:** pointLayer add text model ([84a9193](https://github.com/antvis/L7/commit/84a9193e3a8a311bb52bbedabc8847eabba7dc9a))
|
||||||
|
- **layer:** pointLayer add text model ([20ad754](https://github.com/antvis/L7/commit/20ad7540974fdf0a6e902e2ea3700dcd5cf28d1d))
|
||||||
|
- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
|
||||||
|
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||||
|
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||||
|
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||||
|
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||||
|
|
||||||
|
# [2.0.0-beta.26](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.26) (2019-12-30)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **package:** fix package fsevents version ([f1ff9d7](https://github.com/antvis/L7/commit/f1ff9d7afeecadf42409f133a165a5d570046841))
|
||||||
|
- **package:** fix package fsevents version ([1b856b2](https://github.com/antvis/L7/commit/1b856b2279d13d7837fe41eae363db1d706a5357))
|
||||||
|
- animate time ([d2b8041](https://github.com/antvis/L7/commit/d2b8041ebe77753f5687383ce690950b745f748c))
|
||||||
|
- **doc:** add Scale example ([5e49ff2](https://github.com/antvis/L7/commit/5e49ff276d75980f12e7af61f712fbd1fa7f33f9))
|
||||||
|
- layer style storkeColor->stroke ([27f66a9](https://github.com/antvis/L7/commit/27f66a9918a3568f7f591af161953ac498d2dcba))
|
||||||
|
- layer style storkeColor->stroke ([ac8477b](https://github.com/antvis/L7/commit/ac8477bb44e861df2f5d0a0a2b06bd5795054c3b))
|
||||||
|
- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
|
||||||
|
- remove error yarn.lock ([a1a3eff](https://github.com/antvis/L7/commit/a1a3eff2eb3599761105de92987873ec475b0514))
|
||||||
|
- remove error yarn.lock ([64c7c65](https://github.com/antvis/L7/commit/64c7c650453f73b8d96e8510be58f5dada86900e))
|
||||||
|
- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
|
||||||
|
- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
|
||||||
|
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||||
|
- 高德地图底图模式,事件交互注册顺序的问题导致不生效 ([2ad4289](https://github.com/antvis/L7/commit/2ad4289e75519f956a9cb1b44a7231b1151c88fb))
|
||||||
|
- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
|
||||||
|
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||||
|
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||||
|
- **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
|
||||||
|
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||||
|
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||||
|
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||||
|
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- point text add overlap ([98869d8](https://github.com/antvis/L7/commit/98869d876b0e98dd9258c97b9be9f5a69c0a1612))
|
||||||
|
- polygon 支持 text ([f5a1546](https://github.com/antvis/L7/commit/f5a15465e230e6f58c92bec5f12b132bc9a9ae91))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
|
||||||
|
- **layer:** add citybuildinglayer & add line add animate ([d657286](https://github.com/antvis/L7/commit/d657286d58c795ba968ae930eb382ca422bdbd08))
|
||||||
|
- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
|
||||||
|
- **layer:** pointLayer add text model ([84a9193](https://github.com/antvis/L7/commit/84a9193e3a8a311bb52bbedabc8847eabba7dc9a))
|
||||||
|
- **layer:** pointLayer add text model ([20ad754](https://github.com/antvis/L7/commit/20ad7540974fdf0a6e902e2ea3700dcd5cf28d1d))
|
||||||
|
- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
|
||||||
|
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||||
|
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||||
|
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||||
|
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||||
|
|
||||||
|
# [2.0.0-beta.25](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.25) (2019-12-27)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **doc:** add Scale example ([5e49ff2](https://github.com/antvis/L7/commit/5e49ff276d75980f12e7af61f712fbd1fa7f33f9))
|
||||||
|
- 高德地图底图模式,事件交互注册顺序的问题导致不生效 ([2ad4289](https://github.com/antvis/L7/commit/2ad4289e75519f956a9cb1b44a7231b1151c88fb))
|
||||||
|
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||||
|
- layer style storkeColor->stroke ([27f66a9](https://github.com/antvis/L7/commit/27f66a9918a3568f7f591af161953ac498d2dcba))
|
||||||
|
- layer style storkeColor->stroke ([ac8477b](https://github.com/antvis/L7/commit/ac8477bb44e861df2f5d0a0a2b06bd5795054c3b))
|
||||||
|
- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
|
||||||
|
- remove error yarn.lock ([a1a3eff](https://github.com/antvis/L7/commit/a1a3eff2eb3599761105de92987873ec475b0514))
|
||||||
|
- remove error yarn.lock ([64c7c65](https://github.com/antvis/L7/commit/64c7c650453f73b8d96e8510be58f5dada86900e))
|
||||||
|
- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
|
||||||
|
- **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
|
||||||
|
- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
|
||||||
|
- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
|
||||||
|
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||||
|
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||||
|
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||||
|
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||||
|
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||||
|
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
|
||||||
|
- **layer:** add citybuildinglayer & add line add animate ([d657286](https://github.com/antvis/L7/commit/d657286d58c795ba968ae930eb382ca422bdbd08))
|
||||||
|
- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
|
||||||
|
- **layer:** pointLayer add text model ([84a9193](https://github.com/antvis/L7/commit/84a9193e3a8a311bb52bbedabc8847eabba7dc9a))
|
||||||
|
- **layer:** pointLayer add text model ([20ad754](https://github.com/antvis/L7/commit/20ad7540974fdf0a6e902e2ea3700dcd5cf28d1d))
|
||||||
|
- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
|
||||||
|
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||||
|
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||||
|
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||||
|
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||||
|
|
||||||
|
# [2.0.0-beta.24](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.24) (2019-12-23)### Bug Fixes
|
||||||
|
|
||||||
|
- remove error yarn.lock ([a1a3eff](https://github.com/antvis/L7/commit/a1a3eff2eb3599761105de92987873ec475b0514))
|
||||||
|
- remove error yarn.lock ([64c7c65](https://github.com/antvis/L7/commit/64c7c650453f73b8d96e8510be58f5dada86900e))
|
||||||
|
- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
|
||||||
|
- **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
|
||||||
|
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||||
|
- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
|
||||||
|
- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
|
||||||
|
- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
|
||||||
|
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||||
|
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||||
|
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||||
|
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||||
|
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||||
|
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
|
||||||
|
- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
|
||||||
|
- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
|
||||||
|
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||||
|
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||||
|
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||||
|
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||||
|
|
||||||
|
# [2.0.0-beta.23](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.23) (2019-12-23)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- remove error yarn.lock ([a1a3eff](https://github.com/antvis/L7/commit/a1a3eff2eb3599761105de92987873ec475b0514))
|
||||||
|
- remove error yarn.lock ([64c7c65](https://github.com/antvis/L7/commit/64c7c650453f73b8d96e8510be58f5dada86900e))
|
||||||
|
- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
|
||||||
|
- **layer:** fix default model config ([2301419](https://github.com/antvis/L7/commit/2301419aadf00a887fc22728b9797e6c1149bead))
|
||||||
|
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||||
|
- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
|
||||||
|
- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
|
||||||
|
- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
|
||||||
|
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||||
|
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||||
|
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||||
|
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||||
|
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||||
|
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
|
||||||
|
- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
|
||||||
|
- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
|
||||||
|
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||||
|
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||||
|
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||||
|
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||||
|
|
||||||
|
# [2.0.0-beta.21](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.21) (2019-12-18)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- **doc:** remove duplicated method ([9e1dfaa](https://github.com/antvis/L7/commit/9e1dfaa9dbdec761f92447874ae7a19bab968cdf))
|
||||||
|
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||||
|
- mapbox token 校验问题 ([6c1f934](https://github.com/antvis/L7/commit/6c1f93425676c5baad90e464b3915068ba4157e2))
|
||||||
|
- render 将 gl 模块移动到开发分支, update tslint rule ([fe8b480](https://github.com/antvis/L7/commit/fe8b480895a3d6d919e63f93306a203f5582e5d6))
|
||||||
|
- source 聚合方法接口定义问题 ([27bdd02](https://github.com/antvis/L7/commit/27bdd02e76f3374b3e1568553ca20455ee7c1511))
|
||||||
|
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||||
|
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||||
|
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||||
|
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||||
|
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||||
|
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([e0ab4cd](https://github.com/antvis/L7/commit/e0ab4cd386f53ba4e93aaebfb1fa05b6e438710e))
|
||||||
|
- **layer:** add blend 效果配置支持 normal,additive ([07da3f7](https://github.com/antvis/L7/commit/07da3f7d1cc6a81b115312be266cff1afb64ecdb))
|
||||||
|
- **layer:** add setSelect setActive 方法 & refactor color util ([5c27d66](https://github.com/antvis/L7/commit/5c27d66a6401192f5e0406a2f4c3e0983dc2867c))
|
||||||
|
- scene 实例化支持传入地图实例 & 更新文档 ([cb1d4b6](https://github.com/antvis/L7/commit/cb1d4b6c7d0e65a5e15138ae01adb56cd1b6ee43))
|
||||||
|
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||||
|
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||||
|
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||||
|
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||||
|
|
||||||
|
# [2.0.0-beta.20](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.20) (2019-12-12)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- 修复 webgl 扩展兼容问题 ([cd6f5fc](https://github.com/antvis/L7/commit/cd6f5fc7d202f7db1424f3c8b263a99d39d7c778))
|
||||||
|
- **gatsby:** gastsby node ([1d96603](https://github.com/antvis/L7/commit/1d966035c4a3bdc34927eb1db16a72ead78ab2dc))
|
||||||
|
- **gatsby:** gastsby node ([1c2d35f](https://github.com/antvis/L7/commit/1c2d35facb2fe60bbde4985bc6a0ddb5a21e3f04))
|
||||||
|
- **lint:** igonre lint test data lint ([1782893](https://github.com/antvis/L7/commit/178289348a26586b1ccbc8f75baa3b7312693a8c))
|
||||||
|
- **parser:** fix multipolygom parser ([2ad8c9f](https://github.com/antvis/L7/commit/2ad8c9f0a858f1eb1015a20b267d66c4478caf2d))
|
||||||
|
- **scene:** contianer resize ([1c3be82](https://github.com/antvis/L7/commit/1c3be82711999b70a802a7f0c24ff9ccf76e2d94))
|
||||||
|
- **tslint:** igonre lint test data lint ([c1cf91e](https://github.com/antvis/L7/commit/c1cf91e346f8130acb93e2bead29fcf1d0b03233))
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
- **source:** add join transfroms ([ec3cae2](https://github.com/antvis/L7/commit/ec3cae2f5fd0491a895cf4ba3953da94b5af2c84))
|
||||||
|
- **source:** add join transfroms ([6da2528](https://github.com/antvis/L7/commit/6da252879c03980dc61a4a5efd61a00986797d61))
|
||||||
|
- **source:** wip cluster ([3203959](https://github.com/antvis/L7/commit/320395942499b4123de2155d20ff6cecec6100b9))
|
||||||
|
- **source render:** source transfrom, layer event ([27a09a7](https://github.com/antvis/L7/commit/27a09a7a7a79b50598af22a0de18b062d60afcac))
|
||||||
|
|
||||||
# [2.0.0-beta.19](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.19) (2019-12-08)
|
# [2.0.0-beta.19](https://github.com/antvis/L7/compare/v2.0.0-beta.16...v2.0.0-beta.19) (2019-12-08)
|
||||||
|
|
||||||
### Bug Fixes
|
### Bug Fixes
|
||||||
|
|
|
@ -6,13 +6,15 @@ Large-scale WebGL-powered Geospatial data visualization analysis framework.
|
||||||
|
|
||||||
[中文 README](./README.zh-CN.md)
|
[中文 README](./README.zh-CN.md)
|
||||||
|
|
||||||
|
[GitHub](https://github.com/antvis/L7)
|
||||||
|
|
||||||
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.
|
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 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 visualization demos
|
||||||
|
|
||||||
![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SGU-QIZsnyoAAAAAAAAAAABkARQnAQ)
|
![l7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ)
|
||||||
|
|
||||||
## 🌟 Highlight features of L7 2.0
|
## 🌟 Highlight features of L7 2.0
|
||||||
|
|
||||||
|
@ -38,7 +40,7 @@ L7 focuses on geographic data expressiveness,interaction and design of geograp
|
||||||
### 📦 Installation
|
### 📦 Installation
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install @antv/l7@beta
|
npm install @antv/l7
|
||||||
```
|
```
|
||||||
|
|
||||||
### Init Map by L7 scene
|
### Init Map by L7 scene
|
||||||
|
|
|
@ -2,11 +2,19 @@
|
||||||
|
|
||||||
[![travis ci](https://travis-ci.com/antvis/L7.svg?branch=master)](https://travis-ci.com/antvis/L7) [![](https://flat.badgen.net/npm/v/@antv/l7?icon=npm)](https://www.npmjs.com/package/@antv/l7) ![最近提交](https://badgen.net/github/last-commit/antvis/L7)
|
[![travis ci](https://travis-ci.com/antvis/L7.svg?branch=master)](https://travis-ci.com/antvis/L7) [![](https://flat.badgen.net/npm/v/@antv/l7?icon=npm)](https://www.npmjs.com/package/@antv/l7) ![最近提交](https://badgen.net/github/last-commit/antvis/L7)
|
||||||
|
|
||||||
|
[README](./README.md)
|
||||||
|
|
||||||
|
[GitHub](https://github.com/antvis/L7)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/antvis/L7 --depth=1
|
||||||
|
```
|
||||||
|
|
||||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location,7 代表世界七大洲,寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达,通过颜色、大小、纹理,方向,体积等视觉变量设置实现从数据到信息清晰,有效的表达。
|
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location,7 代表世界七大洲,寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达,通过颜色、大小、纹理,方向,体积等视觉变量设置实现从数据到信息清晰,有效的表达。
|
||||||
|
|
||||||
L7 能够满足常见的地图图表,BI 系统的可视化分析、以及 GIS,交通,电力,国土,农业,城市等领域的空间信息管理,分析等应用系统开发需求。
|
L7 能够满足常见的地图图表,BI 系统的可视化分析、以及 GIS,交通,电力,国土,农业,城市等领域的空间信息管理,分析等应用系统开发需求。
|
||||||
|
|
||||||
![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JS8vTY5aeCcAAAAAAAAAAABkARQnAQ)
|
![l7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*S-73QpO8d0YAAAAAAAAAAABkARQnAQ)
|
||||||
|
|
||||||
## 🌟 核心特性
|
## 🌟 核心特性
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
// @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
|
// @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
|
||||||
module.exports = api => {
|
module.exports = api => {
|
||||||
api.cache(() => process.env.NODE_ENV);
|
api.cache(() => process.env.NODE_ENV);
|
||||||
|
|
||||||
const isSite = api.env('site');
|
const isSite = api.env('site');
|
||||||
const isCDNBundle = api.env('bundle');
|
const isCDNBundle = api.env('bundle');
|
||||||
const isCommonJS = api.env('cjs');
|
const isCommonJS = api.env('cjs');
|
||||||
|
@ -16,6 +15,7 @@ module.exports = api => {
|
||||||
plugins: [
|
plugins: [
|
||||||
'@babel/plugin-proposal-optional-chaining',
|
'@babel/plugin-proposal-optional-chaining',
|
||||||
'@babel/plugin-proposal-nullish-coalescing-operator',
|
'@babel/plugin-proposal-nullish-coalescing-operator',
|
||||||
|
'transform-inline-environment-variables',
|
||||||
[
|
[
|
||||||
'@babel/plugin-proposal-decorators',
|
'@babel/plugin-proposal-decorators',
|
||||||
{
|
{
|
||||||
|
@ -42,10 +42,17 @@ module.exports = api => {
|
||||||
[
|
[
|
||||||
'@babel/env',
|
'@babel/env',
|
||||||
{
|
{
|
||||||
|
// https://babeljs.io/docs/en/babel-preset-env#usebuiltins
|
||||||
|
// useBuiltIns: 'usage',
|
||||||
|
...isCDNBundle ? { corejs: '3.0.0' } : {},
|
||||||
useBuiltIns: isCDNBundle ? 'usage' : false,
|
useBuiltIns: isCDNBundle ? 'usage' : false,
|
||||||
// set `modules: false` when building CDN bundle, let rollup do commonjs works
|
// set `modules: false` when building CDN bundle, let rollup do commonjs works
|
||||||
// @see https://github.com/rollup/rollup-plugin-babel#modules
|
// @see https://github.com/rollup/rollup-plugin-babel#modules
|
||||||
modules: (isCDNBundle || isESModule) ? false : 'auto'
|
modules: (isCDNBundle || isESModule) ? false : 'auto',
|
||||||
|
targets: {
|
||||||
|
chrome: 58,
|
||||||
|
browsers: [ 'ie >= 11' ]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
|
@ -54,12 +61,16 @@ module.exports = api => {
|
||||||
development: isCommonJS
|
development: isCommonJS
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'@babel/preset-typescript',
|
'@babel/preset-typescript'
|
||||||
],
|
],
|
||||||
plugins: [
|
plugins: [
|
||||||
|
isCDNBundle ? {} : '@babel/plugin-transform-runtime',
|
||||||
'@babel/plugin-proposal-object-rest-spread',
|
'@babel/plugin-proposal-object-rest-spread',
|
||||||
'@babel/plugin-proposal-optional-chaining',
|
'@babel/plugin-proposal-optional-chaining',
|
||||||
'@babel/plugin-proposal-nullish-coalescing-operator',
|
'@babel/plugin-proposal-nullish-coalescing-operator',
|
||||||
|
'@babel/plugin-syntax-async-generators',
|
||||||
|
// '@babel/plugin-transform-parameters',
|
||||||
|
'transform-node-env-inline',
|
||||||
[
|
[
|
||||||
'@babel/plugin-proposal-decorators',
|
'@babel/plugin-proposal-decorators',
|
||||||
{
|
{
|
||||||
|
@ -105,6 +116,7 @@ module.exports = api => {
|
||||||
// isCDNBundle ? 'inline-webgl-constants' : {},
|
// isCDNBundle ? 'inline-webgl-constants' : {},
|
||||||
],
|
],
|
||||||
ignore: [
|
ignore: [
|
||||||
|
// /node_modules\/(?![kdbush|supercluster|async])/,
|
||||||
'node_modules',
|
'node_modules',
|
||||||
...!isTest ? [
|
...!isTest ? [
|
||||||
'**/*.test.tsx',
|
'**/*.test.tsx',
|
||||||
|
|
|
@ -1,2 +1,10 @@
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
export * from '@antv/l7';
|
export * from '@antv/l7';
|
||||||
|
// import * as L7 from '@antv/l7';
|
||||||
|
// export default L7;
|
||||||
|
|
||||||
|
// import { Scene } from '@antv/l7';
|
||||||
|
// // export { Scene };
|
||||||
|
// export default {
|
||||||
|
// Scene,
|
||||||
|
// };
|
||||||
|
|
|
@ -1,15 +1,22 @@
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import alias from '@rollup/plugin-alias';
|
import alias from '@rollup/plugin-alias';
|
||||||
import json from '@rollup/plugin-json';
|
import json from '@rollup/plugin-json';
|
||||||
import resolve from 'rollup-plugin-node-resolve';
|
import resolve from '@rollup/plugin-node-resolve';
|
||||||
import commonjs from 'rollup-plugin-commonjs';
|
import commonjs from '@rollup/plugin-commonjs';
|
||||||
import { terser } from 'rollup-plugin-terser';
|
import { terser } from 'rollup-plugin-terser';
|
||||||
import analyze from 'rollup-plugin-analyzer';
|
import analyze from 'rollup-plugin-analyzer';
|
||||||
import babel from 'rollup-plugin-babel';
|
import babel from 'rollup-plugin-babel';
|
||||||
import glsl from './rollup-plugin-glsl';
|
import glsl from './rollup-plugin-glsl';
|
||||||
import postcss from 'rollup-plugin-postcss';
|
import postcss from 'rollup-plugin-postcss';
|
||||||
import url from 'postcss-url';
|
import url from 'postcss-url';
|
||||||
|
const { BUILD, MINIFY } = process.env;
|
||||||
|
const minified = MINIFY === 'true';
|
||||||
|
const production = BUILD === 'production';
|
||||||
|
const outputFile = !production
|
||||||
|
? 'packages/l7/dist/l7-dev.js'
|
||||||
|
: minified
|
||||||
|
? 'packages/l7/dist/l7.js'
|
||||||
|
: 'packages/l7/dist/l7-dev.js';
|
||||||
function resolveFile(filePath) {
|
function resolveFile(filePath) {
|
||||||
return path.join(__dirname, '..', filePath);
|
return path.join(__dirname, '..', filePath);
|
||||||
}
|
}
|
||||||
|
@ -18,7 +25,7 @@ module.exports = [
|
||||||
{
|
{
|
||||||
input: resolveFile('build/bundle.ts'),
|
input: resolveFile('build/bundle.ts'),
|
||||||
output: {
|
output: {
|
||||||
file: resolveFile('packages/l7/dist/l7.js'),
|
file: resolveFile(outputFile),
|
||||||
format: 'umd',
|
format: 'umd',
|
||||||
name: 'L7',
|
name: 'L7',
|
||||||
globals: {
|
globals: {
|
||||||
|
@ -28,7 +35,7 @@ module.exports = [
|
||||||
external: [
|
external: [
|
||||||
'mapbox-gl'
|
'mapbox-gl'
|
||||||
],
|
],
|
||||||
treeshake: true,
|
treeshake: minified,
|
||||||
plugins: [
|
plugins: [
|
||||||
alias(
|
alias(
|
||||||
{
|
{
|
||||||
|
@ -41,7 +48,7 @@ module.exports = [
|
||||||
{
|
{
|
||||||
find: /^@antv\/l7$/,
|
find: /^@antv\/l7$/,
|
||||||
replacement: resolveFile('packages/l7/src'),
|
replacement: resolveFile('packages/l7/src'),
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
),
|
),
|
||||||
|
@ -73,14 +80,16 @@ module.exports = [
|
||||||
'isFunction',
|
'isFunction',
|
||||||
'cloneDeep',
|
'cloneDeep',
|
||||||
'isString',
|
'isString',
|
||||||
'isNumber'
|
'isNumber',
|
||||||
|
'merge'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
babel({
|
babel({
|
||||||
extensions: [ '.js', '.ts' ]
|
extensions: [ '.js', '.ts' ]
|
||||||
}),
|
}),
|
||||||
terser(),
|
// terser(),
|
||||||
|
minified ? terser() : false,
|
||||||
analyze({
|
analyze({
|
||||||
summaryOnly: true,
|
summaryOnly: true,
|
||||||
limit: 20
|
limit: 20
|
||||||
|
|
|
@ -0,0 +1,110 @@
|
||||||
|
/* eslint-disable no-eval */
|
||||||
|
import { Scene, LineLayer, PointLayer } from '@antv/l7';
|
||||||
|
import { Mapbox } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new Mapbox({
|
||||||
|
pitch: 40,
|
||||||
|
style: 'dark',
|
||||||
|
center: [ 3.438, 40.16797 ],
|
||||||
|
zoom: 0.51329
|
||||||
|
})
|
||||||
|
});
|
||||||
|
Promise.all(
|
||||||
|
[ fetch('https://gw.alipayobjects.com/os/basement_prod/9acd4831-5655-41a5-b0a0-831603e0092d.json').then(function(d) {
|
||||||
|
return d.text();
|
||||||
|
}).then(JSON.parse), fetch('https://gw.alipayobjects.com/os/basement_prod/dbe4e40b-3fbf-4a20-b36b-7a8bd3b8aef2.csv').then(function(d) {
|
||||||
|
return d.text();
|
||||||
|
}), fetch('https://gw.alipayobjects.com/os/basement_prod/89d20ef7-77df-44ca-a238-6e3679ab3ae4.csv').then(function(d) {
|
||||||
|
return d.text();
|
||||||
|
}) ]).then(function onLoad([ coordinates, trips, stations ]) {
|
||||||
|
const stationArray = parseCSV(stations);
|
||||||
|
const stationObj = {};
|
||||||
|
stationArray.forEach(function(st) {
|
||||||
|
stationObj[st.station_id] = {
|
||||||
|
x: st.longitude * 1,
|
||||||
|
y: st.latitude * 1
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const tripsArray = parseCSV(trips);
|
||||||
|
const triplines = [];
|
||||||
|
tripsArray.forEach(function(trip) {
|
||||||
|
if (stationObj[trip.start_station] && stationObj[trip.end_station]) {
|
||||||
|
const line = {
|
||||||
|
x: stationObj[trip.start_station].x,
|
||||||
|
y: stationObj[trip.start_station].y,
|
||||||
|
x1: stationObj[trip.end_station].x,
|
||||||
|
y1: stationObj[trip.end_station].y,
|
||||||
|
duration: trip.duration
|
||||||
|
};
|
||||||
|
triplines.push(line);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const roadlayer = new LineLayer().source(coordinates).shape('line')
|
||||||
|
.size(0.6)
|
||||||
|
.color('#eee')
|
||||||
|
.active(true)
|
||||||
|
.style({
|
||||||
|
opacity: 0.9
|
||||||
|
});
|
||||||
|
const stationLayer = new PointLayer().source(stations, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'longitude',
|
||||||
|
y: 'latitude'
|
||||||
|
}
|
||||||
|
}).shape('circle')
|
||||||
|
.active(true)
|
||||||
|
.size(40)
|
||||||
|
.color('#fec44f')
|
||||||
|
.animate(true)
|
||||||
|
.style({
|
||||||
|
opacity: 1.0
|
||||||
|
})
|
||||||
|
.render();
|
||||||
|
|
||||||
|
const arclayer = new LineLayer().source(triplines.slice(0, 1000), {
|
||||||
|
parser: {
|
||||||
|
type: 'json',
|
||||||
|
x: 'x',
|
||||||
|
y: 'y',
|
||||||
|
x1: 'x1',
|
||||||
|
y1: 'y1'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.color('#ff6b34')
|
||||||
|
.shape('arc3d')
|
||||||
|
.size(1)
|
||||||
|
.style({
|
||||||
|
opacity: 1.0
|
||||||
|
})
|
||||||
|
.animate({
|
||||||
|
interval: 0.5,
|
||||||
|
trailLength: 0.5,
|
||||||
|
duration: 1
|
||||||
|
});
|
||||||
|
arclayer.fitBounds();
|
||||||
|
scene.addLayer(roadlayer);
|
||||||
|
scene.addLayer(stationLayer);
|
||||||
|
scene.addLayer(arclayer);
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
function parseCSV(data) {
|
||||||
|
const lines = data.split('\n');
|
||||||
|
const header = lines[0];
|
||||||
|
const columns = header.split(',');
|
||||||
|
return lines.slice(1).filter(function(l) {
|
||||||
|
return l;
|
||||||
|
}).map(function(line) {
|
||||||
|
const obj = {};
|
||||||
|
line.split(',').forEach(function(value, i) {
|
||||||
|
const name = columns[i];
|
||||||
|
obj[name] = value;
|
||||||
|
});
|
||||||
|
return obj;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
@ -5,8 +5,8 @@ const scene = new Scene({
|
||||||
pitch: 0,
|
pitch: 0,
|
||||||
type: 'amap',
|
type: 'amap',
|
||||||
style: 'light',
|
style: 'light',
|
||||||
center: [121.2680, 30.3628],
|
center: [ 121.2680, 30.3628 ],
|
||||||
zoom: 13,
|
zoom: 13
|
||||||
});
|
});
|
||||||
|
|
||||||
const layer = new ImageLayer({});
|
const layer = new ImageLayer({});
|
||||||
|
@ -15,11 +15,11 @@ layer.source(
|
||||||
{
|
{
|
||||||
parser: {
|
parser: {
|
||||||
type: 'image',
|
type: 'image',
|
||||||
extent: [121.168, 30.2828, 121.384, 30.4219],
|
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
);
|
);
|
||||||
scene.on('loaded',()=>{
|
scene.on('loaded', () => {
|
||||||
scene.addLayer(layer);
|
scene.addLayer(layer);
|
||||||
})
|
});
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,56 @@
|
||||||
|
import { AMapScene, LineLayer } from '@antv/l7-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export default React.memo(function Map() {
|
||||||
|
const [ data, setData ] = React.useState();
|
||||||
|
React.useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
const response = await fetch(
|
||||||
|
'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json'
|
||||||
|
);
|
||||||
|
const raw = await response.json();
|
||||||
|
setData(raw);
|
||||||
|
};
|
||||||
|
fetchData();
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<AMapScene
|
||||||
|
map={{
|
||||||
|
center: [ 110.19382669582967, 50.258134 ],
|
||||||
|
pitch: 0,
|
||||||
|
style: 'dark',
|
||||||
|
zoom: 1
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<LineLayer
|
||||||
|
key={'2'}
|
||||||
|
source={{
|
||||||
|
data
|
||||||
|
}}
|
||||||
|
size={{
|
||||||
|
values: 1
|
||||||
|
}}
|
||||||
|
color={{
|
||||||
|
values: '#fff'
|
||||||
|
}}
|
||||||
|
shape={{
|
||||||
|
values: 'line'
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
opacity: 1
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</AMapScene>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"title": {
|
||||||
|
"zh": "Scene 组件",
|
||||||
|
"en": "Scene Component"
|
||||||
|
},
|
||||||
|
"demos": [
|
||||||
|
|
||||||
|
{
|
||||||
|
"filename": "amap.jsx",
|
||||||
|
"title": "高德地图",
|
||||||
|
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: React Map
|
||||||
|
order: 0
|
||||||
|
---
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: React 地图
|
||||||
|
order: 0
|
||||||
|
---
|
|
@ -33,6 +33,5 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||||
].reverse(),
|
].reverse(),
|
||||||
)
|
)
|
||||||
scene.addLayer(layer);
|
scene.addLayer(layer);
|
||||||
console.log(layer);
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
Before Width: | Height: | Size: 152 KiB After Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 721 KiB After Width: | Height: | Size: 535 KiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.0 MiB |
Before Width: | Height: | Size: 258 KiB After Width: | Height: | Size: 164 KiB |
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 953 KiB |
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 895 KiB After Width: | Height: | Size: 547 KiB |
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 790 KiB After Width: | Height: | Size: 672 KiB |
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 974 KiB After Width: | Height: | Size: 728 KiB |
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 1.8 MiB |
Before Width: | Height: | Size: 192 KiB After Width: | Height: | Size: 60 KiB |
Before Width: | Height: | Size: 847 KiB After Width: | Height: | Size: 509 KiB |
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 126 KiB |
Before Width: | Height: | Size: 144 KiB After Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 206 KiB After Width: | Height: | Size: 159 KiB |
|
@ -0,0 +1,74 @@
|
||||||
|
---
|
||||||
|
title: ChangeLog
|
||||||
|
order: 10
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2020.03.12 2.1 正式版
|
||||||
|
|
||||||
|
###✨ Features
|
||||||
|
|
||||||
|
- 新增 l7-react 版本
|
||||||
|
- 可自定义样式的聚合图 MakerLayer
|
||||||
|
- 新增 quantile、quantize 度量
|
||||||
|
- 地图导出功能
|
||||||
|
|
||||||
|
### 🍏 Improvements
|
||||||
|
|
||||||
|
- IE 11 支持
|
||||||
|
- 更新拾取机制,拾取更高效
|
||||||
|
- 优化依赖包减少包体积
|
||||||
|
|
||||||
|
### 🐞 Bug Fixes
|
||||||
|
|
||||||
|
- setData 更新机制
|
||||||
|
- color,size,shape 更新重绘问题
|
||||||
|
|
||||||
|
## 2020.01.06 2.0 正式版
|
||||||
|
|
||||||
|
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
|
||||||
|
|
||||||
|
###✨ Features
|
||||||
|
|
||||||
|
• 新增弧线图,路径图动画功能
|
||||||
|
|
||||||
|
• 新增气泡图水波动画功能
|
||||||
|
|
||||||
|
• 新增聚合地图
|
||||||
|
|
||||||
|
• 新增文本标注,支持避让
|
||||||
|
|
||||||
|
• 新增城市建筑图层
|
||||||
|
|
||||||
|
• 新增栅格地图,支持卫星遥感数据可视化
|
||||||
|
|
||||||
|
• 新增图层交互事件
|
||||||
|
|
||||||
|
### 🍏 Improvements
|
||||||
|
|
||||||
|
• Marker 支持事件和自定义数据
|
||||||
|
|
||||||
|
• 弧线支持虚线样式
|
||||||
|
|
||||||
|
• 面图层支持,文本标注,气泡图效果
|
||||||
|
|
||||||
|
• 重构了文档结构
|
||||||
|
|
||||||
|
• source 支持 map,join,filter 数据处理支持
|
||||||
|
|
||||||
|
• source 支持数据更新
|
||||||
|
|
||||||
|
• 支持 blend 效果配置
|
||||||
|
|
||||||
|
• 支持通过地图实例初始化地图
|
||||||
|
|
||||||
|
• 官网新增所有图表概览页面
|
||||||
|
|
||||||
|
### 🐞 Bug Fixes
|
||||||
|
|
||||||
|
• 修复容器 resize 不能正常响应
|
||||||
|
|
||||||
|
• 修复 babel 打包问题
|
||||||
|
|
||||||
|
• 修复地图组件加载报错问题
|
||||||
|
|
||||||
|
• 修复样式配置 strokeColor- stroke
|
|
@ -0,0 +1,74 @@
|
||||||
|
---
|
||||||
|
title: 发布日志
|
||||||
|
order: 10
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2020.03.12 2.1 正式版
|
||||||
|
|
||||||
|
###✨ Features
|
||||||
|
|
||||||
|
- 新增 l7-react 版本
|
||||||
|
- 可自定义样式的聚合图 MakerLayer
|
||||||
|
- 新增 quantile、quantize 度量
|
||||||
|
- 地图导出功能
|
||||||
|
|
||||||
|
### 🍏 Improvements
|
||||||
|
|
||||||
|
- IE 11 支持
|
||||||
|
- 更新拾取机制,拾取更高效
|
||||||
|
- 优化依赖包减少包体积
|
||||||
|
|
||||||
|
### 🐞 Bug Fixes
|
||||||
|
|
||||||
|
- setData 更新机制
|
||||||
|
- color,size,shape 更新重绘问题
|
||||||
|
|
||||||
|
## 2020.01.06 2.0 正式版
|
||||||
|
|
||||||
|
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
|
||||||
|
|
||||||
|
###✨ Features
|
||||||
|
|
||||||
|
• 新增弧线图,路径图动画功能
|
||||||
|
|
||||||
|
• 新增气泡图水波动画功能
|
||||||
|
|
||||||
|
• 新增聚合地图
|
||||||
|
|
||||||
|
• 新增文本标注,支持避让
|
||||||
|
|
||||||
|
• 新增城市建筑图层
|
||||||
|
|
||||||
|
• 新增栅格地图,支持卫星遥感数据可视化
|
||||||
|
|
||||||
|
• 新增图层交互事件
|
||||||
|
|
||||||
|
### 🍏 Improvements
|
||||||
|
|
||||||
|
• Marker 支持事件和自定义数据
|
||||||
|
|
||||||
|
• 弧线支持虚线样式
|
||||||
|
|
||||||
|
• 面图层支持,文本标注,气泡图效果
|
||||||
|
|
||||||
|
• 重构了文档结构
|
||||||
|
|
||||||
|
• source 支持 map,join,filter 数据处理支持
|
||||||
|
|
||||||
|
• source 支持数据更新
|
||||||
|
|
||||||
|
• 支持 blend 效果配置
|
||||||
|
|
||||||
|
• 支持通过地图实例初始化地图
|
||||||
|
|
||||||
|
• 官网新增所有图表概览页面
|
||||||
|
|
||||||
|
### 🐞 Bug Fixes
|
||||||
|
|
||||||
|
• 修复容器 resize 不能正常响应
|
||||||
|
|
||||||
|
• 修复 babel 打包问题
|
||||||
|
|
||||||
|
• 修复地图组件加载报错问题
|
||||||
|
|
||||||
|
• 修复样式配置 strokeColor- stroke
|
|
@ -1,96 +1,74 @@
|
||||||
---
|
---
|
||||||
title: Control
|
title: Control
|
||||||
order: 1
|
order: 3
|
||||||
---
|
---
|
||||||
|
|
||||||
# control
|
|
||||||
|
|
||||||
地图组件 用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例,比例尺
|
地图组件 用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例,比例尺
|
||||||
|
|
||||||
## 构造函数
|
L7 目前支持 Control
|
||||||
|
|
||||||
```javascript
|
- Zoom 放大缩小
|
||||||
const baseControl = new L7.Control.Base(option);
|
- Scale 比例尺
|
||||||
```
|
- Layers 图层列表
|
||||||
|
|
||||||
|
## 构造函数
|
||||||
|
|
||||||
#### option
|
#### option
|
||||||
|
|
||||||
position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
|
position: `string` 控件位置支持是个方位
|
||||||
|
|
||||||
#### scene 内置地图组件
|
- bottomright
|
||||||
|
- topright
|
||||||
|
- bottomleft,
|
||||||
|
- topleft`
|
||||||
|
|
||||||
zoom 地图放大缩小 默认添加<br />Scale 地图比例尺 默认添加<br />attribution 地图数据属性 默认添加<br />layer 图层列表
|
### 组件介绍
|
||||||
|
|
||||||
**scene 配置项设置控件添加状态**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
scene = new L7.scene({
|
|
||||||
zoomControl: true,
|
|
||||||
scaleControl: true,
|
|
||||||
attributionControl: true,
|
|
||||||
});
|
|
||||||
```
|
```
|
||||||
|
import { Scale, Layers, Zoom } from '@antv/l7';
|
||||||
|
|
||||||
####
|
```
|
||||||
|
|
||||||
#### Zoom
|
#### Zoom
|
||||||
|
|
||||||
放大缩小组件 默认 左上角
|
放大缩小组件 默认左上角
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
new L7.Control.Zoom({
|
const zoomControl = new Zoom({
|
||||||
position: 'topleft',
|
position: 'topleft',
|
||||||
}).addTo(scene);
|
});
|
||||||
|
|
||||||
|
scene.addControl(zoomControl);
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Scale
|
#### Scale
|
||||||
|
|
||||||
比例尺组件默认左下角
|
比例尺组件 默认左下角
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
new L7.Control.Scale({
|
const scaleControl = new Scale({
|
||||||
position: 'bottomleft',
|
position: 'bottomleft',
|
||||||
}).addTo(scene);
|
});
|
||||||
|
|
||||||
|
scene.addControl(scaleControl);
|
||||||
```
|
```
|
||||||
|
|
||||||
#### attribution
|
#### Layers
|
||||||
|
|
||||||
默认右下角
|
图层列表目前支持可视化的图层控制
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
new L7.Control.Attribution({
|
const overlayers = {
|
||||||
position: 'bottomleft',
|
点图层: layer,
|
||||||
}).addTo(scene);
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 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
|
#### setPosition
|
||||||
|
|
||||||
设置组件位置
|
设置组件位置
|
||||||
|
@ -106,34 +84,3 @@ control.setPosition('bottomright');
|
||||||
```javascript
|
```javascript
|
||||||
control.remove();
|
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
|
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
title: Control
|
title: Control 控件
|
||||||
order: 3
|
order: 3
|
||||||
---
|
---
|
||||||
|
|
||||||
地图组件 用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例,比例尺
|
地图组件用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例、比例尺
|
||||||
|
|
||||||
L7 目前支持 Control
|
L7 目前支持 Control
|
||||||
|
|
||||||
|
@ -25,13 +25,13 @@ position: `string` 控件位置支持是个方位
|
||||||
### 组件介绍
|
### 组件介绍
|
||||||
|
|
||||||
```
|
```
|
||||||
import { Scale Layers, Zoom } from '@antv/l7';
|
import { Scale, Layers, Zoom } from '@antv/l7';
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Zoom
|
#### Zoom
|
||||||
|
|
||||||
放大缩小组件 默认 左上角
|
放大缩小组件 默认左上角
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const zoomControl = new Zoom({
|
const zoomControl = new Zoom({
|
||||||
|
@ -43,20 +43,36 @@ scene.addControl(zoomControl);
|
||||||
|
|
||||||
#### Scale
|
#### Scale
|
||||||
|
|
||||||
比例尺组件默认左下角
|
比例尺组件 默认左下角
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const zoomControl = new Zoom({
|
const scaleControl = new Scale({
|
||||||
position: 'topleft',
|
position: 'bottomleft',
|
||||||
});
|
});
|
||||||
|
|
||||||
scene.addControl(zoomControl);
|
scene.addControl(scaleControl);
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Layers
|
#### Layers
|
||||||
|
|
||||||
图层列表目前支持可视化的图层控制
|
图层列表目前支持可视化的图层控制
|
||||||
|
|
||||||
|
配置项
|
||||||
|
|
||||||
|
option 控件配置项
|
||||||
|
overlayers 将一组图层添加到图层列表,
|
||||||
|
overlayers Object
|
||||||
|
key: 列表显示的图层名字可以自定义
|
||||||
|
layer: 图层对象
|
||||||
|
overlayers 示例
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const layer = {
|
||||||
|
图层一: layer1,
|
||||||
|
图层二: layer2,
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const overlayers = {
|
const overlayers = {
|
||||||
点图层: layer,
|
点图层: layer,
|
||||||
|
|
|
@ -16,7 +16,7 @@ Marker
|
||||||
- color `string` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认 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
|
- element `Dom|string` 自定义 marker Dom 节点,可以是 dom 实例,也可以是 dom id
|
||||||
- anchor `string` 锚点位置 支持 center, top, top-left, top-right, bottom, bottom-left,bottom- right,left, right
|
- anchor `string` 锚点位置 支持 center, top, top-left, top-right, bottom, bottom-left,bottom- right,left, right
|
||||||
- offset `Array` 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
|
- offsets `Array` 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
|
||||||
|
|
||||||
### 添加到 Scene
|
### 添加到 Scene
|
||||||
|
|
||||||
|
@ -30,10 +30,6 @@ scene.addMarker(marker);
|
||||||
|
|
||||||
设置 marker 经纬度位置
|
设置 marker 经纬度位置
|
||||||
|
|
||||||
#### addTo
|
|
||||||
|
|
||||||
将 marker 添加到地图 Scene
|
|
||||||
|
|
||||||
#### remove
|
#### remove
|
||||||
|
|
||||||
移除 marker
|
移除 marker
|
||||||
|
@ -62,20 +58,18 @@ scene.addMarker(marker);
|
||||||
|
|
||||||
#### 默认 Marker
|
#### 默认 Marker
|
||||||
|
|
||||||
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
|
`const marker = new L7.Marker({color:'blue'})`
|
||||||
|
|
||||||
#### 自定义 Marker
|
#### 自定义 Marker
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var el = document.createElement('label');
|
var el = document.createElement('label');
|
||||||
el.className = 'lableclass';
|
el.className = 'labelclass';
|
||||||
el.textContent = data[i].v;
|
el.textContent = data[i].v;
|
||||||
el.style.background = getColor(data[i].v);
|
el.style.background = getColor(data[i].v);
|
||||||
new L7.Marker({
|
new L7.Marker({
|
||||||
element: el,
|
element: el,
|
||||||
})
|
}).setLnglat([data[i].x * 1, data[i].y]);
|
||||||
.setLnglat([data[i].x * 1, data[i].y])
|
|
||||||
.addTo(scene);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 设置 popup
|
#### 设置 popup
|
||||||
|
|
|
@ -1,20 +1,30 @@
|
||||||
---
|
---
|
||||||
title: Marker
|
title: Marker 标注
|
||||||
order: 3
|
order: 3
|
||||||
---
|
---
|
||||||
|
|
||||||
Marker 地图标注 目前只支持 2D dom 标注
|
Marker 地图标注 目前只支持 2D Dom 标注
|
||||||
|
|
||||||
## 构造函数
|
## 构造函数
|
||||||
|
|
||||||
Marker<br />`const Marker = new L7.Marker(option)`
|
Marker
|
||||||
|
|
||||||
|
`const Marker = new L7.Marker(option)`
|
||||||
|
|
||||||
#### 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`
|
||||||
|
![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ) 设置默认 marker 的颜色
|
||||||
- element `Dom|string` 自定义 marker Dom 节点,可以是 dom 实例,也可以是 dom id
|
- element `Dom|string` 自定义 marker Dom 节点,可以是 dom 实例,也可以是 dom id
|
||||||
- anchor `string` 锚点位置 支持 center, top, top-left, top-right, bottom, bottom-left,bottom- right,left, right
|
- anchor `string` 锚点位置 支持 center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right
|
||||||
- offset `Array` 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
|
- offsets `Array` 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
|
||||||
|
- extData 用户自定义属性,支持任意数据类型,存储 marker 属性信息
|
||||||
|
|
||||||
|
### 添加到 Scene
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.addMarker(marker);
|
||||||
|
```
|
||||||
|
|
||||||
## 方法
|
## 方法
|
||||||
|
|
||||||
|
@ -22,10 +32,6 @@ Marker<br />`const Marker = new L7.Marker(option)`
|
||||||
|
|
||||||
设置 marker 经纬度位置
|
设置 marker 经纬度位置
|
||||||
|
|
||||||
#### addTo
|
|
||||||
|
|
||||||
将 marker 添加到地图 Scene
|
|
||||||
|
|
||||||
#### remove
|
#### remove
|
||||||
|
|
||||||
移除 marker
|
移除 marker
|
||||||
|
@ -34,6 +40,12 @@ Marker<br />`const Marker = new L7.Marker(option)`
|
||||||
|
|
||||||
获取 marker dom Element
|
获取 marker dom Element
|
||||||
|
|
||||||
|
### setElement
|
||||||
|
|
||||||
|
- element `dom`
|
||||||
|
|
||||||
|
设置 element 通过此方法更新 Marker 样式
|
||||||
|
|
||||||
#### getLngLat
|
#### getLngLat
|
||||||
|
|
||||||
获取 marker 经纬度坐标
|
获取 marker 经纬度坐标
|
||||||
|
@ -42,6 +54,14 @@ Marker<br />`const Marker = new L7.Marker(option)`
|
||||||
|
|
||||||
开启或者关闭 marker 弹出框
|
开启或者关闭 marker 弹出框
|
||||||
|
|
||||||
|
#### openPopup
|
||||||
|
|
||||||
|
打开 Popup
|
||||||
|
|
||||||
|
### closePopup
|
||||||
|
|
||||||
|
关闭 popup
|
||||||
|
|
||||||
#### setPopup
|
#### setPopup
|
||||||
|
|
||||||
为 marker 设置 popup
|
为 marker 设置 popup
|
||||||
|
@ -50,24 +70,33 @@ Marker<br />`const Marker = new L7.Marker(option)`
|
||||||
|
|
||||||
获取 marker 弹出框
|
获取 marker 弹出框
|
||||||
|
|
||||||
|
#### getExtData()
|
||||||
|
|
||||||
|
获取用户自定义数据
|
||||||
|
|
||||||
|
#### setExtData(data)
|
||||||
|
|
||||||
|
设置用户自定义数据
|
||||||
|
|
||||||
## 示例代码
|
## 示例代码
|
||||||
|
|
||||||
#### 默认 Marker
|
#### 默认 Marker
|
||||||
|
|
||||||
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
|
`const marker = new L7.Marker({color:'blue'})`
|
||||||
|
|
||||||
#### 自定义 Marker
|
#### 自定义 Marker
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var el = document.createElement('label');
|
var el = document.createElement('label');
|
||||||
el.className = 'lableclass';
|
el.className = 'labelclass';
|
||||||
el.textContent = data[i].v;
|
el.textContent = data[i].v;
|
||||||
el.style.background = getColor(data[i].v);
|
el.style.background = getColor(data[i].v);
|
||||||
new L7.Marker({
|
|
||||||
|
const marker = new L7.Marker({
|
||||||
element: el,
|
element: el,
|
||||||
})
|
}).setLnglat([data[i].x * 1, data[i].y]);
|
||||||
.setLnglat([data[i].x * 1, data[i].y])
|
|
||||||
.addTo(scene);
|
scene.addMarker(marker);
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 设置 popup
|
#### 设置 popup
|
||||||
|
@ -81,6 +110,32 @@ new L7.Marker({
|
||||||
element: el,
|
element: el,
|
||||||
})
|
})
|
||||||
.setLnglat(item.coordinates)
|
.setLnglat(item.coordinates)
|
||||||
.setPopup(popup)
|
.setPopup(popup);
|
||||||
.addTo(scene);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 事件
|
||||||
|
|
||||||
|
### 鼠标事件
|
||||||
|
|
||||||
|
- mousemove
|
||||||
|
- click
|
||||||
|
- mousedown
|
||||||
|
- mouseup
|
||||||
|
- dblclick
|
||||||
|
- contextmenu
|
||||||
|
- mouseover
|
||||||
|
- mouseout
|
||||||
|
|
||||||
|
事件返回数据
|
||||||
|
|
||||||
|
- target 事件触发源
|
||||||
|
- data extData 用户自定义数据
|
||||||
|
- lnglat marker 经纬度
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
marker.on('click', (e) => {});
|
||||||
|
```
|
||||||
|
|
||||||
|
## demo 地址
|
||||||
|
|
||||||
|
[demo1](../../../examples/tutorial/marker)
|
||||||
|
|
|
@ -0,0 +1,121 @@
|
||||||
|
---
|
||||||
|
title: Marker Layer
|
||||||
|
order: 3
|
||||||
|
---
|
||||||
|
|
||||||
|
MarkerLayer 不同于 PointLayer 图层
|
||||||
|
|
||||||
|
**技术差异**
|
||||||
|
|
||||||
|
- MarkerLayer 地图元素采用 Dom 元素绘制
|
||||||
|
- PointLayer 通过 WebGL 绘制元素。
|
||||||
|
|
||||||
|
**功能差异**
|
||||||
|
|
||||||
|
- MarkerLayer 元素的自定义性比较强,任何 HTML+ CSS 的组合都可可以绘制在地图上。
|
||||||
|
- PointLayer 自定义性比较弱,实现成本比较高,优势可以绘制大量的数据,性能比交互。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { Marker, MarkerLayer } from '@antv/l7';
|
||||||
|
```
|
||||||
|
|
||||||
|
### 构造函数
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const markerLayer = new MarkerLayer(option);
|
||||||
|
|
||||||
|
// 调用 addMarker方法 将多个Marker添加到Layer
|
||||||
|
|
||||||
|
scene.addMarkerLayer(markerLayer);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### option
|
||||||
|
|
||||||
|
- cluster 聚合 `boolean` 默认 `false`
|
||||||
|
|
||||||
|
- clusterOption 聚合配置
|
||||||
|
|
||||||
|
- field `string` 聚合统计字段
|
||||||
|
- method `sum| max| min| mean`
|
||||||
|
- element `function` 通过回调函数设置聚合 Marker 的样式,返回 dom 元素
|
||||||
|
参数:feature
|
||||||
|
point_count 默认 聚合元素个数
|
||||||
|
clusterData `Array` 聚合节点的原始数据
|
||||||
|
point_sum 聚合求和 根据 field 和 method 计算
|
||||||
|
point_max 聚合最大值 根据 field 和 method 计算
|
||||||
|
point_min 聚合最小值 根据 field 和 method 计算
|
||||||
|
point_mean 聚合平均值 根据 field 和 method 计算
|
||||||
|
|
||||||
|
后续会增加更多配置项目
|
||||||
|
|
||||||
|
### 方法
|
||||||
|
|
||||||
|
#### addMarker
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
- marker `IMarker` 需要添加的 Marker
|
||||||
|
|
||||||
|
添加 Marker
|
||||||
|
|
||||||
|
通过 Marker 对象实例化一个 Marker
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const marker = new Marker().setLnglat(); // 添加进Marker必须设置经纬度才能添加
|
||||||
|
markerLayer.addMarker(marker);
|
||||||
|
```
|
||||||
|
|
||||||
|
为 Marker 添加属性信息,
|
||||||
|
|
||||||
|
如果聚合参数设置统计配置项 `field| method`需要为 Marker 添加属性信息
|
||||||
|
|
||||||
|
通过 Marker 的 extData[配置项](./marker#option)设置 Marker 属性信息
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const marker = new Marker({
|
||||||
|
extData: nodes.features[i].properties,
|
||||||
|
}).setLnglat({
|
||||||
|
lng: coordinates[0],
|
||||||
|
lat: coordinates[1],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### removeMarker
|
||||||
|
|
||||||
|
从 MarkerLayer 移除 Marker
|
||||||
|
|
||||||
|
#### getMarkers
|
||||||
|
|
||||||
|
获取 MarkerLayer 中的所有 Marker
|
||||||
|
|
||||||
|
#### clear
|
||||||
|
|
||||||
|
清除掉所有的 Marker
|
||||||
|
|
||||||
|
####
|
||||||
|
|
||||||
|
### Scene
|
||||||
|
|
||||||
|
#### addMarkerLayer
|
||||||
|
|
||||||
|
添加 MarkerLayer
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.addMarkerLayer(layer);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### removeMarkerLayer
|
||||||
|
|
||||||
|
移除 MarkerLayer
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.removeMarkerLayer(layer);
|
||||||
|
```
|
||||||
|
|
||||||
|
### demo 地址
|
||||||
|
|
||||||
|
[markerLayer ](../../../examples/point/marker#markerlayer)
|
||||||
|
|
||||||
|
[markerLayer 聚合](../../../examples/point/marker#clustermarker)
|
|
@ -0,0 +1,122 @@
|
||||||
|
---
|
||||||
|
title: Marker 图层
|
||||||
|
order: 3
|
||||||
|
---
|
||||||
|
|
||||||
|
MarkerLayer 是 Marker 的升级版,Marker 是独立的地图标注,MarkerLayer 则是统一管理大量的 Marker 数据。
|
||||||
|
|
||||||
|
**技术差异**
|
||||||
|
|
||||||
|
- Marker Dom 绘制一个地图元素
|
||||||
|
- MarkerLayer 统一管理多个 DomMarker
|
||||||
|
- PointLayer 通过 WebGL 绘制元素。
|
||||||
|
|
||||||
|
**功能差异**
|
||||||
|
|
||||||
|
- MarkerLayer 元素的自定义性比较强,任何 HTML+ CSS 的组合都可以绘制在地图上。
|
||||||
|
- PointLayer 自定义性比较弱,实现成本比较高,优势可以绘制大量的数据,性能比较好。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { Marker, MarkerLayer } from '@antv/l7';
|
||||||
|
```
|
||||||
|
|
||||||
|
### 构造函数
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const markerLayer = new MarkerLayer(option);
|
||||||
|
|
||||||
|
// 调用 addMarker方法 将多个Marker添加到Layer
|
||||||
|
|
||||||
|
scene.addMarkerLayer(markerLayer);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### option
|
||||||
|
|
||||||
|
- cluster 聚合 `boolean` 默认 `false`
|
||||||
|
|
||||||
|
- clusterOption 聚合配置
|
||||||
|
|
||||||
|
- field `string` 聚合统计字段
|
||||||
|
- method `sum| max| min| mean`
|
||||||
|
- element `function` 通过回调函数设置聚合 Marker 的样式,返回 dom 元素
|
||||||
|
|
||||||
|
参数:feature
|
||||||
|
|
||||||
|
- point_count 默认 聚合元素个数
|
||||||
|
- clusterData `Array` 聚合节点的原始数据
|
||||||
|
- point_sum 聚合求和 根据 field 和 method 计算
|
||||||
|
- point_max 聚合最大值 根据 field 和 method 计算
|
||||||
|
- point_min 聚合最小值 根据 field 和 method 计算
|
||||||
|
- point_mean 聚合平均值 根据 field 和 method 计算
|
||||||
|
|
||||||
|
### 方法
|
||||||
|
|
||||||
|
#### addMarker
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
- marker `IMarker` 需要添加的 Marker
|
||||||
|
|
||||||
|
添加 Marker
|
||||||
|
|
||||||
|
通过 Marker 对象实例化一个 Marker
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const marker = new Marker().setLnglat(); // 添加进Marker必须设置经纬度才能添加
|
||||||
|
markerLayer.addMarker(marker);
|
||||||
|
```
|
||||||
|
|
||||||
|
为 Marker 添加属性信息,
|
||||||
|
|
||||||
|
如果聚合参数设置统计配置项 `field| method`需要为 Marker 添加属性信息
|
||||||
|
|
||||||
|
通过 Marker 的 extData[配置项](./marker#option)设置 Marker 属性信息
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const marker = new Marker({
|
||||||
|
extData: nodes.features[i].properties,
|
||||||
|
}).setLnglat({
|
||||||
|
lng: coordinates[0],
|
||||||
|
lat: coordinates[1],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### removeMarker
|
||||||
|
|
||||||
|
从 MarkerLayer 移除 Marker
|
||||||
|
|
||||||
|
#### getMarkers
|
||||||
|
|
||||||
|
获取 MarkerLayer 中的所有 Marker
|
||||||
|
|
||||||
|
#### clear
|
||||||
|
|
||||||
|
清除掉所有的 Marker
|
||||||
|
|
||||||
|
####
|
||||||
|
|
||||||
|
### Scene
|
||||||
|
|
||||||
|
#### addMarkerLayer
|
||||||
|
|
||||||
|
添加 MarkerLayer
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.addMarkerLayer(layer);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### removeMarkerLayer
|
||||||
|
|
||||||
|
移除 MarkerLayer
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.removeMarkerLayer(layer);
|
||||||
|
```
|
||||||
|
|
||||||
|
### demo 地址
|
||||||
|
|
||||||
|
[markerLayer ](../../../examples/point/marker#markerlayer)
|
||||||
|
|
||||||
|
[markerLayer 聚合](../../../examples/point/marker#clustermarker)
|
|
@ -1,10 +1,8 @@
|
||||||
---
|
---
|
||||||
title: Popup
|
title: Popup
|
||||||
order: 4
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
# popup
|
|
||||||
|
|
||||||
地图标注信息窗口,用于展示地图要素的属性信息
|
地图标注信息窗口,用于展示地图要素的属性信息
|
||||||
|
|
||||||
## 构造函数
|
## 构造函数
|
||||||
|
@ -22,44 +20,62 @@ const popup = new L7.Popup(option);
|
||||||
- maxWidth
|
- maxWidth
|
||||||
- anchor
|
- anchor
|
||||||
|
|
||||||
|
#### 添加到地图
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.addPopup(popup);
|
||||||
|
```
|
||||||
|
|
||||||
## 方法
|
## 方法
|
||||||
|
|
||||||
#### setLnglat
|
#### setLnglat
|
||||||
|
|
||||||
设置 popup 的经纬度位置<br />**参数**:lnglat 经纬度数组 [112,32]
|
设置 popup 的经纬度位置
|
||||||
|
|
||||||
|
**参数**:lnglat
|
||||||
|
|
||||||
|
支持数组
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
[112, 32];
|
||||||
|
```
|
||||||
|
|
||||||
|
经纬度对象
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const lnglat = {
|
||||||
|
lng: 112.323,
|
||||||
|
lat: 30.456,
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
popup.setLnglat([112, 32]);
|
popup.setLnglat([112, 32]);
|
||||||
```
|
```
|
||||||
|
|
||||||
#### addTo
|
#### setHTML
|
||||||
|
|
||||||
**参数**:scene 地图 scene 实例
|
|
||||||
|
|
||||||
将 popup 添加到地图 scene 显示
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
popup.addTo(scene);
|
|
||||||
```
|
|
||||||
|
|
||||||
#### setHtml
|
|
||||||
|
|
||||||
**参数**:html 字符串
|
**参数**:html 字符串
|
||||||
|
|
||||||
设置 popup html 内容
|
设置 popup html 内容
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var html =
|
var html = `<p>省份
|
||||||
'<p>\u7701\u4EFD\uFF1A' +
|
${feature.s} </p><p>地区
|
||||||
feature.s +
|
${feature.m}</p><p>数值
|
||||||
'</p>\n <p>\u5730\u533A\uFF1A' +
|
${feature.t}</p>`;
|
||||||
feature.m +
|
popup.setHTML(html);
|
||||||
'</p>\n <p>\u6E29\u5EA6\uFF1A' +
|
|
||||||
feature.t +
|
|
||||||
'</p>\n ';
|
|
||||||
popup.setHtml(html);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### setDOMContent
|
||||||
|
|
||||||
|
- 参数 htmlNode dom 对象
|
||||||
|
区别于 setHtml 对象只能传字符串
|
||||||
|
|
||||||
|
**tips**
|
||||||
|
|
||||||
|
如果需要将 react 组件渲染到 popup 可以用此方法。
|
||||||
|
|
||||||
#### setText
|
#### setText
|
||||||
|
|
||||||
设置 popup 显示文本内容
|
设置 popup 显示文本内容
|
||||||
|
@ -68,6 +84,38 @@ popup.setHtml(html);
|
||||||
popup.setText('hello world');
|
popup.setText('hello world');
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### open
|
||||||
|
|
||||||
|
显示 popup
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
popup.open();
|
||||||
|
```
|
||||||
|
|
||||||
|
#### close
|
||||||
|
|
||||||
|
显示 popup
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
popup.close();
|
||||||
|
```
|
||||||
|
|
||||||
|
#### open
|
||||||
|
|
||||||
|
显示 popup
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
popup.open();
|
||||||
|
```
|
||||||
|
|
||||||
|
#### close
|
||||||
|
|
||||||
|
显示 popup
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
popup.close();
|
||||||
|
```
|
||||||
|
|
||||||
#### remove
|
#### remove
|
||||||
|
|
||||||
移除 popup
|
移除 popup
|
||||||
|
@ -78,6 +126,12 @@ popup.remove();
|
||||||
|
|
||||||
## 事件
|
## 事件
|
||||||
|
|
||||||
|
### open
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
popup.on('open', () => {});
|
||||||
|
```
|
||||||
|
|
||||||
#### close
|
#### close
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
@ -90,7 +144,11 @@ popup.on('close', () => {});
|
||||||
|
|
||||||
```
|
```
|
||||||
var html = '<p>'+feature.m+'</p>';
|
var html = '<p>'+feature.m+'</p>';
|
||||||
const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
|
const popup= new L7.Popup().setLnglat([112, 32]).setHTML(html);
|
||||||
|
scene.addPopup(popup);
|
||||||
```
|
```
|
||||||
|
|
||||||
### FAQ
|
## demo 地址
|
||||||
|
|
||||||
|
[demo1](../../../examples/point/column)
|
||||||
|
[demo2](../../../examples/line/path)
|
||||||
|
|
|
@ -1,10 +1,8 @@
|
||||||
---
|
---
|
||||||
title: popup
|
title: Popup 信息框
|
||||||
order: 0
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
# popup
|
|
||||||
|
|
||||||
地图标注信息窗口,用于展示地图要素的属性信息
|
地图标注信息窗口,用于展示地图要素的属性信息
|
||||||
|
|
||||||
## 构造函数
|
## 构造函数
|
||||||
|
@ -22,44 +20,62 @@ const popup = new L7.Popup(option);
|
||||||
- maxWidth
|
- maxWidth
|
||||||
- anchor
|
- anchor
|
||||||
|
|
||||||
|
#### 添加到地图
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.addPopup(popup);
|
||||||
|
```
|
||||||
|
|
||||||
## 方法
|
## 方法
|
||||||
|
|
||||||
#### setLnglat
|
#### setLnglat
|
||||||
|
|
||||||
设置 popup 的经纬度位置<br />**参数**:lnglat 经纬度数组 [112,32]
|
设置 popup 的经纬度位置
|
||||||
|
|
||||||
|
**参数**:lnglat
|
||||||
|
|
||||||
|
支持数组
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
[112, 32];
|
||||||
|
```
|
||||||
|
|
||||||
|
经纬度对象
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const lnglat = {
|
||||||
|
lng: 112.323,
|
||||||
|
lat: 30.456,
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
popup.setLnglat([112, 32]);
|
popup.setLnglat([112, 32]);
|
||||||
```
|
```
|
||||||
|
|
||||||
#### addTo
|
#### setHTML
|
||||||
|
|
||||||
**参数**:scene 地图 scene 实例
|
|
||||||
|
|
||||||
将 popup 添加到地图 scene 显示
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
popup.addTo(scene);
|
|
||||||
```
|
|
||||||
|
|
||||||
#### setHtml
|
|
||||||
|
|
||||||
**参数**:html 字符串
|
**参数**:html 字符串
|
||||||
|
|
||||||
设置 popup html 内容
|
设置 popup html 内容
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var html =
|
var html = `<p>省份
|
||||||
'<p>\u7701\u4EFD\uFF1A' +
|
${feature.s} </p><p>地区
|
||||||
feature.s +
|
${feature.m}</p><p>数值
|
||||||
'</p>\n <p>\u5730\u533A\uFF1A' +
|
${feature.t}</p>`;
|
||||||
feature.m +
|
popup.setHTML(html);
|
||||||
'</p>\n <p>\u6E29\u5EA6\uFF1A' +
|
|
||||||
feature.t +
|
|
||||||
'</p>\n ';
|
|
||||||
popup.setHtml(html);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### setDOMContent
|
||||||
|
|
||||||
|
- 参数 htmlNode dom 对象
|
||||||
|
区别于 setHtml 对象只能传字符串
|
||||||
|
|
||||||
|
**tips**
|
||||||
|
|
||||||
|
如果需要将 react 组件渲染到 popup 可以用此方法。
|
||||||
|
|
||||||
#### setText
|
#### setText
|
||||||
|
|
||||||
设置 popup 显示文本内容
|
设置 popup 显示文本内容
|
||||||
|
@ -68,6 +84,22 @@ popup.setHtml(html);
|
||||||
popup.setText('hello world');
|
popup.setText('hello world');
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### open
|
||||||
|
|
||||||
|
显示 popup
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
popup.open();
|
||||||
|
```
|
||||||
|
|
||||||
|
#### close
|
||||||
|
|
||||||
|
关闭 popup
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
popup.close();
|
||||||
|
```
|
||||||
|
|
||||||
#### remove
|
#### remove
|
||||||
|
|
||||||
移除 popup
|
移除 popup
|
||||||
|
@ -78,6 +110,12 @@ popup.remove();
|
||||||
|
|
||||||
## 事件
|
## 事件
|
||||||
|
|
||||||
|
### open
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
popup.on('open', () => {});
|
||||||
|
```
|
||||||
|
|
||||||
#### close
|
#### close
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
@ -90,7 +128,11 @@ popup.on('close', () => {});
|
||||||
|
|
||||||
```
|
```
|
||||||
var html = '<p>'+feature.m+'</p>';
|
var html = '<p>'+feature.m+'</p>';
|
||||||
const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
|
const popup= new L7.Popup().setLnglat([112, 32]).setHTML(html);
|
||||||
|
scene.addPopup(popup);
|
||||||
```
|
```
|
||||||
|
|
||||||
### FAQ
|
## demo 地址
|
||||||
|
|
||||||
|
[demo1](../../../examples/point/column)
|
||||||
|
[demo2](../../../examples/line/path)
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Draw Component
|
||||||
|
order: 2
|
||||||
|
---
|
|
@ -0,0 +1,274 @@
|
||||||
|
---
|
||||||
|
title: 地图绘制组件
|
||||||
|
order: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
地图绘制组件,支持点、线、面, 圆、矩形、的绘制编辑。
|
||||||
|
|
||||||
|
# 使用
|
||||||
|
|
||||||
|
**using modules**
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { DrawControl } from '@antv/l7-draw';
|
||||||
|
```
|
||||||
|
|
||||||
|
**CDN 版本引用**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<! --引入最新版的L7-Draw -->
|
||||||
|
<script src="https://unpkg.com/@antv/l7-draw"></script>
|
||||||
|
</head>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 参数
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const control = new DrawControl(scene, option);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### scene
|
||||||
|
|
||||||
|
scene 对象
|
||||||
|
|
||||||
|
#### options
|
||||||
|
|
||||||
|
control 配置项
|
||||||
|
|
||||||
|
| name | Type | Default | Description |
|
||||||
|
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
|
||||||
|
| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 |
|
||||||
|
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
|
||||||
|
| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 |
|
||||||
|
| style | | | 地图绘制样式 |
|
||||||
|
|
||||||
|
**controlOptions**
|
||||||
|
UI 组件配置项
|
||||||
|
|
||||||
|
- point `boolean | drawOption` 绘制点工具配置
|
||||||
|
- line `boolean | drawOption` 绘制线工具配置
|
||||||
|
- polygon `boolean | drawOption` 绘制面工具配置
|
||||||
|
- circle `boolean | drawOption` 绘制圆工具配置
|
||||||
|
- rect `boolean | drawOption` 绘制矩形工具配置
|
||||||
|
- delete `boolean | drawOption` 添加删除工具
|
||||||
|
|
||||||
|
默认配置
|
||||||
|
|
||||||
|
```
|
||||||
|
{
|
||||||
|
point: true,
|
||||||
|
line: true,
|
||||||
|
polygon: true,
|
||||||
|
rect: true,
|
||||||
|
circle: true,
|
||||||
|
delete: true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
示例
|
||||||
|
|
||||||
|
```
|
||||||
|
{
|
||||||
|
point: false,
|
||||||
|
line: {
|
||||||
|
editEnable: false,
|
||||||
|
},
|
||||||
|
polygon: true,
|
||||||
|
rect: true,
|
||||||
|
circle: true,
|
||||||
|
delete: false
|
||||||
|
```
|
||||||
|
|
||||||
|
### 添加到地图
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.addControl(control);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 从地图中移除
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.removeControl(control);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Draw Type
|
||||||
|
|
||||||
|
可以不依赖 Draw UI 组件,独立的使用每一个 Draw
|
||||||
|
|
||||||
|
#### DrawCircle
|
||||||
|
|
||||||
|
绘制圆形
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { DrawCircle } from '@antv/l7-draw';
|
||||||
|
const drawCircle = new DrawCircle(scene);
|
||||||
|
drawCircle.enable();
|
||||||
|
```
|
||||||
|
|
||||||
|
#### DrawRect
|
||||||
|
|
||||||
|
绘制四边形
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { DrawRect } from '@antv/l7-draw';
|
||||||
|
const drawRect = new DrawRect(scene);
|
||||||
|
drawRect.enable();
|
||||||
|
```
|
||||||
|
|
||||||
|
#### DrawLine
|
||||||
|
|
||||||
|
绘制路径
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { DrawLine } from '@antv/l7-draw';
|
||||||
|
const drawLine = new DrawLine(scene);
|
||||||
|
drawLine.enable();
|
||||||
|
```
|
||||||
|
|
||||||
|
#### DrawPoint
|
||||||
|
|
||||||
|
绘制点
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { DrawPoint } from '@antv/l7-draw';
|
||||||
|
const drawPoint = new DrawPoint(scene);
|
||||||
|
drawPoint.enable();
|
||||||
|
```
|
||||||
|
|
||||||
|
#### DrawPolygon
|
||||||
|
|
||||||
|
绘制多边形
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { DrawPolygon } from '@antv/l7-draw';
|
||||||
|
const drawPoint = new DrawPolygon(scene);
|
||||||
|
drawPoint.enable();
|
||||||
|
```
|
||||||
|
|
||||||
|
### 配置项 DrawOption
|
||||||
|
|
||||||
|
- editEnable boolean 是否允许编辑
|
||||||
|
- selectEnable boolean 是否允许选中
|
||||||
|
|
||||||
|
### 方法
|
||||||
|
|
||||||
|
#### enable
|
||||||
|
|
||||||
|
开始编辑,绘制完成之后会自动结束。
|
||||||
|
|
||||||
|
#### disable
|
||||||
|
|
||||||
|
结束编辑
|
||||||
|
|
||||||
|
### 事件
|
||||||
|
|
||||||
|
#### draw.create
|
||||||
|
|
||||||
|
绘制完成时触发该事件
|
||||||
|
|
||||||
|
#### draw.delete
|
||||||
|
|
||||||
|
图形删除时触发该事件
|
||||||
|
|
||||||
|
#### draw.update
|
||||||
|
|
||||||
|
图形更新时触发该事件,图形的平移,顶点的编辑
|
||||||
|
|
||||||
|
### style
|
||||||
|
|
||||||
|
- active 绘制过程中高亮颜色
|
||||||
|
- normal 正常显示状态
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const style = {
|
||||||
|
active: {
|
||||||
|
point: {
|
||||||
|
type: 'PointLayer',
|
||||||
|
shape: 'circle',
|
||||||
|
color: '#fbb03b',
|
||||||
|
size: 5,
|
||||||
|
style: {
|
||||||
|
stroke: '#fff',
|
||||||
|
strokeWidth: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
line: {
|
||||||
|
type: 'LineLayer',
|
||||||
|
shape: 'line',
|
||||||
|
color: '#fbb03b',
|
||||||
|
size: 1,
|
||||||
|
style: {
|
||||||
|
opacity: 1,
|
||||||
|
lineType: 'dash',
|
||||||
|
dashArray: [2, 2],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
polygon: {
|
||||||
|
shape: 'fill',
|
||||||
|
color: '#fbb03b',
|
||||||
|
style: {
|
||||||
|
opacity: 0.1,
|
||||||
|
stroke: '#fbb03b',
|
||||||
|
strokeWidth: 1,
|
||||||
|
strokeOpacity: 1,
|
||||||
|
lineType: 'dash',
|
||||||
|
dashArray: [2, 2],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
normal: {
|
||||||
|
polygon: {
|
||||||
|
type: 'PolygonLayer',
|
||||||
|
shape: 'fill',
|
||||||
|
color: '#3bb2d0',
|
||||||
|
style: {
|
||||||
|
opacity: 0.1,
|
||||||
|
stroke: '#3bb2d0',
|
||||||
|
strokeWidth: 1,
|
||||||
|
strokeOpacity: 1,
|
||||||
|
lineType: 'solid',
|
||||||
|
dashArray: [2, 2],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
line: {
|
||||||
|
type: 'LineLayer',
|
||||||
|
shape: 'line',
|
||||||
|
size: 1,
|
||||||
|
color: '#3bb2d0',
|
||||||
|
style: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
point: {
|
||||||
|
type: 'PointLayer',
|
||||||
|
shape: 'circle',
|
||||||
|
color: '#3bb2d0',
|
||||||
|
size: 3,
|
||||||
|
style: {
|
||||||
|
stroke: '#fff',
|
||||||
|
strokeWidth: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
normal_point: {
|
||||||
|
type: 'PointLayer',
|
||||||
|
shape: 'circle',
|
||||||
|
color: '#3bb2d0',
|
||||||
|
size: 3,
|
||||||
|
style: {
|
||||||
|
stroke: '#fff',
|
||||||
|
strokeWidth: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mid_point: {
|
||||||
|
point: {
|
||||||
|
type: 'PointLayer',
|
||||||
|
shape: 'circle',
|
||||||
|
color: '#fbb03b',
|
||||||
|
size: 3,
|
||||||
|
style: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
|
@ -5,7 +5,6 @@ redirect_from:
|
||||||
- /en/docs/api
|
- /en/docs/api
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
An open source large-scale geospatial data visualization analysis development framework powered by WebGL.
|
An open source large-scale geospatial data visualization analysis development framework powered by WebGL.
|
||||||
|
|
||||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location,7 代表世界七大洲,寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础,将抽象复杂的空间数据转化成 2D、3D 符号,通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
|
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location,7 代表世界七大洲,寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础,将抽象复杂的空间数据转化成 2D、3D 符号,通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
|
||||||
|
@ -17,13 +16,12 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
2.0.beta 版本目前有些功能还未完善,1月6号我们正式版,将支持1.x版的所有功能,而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档,
|
✨ 2020.01.06 2.0 版本正式发布
|
||||||
|
|
||||||
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
## 核心特性
|
## 核心特性
|
||||||
|
|
||||||
|
|
||||||
🌏 数据驱动可视化展示
|
🌏 数据驱动可视化展示
|
||||||
|
|
||||||
数据驱动,从数到形,支持丰富的地图可视化类型,更好洞察数据。
|
数据驱动,从数到形,支持丰富的地图可视化类型,更好洞察数据。
|
||||||
|
@ -34,9 +32,9 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
|
|
||||||
🌏 简单灵活的数据接入
|
🌏 简单灵活的数据接入
|
||||||
|
|
||||||
支持CSV,JSON,geojson等数据格式接入,可以根据需求自定义数据格式,无需复杂的空间数据转换。
|
支持 CSV,JSON,geojson 等数据格式接入,可以根据需求自定义数据格式,无需复杂的空间数据转换。
|
||||||
|
|
||||||
🌏 多地图底图支持,支持离线内网部署
|
🌏 多地图底图支持,支持离线内网部署
|
||||||
|
|
||||||
高德地图国内合法合规的地理底图,Mapbox 满足国际化业务需求。
|
高德地图国内合法合规的地理底图,Mapbox 满足国际化业务需求。
|
||||||
|
|
||||||
|
@ -44,24 +42,24 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
|
|
||||||
### 点图层
|
### 点图层
|
||||||
|
|
||||||
- 气泡图
|
- 气泡图
|
||||||
- 散点图
|
- 散点图
|
||||||
- 符号地图
|
- 符号地图
|
||||||
- 3D柱状地图
|
- 3D 柱状地图
|
||||||
- 聚合地图
|
- 聚合地图
|
||||||
- 复合图表地图
|
- 复合图表地图
|
||||||
- 自定义Marker
|
- 自定义 Marker
|
||||||
|
|
||||||
### 线图层
|
### 线图层
|
||||||
|
|
||||||
- 路径地图
|
- 路径地图
|
||||||
- 弧线,支持2D弧线、3D弧线以及大圆航线
|
- 弧线,支持 2D 弧线、3D 弧线以及大圆航线
|
||||||
- 等值线
|
- 等值线
|
||||||
|
|
||||||
### 面图层
|
### 面图层
|
||||||
|
|
||||||
- 填充图
|
- 填充图
|
||||||
- 3D填充图
|
- 3D 填充图
|
||||||
|
|
||||||
### 热力图
|
### 热力图
|
||||||
|
|
||||||
|
@ -70,6 +68,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
- 网格热力图
|
- 网格热力图
|
||||||
|
|
||||||
### 栅格地图
|
### 栅格地图
|
||||||
|
|
||||||
- 图片
|
- 图片
|
||||||
- Raster
|
- Raster
|
||||||
|
|
||||||
|
@ -77,5 +76,4 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
|
|
||||||
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
|
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
|
||||||
|
|
||||||
|
|
||||||
更多技术细节,详细进展,请关注 [GitHub](https://github.com/antvis/L7),欢迎大家来给点点 Star,让更多人看到这个开源的项目。
|
更多技术细节,详细进展,请关注 [GitHub](https://github.com/antvis/L7),欢迎大家来给点点 Star,让更多人看到这个开源的项目。
|
||||||
|
|
|
@ -7,9 +7,7 @@ redirect_from:
|
||||||
|
|
||||||
# L7 地理空间数据可视分析引擎
|
# L7 地理空间数据可视分析引擎
|
||||||
|
|
||||||
2.0.beta 版本目前有些功能还未完善,
|
✨ 2020.01.06 2.0 版本正式发布
|
||||||
|
|
||||||
⚠️ 1月6号 正式版发版,将支持1.x版的所有功能,而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档,
|
|
||||||
|
|
||||||
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
|
@ -24,7 +22,6 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
|
|
||||||
## 核心特性
|
## 核心特性
|
||||||
|
|
||||||
|
|
||||||
🌏 数据驱动可视化展示
|
🌏 数据驱动可视化展示
|
||||||
|
|
||||||
数据驱动,从数到形,支持丰富的地图可视化类型,更好洞察数据。
|
数据驱动,从数到形,支持丰富的地图可视化类型,更好洞察数据。
|
||||||
|
@ -35,9 +32,9 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
|
|
||||||
🌏 简单灵活的数据接入
|
🌏 简单灵活的数据接入
|
||||||
|
|
||||||
支持CSV,JSON,geojson等数据格式接入,可以根据需求自定义数据格式,无需复杂的空间数据转换。
|
支持 CSV,JSON,geojson 等数据格式接入,可以根据需求自定义数据格式,无需复杂的空间数据转换。
|
||||||
|
|
||||||
🌏 多地图底图支持,支持离线内网部署
|
🌏 多地图底图支持,支持离线内网部署
|
||||||
|
|
||||||
高德地图国内合法合规的地理底图,Mapbox 满足国际化业务需求。
|
高德地图国内合法合规的地理底图,Mapbox 满足国际化业务需求。
|
||||||
|
|
||||||
|
@ -45,24 +42,24 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
|
|
||||||
### 点图层
|
### 点图层
|
||||||
|
|
||||||
- 气泡图
|
- 气泡图
|
||||||
- 散点图
|
- 散点图
|
||||||
- 符号地图
|
- 符号地图
|
||||||
- 3D柱状地图
|
- 3D 柱状地图
|
||||||
- 聚合地图
|
- 聚合地图
|
||||||
- 复合图表地图
|
- 复合图表地图
|
||||||
- 自定义Marker
|
- 自定义 Marker
|
||||||
|
|
||||||
### 线图层
|
### 线图层
|
||||||
|
|
||||||
- 路径地图
|
- 路径地图
|
||||||
- 弧线,支持2D弧线、3D弧线以及大圆航线
|
- 弧线,支持 2D 弧线、3D 弧线以及大圆航线
|
||||||
- 等值线
|
- 等值线
|
||||||
|
|
||||||
### 面图层
|
### 面图层
|
||||||
|
|
||||||
- 填充图
|
- 填充图
|
||||||
- 3D填充图
|
- 3D 填充图
|
||||||
|
|
||||||
### 热力图
|
### 热力图
|
||||||
|
|
||||||
|
@ -71,6 +68,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
- 网格热力图
|
- 网格热力图
|
||||||
|
|
||||||
### 栅格地图
|
### 栅格地图
|
||||||
|
|
||||||
- 图片
|
- 图片
|
||||||
- Raster
|
- Raster
|
||||||
|
|
||||||
|
@ -78,11 +76,10 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
|
|
||||||
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
|
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
|
||||||
|
|
||||||
|
|
||||||
更多技术细节,详细进展,请关注 [GitHub](https://github.com/antvis/L7),欢迎大家来给点点 Star,让更多人看到这个开源的项目。
|
更多技术细节,详细进展,请关注 [GitHub](https://github.com/antvis/L7),欢迎大家来给点点 Star,让更多人看到这个开源的项目。
|
||||||
|
|
||||||
### 技术支持服务群
|
### 技术支持服务群
|
||||||
|
|
||||||
L7 相关技术问题,需求反馈,我们会及时响应
|
L7 相关技术问题,需求反馈,我们会及时响应
|
||||||
|
|
||||||
|
|
||||||
![地理空间可视化L7支持群](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ePmsRbK4lZgAAAAAAAAAAABkARQnAQ)
|
![地理空间可视化L7支持群](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ePmsRbK4lZgAAAAAAAAAAABkARQnAQ)
|
||||||
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
---
|
||||||
|
title: 1.x history
|
||||||
|
order: 9
|
||||||
|
---
|
||||||
|
|
||||||
|
## L7 1.x 版本
|
||||||
|
|
||||||
|
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
|
目前 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.6/build/L7-min.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### npm 安装使用
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install @antv/l7
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 1.x 版本 和文档
|
||||||
|
|
||||||
|
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
|
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
|
@ -0,0 +1,31 @@
|
||||||
|
---
|
||||||
|
title: 1.x 历史版本
|
||||||
|
order: 9
|
||||||
|
---
|
||||||
|
|
||||||
|
## L7 1.x 版本
|
||||||
|
|
||||||
|
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
|
目前 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.14/build/L7-min.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### npm 安装使用
|
||||||
|
|
||||||
|
会默认安装 1.x 的最新版本,2.0 正式版本发布后才会默认 2.0 版本
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install @antv/l7
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 1.x 版本 和文档
|
||||||
|
|
||||||
|
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
|
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
|
@ -1,39 +0,0 @@
|
||||||
---
|
|
||||||
title: 1.x stable
|
|
||||||
order: 1
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## L7 1.x 版本
|
|
||||||
|
|
||||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
|
||||||
|
|
||||||
目前 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.6/build/L7-min.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
### npm 安装使用
|
|
||||||
|
|
||||||
会默认安装 1.x的最新版本,2.0正式版本发布后才会默认2.0版本
|
|
||||||
```
|
|
||||||
npm install @antv/l7
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
### 1.x 版本 和文档
|
|
||||||
|
|
||||||
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
|
||||||
|
|
||||||
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
L7 2.0 beta 版本已经发布,一些功能还没有完善,我们将在1月6号发布2.0正式版,会包含1.x 版的所有功能.
|
|
||||||
|
|
||||||
|
|
||||||
L7 2.0 beta 版本已经发布,一些功能还没有完善,我们将在1月6号发布2.0正式版,会包含1.x 版的所有功能.
|
|
|
@ -1,36 +0,0 @@
|
||||||
---
|
|
||||||
title: 1.x 稳定版
|
|
||||||
order: 1
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## L7 1.x 版本
|
|
||||||
|
|
||||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
|
||||||
|
|
||||||
目前 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.4/build/L7-min.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
### npm 安装使用
|
|
||||||
|
|
||||||
会默认安装 1.x的最新版本,2.0正式版本发布后才会默认2.0版本
|
|
||||||
```
|
|
||||||
npm install @antv/l7
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
### 1.x 版本 和文档
|
|
||||||
|
|
||||||
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
|
||||||
|
|
||||||
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
L7 2.0 beta 版本已经发布,一些功能还没有完善,我们将在1月6号发布2.0正式版,会包含1.x 版的所有功能.
|
|
|
@ -0,0 +1,73 @@
|
||||||
|
---
|
||||||
|
title: CityBuild
|
||||||
|
order: 6
|
||||||
|
---
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { CityBuildingLayer } from '@antv/l7';
|
||||||
|
```
|
||||||
|
|
||||||
|
### source
|
||||||
|
|
||||||
|
同 [PolygonLayer](./polygon_layer/extrude)
|
||||||
|
|
||||||
|
### size
|
||||||
|
|
||||||
|
同 [PolygonLayer](./polygon_layer/extrude)
|
||||||
|
|
||||||
|
### color
|
||||||
|
|
||||||
|
[PolygonLayer](./polygon_layer/extrude)
|
||||||
|
|
||||||
|
### animate
|
||||||
|
|
||||||
|
开启动画效果
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(true);
|
||||||
|
```
|
||||||
|
|
||||||
|
### style
|
||||||
|
|
||||||
|
- baseColor 楼房颜色,
|
||||||
|
- windowColor: 窗户颜色,
|
||||||
|
- brightColor: 点亮窗户颜色
|
||||||
|
|
||||||
|
其他 style 配置项同
|
||||||
|
|
||||||
|
[layer#style](./layer#style)
|
||||||
|
|
||||||
|
## 自定义动画频率
|
||||||
|
|
||||||
|
自定义动画频率需要 关闭默认动画,通过 setLight 方法不断更新时间
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(false);
|
||||||
|
```
|
||||||
|
|
||||||
|
### setLight(time)
|
||||||
|
|
||||||
|
参数
|
||||||
|
time : 时间 毫秒
|
||||||
|
|
||||||
|
#### 完整代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const pointLayer = new CityBuildingLayer();
|
||||||
|
pointLayer
|
||||||
|
.source(await response.json())
|
||||||
|
.size('floor', [0, 500])
|
||||||
|
.color('rgba(242,246,250,1.0)')
|
||||||
|
.animate({
|
||||||
|
enable: true,
|
||||||
|
})
|
||||||
|
.style({
|
||||||
|
opacity: 1.0,
|
||||||
|
baseColor: 'rgb(16,16,16)',
|
||||||
|
windowColor: 'rgb(30,60,89)',
|
||||||
|
brightColor: 'rgb(255,176,38)',
|
||||||
|
});
|
||||||
|
scene.addLayer(pointLayer);
|
||||||
|
```
|
|
@ -0,0 +1,73 @@
|
||||||
|
---
|
||||||
|
title: 城市建筑
|
||||||
|
order: 6
|
||||||
|
---
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { CityBuildingLayer } from '@antv/l7';
|
||||||
|
```
|
||||||
|
|
||||||
|
### source
|
||||||
|
|
||||||
|
同 [PolygonLayer](./polygon_layer/extrude)
|
||||||
|
|
||||||
|
### size
|
||||||
|
|
||||||
|
同 [PolygonLayer](./polygon_layer/extrude)
|
||||||
|
|
||||||
|
### color
|
||||||
|
|
||||||
|
[PolygonLayer](./polygon_layer/extrude)
|
||||||
|
|
||||||
|
### animate
|
||||||
|
|
||||||
|
开启动画效果
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(true);
|
||||||
|
```
|
||||||
|
|
||||||
|
### style
|
||||||
|
|
||||||
|
- baseColor 楼房颜色,
|
||||||
|
- windowColor: 窗户颜色,
|
||||||
|
- brightColor: 点亮窗户颜色
|
||||||
|
|
||||||
|
其他 style 配置项同
|
||||||
|
|
||||||
|
[layer#style](./layer#style)
|
||||||
|
|
||||||
|
## 自定义动画频率
|
||||||
|
|
||||||
|
自定义动画频率需要 关闭默认动画,通过 setLight 方法不断更新时间
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(false);
|
||||||
|
```
|
||||||
|
|
||||||
|
### setLight(time)
|
||||||
|
|
||||||
|
参数
|
||||||
|
time : 时间 毫秒
|
||||||
|
|
||||||
|
#### 完整代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const pointLayer = new CityBuildingLayer();
|
||||||
|
pointLayer
|
||||||
|
.source(await response.json())
|
||||||
|
.size('floor', [0, 500])
|
||||||
|
.color('rgba(242,246,250,1.0)')
|
||||||
|
.animate({
|
||||||
|
enable: true,
|
||||||
|
})
|
||||||
|
.style({
|
||||||
|
opacity: 1.0,
|
||||||
|
baseColor: 'rgb(16,16,16)',
|
||||||
|
windowColor: 'rgb(30,60,89)',
|
||||||
|
brightColor: 'rgb(255,176,38)',
|
||||||
|
});
|
||||||
|
scene.addLayer(pointLayer);
|
||||||
|
```
|
|
@ -1,219 +0,0 @@
|
||||||
---
|
|
||||||
title: HeatmapLayer
|
|
||||||
order: 5
|
|
||||||
---
|
|
||||||
|
|
||||||
# heatmapLayer
|
|
||||||
|
|
||||||
### 简介
|
|
||||||
|
|
||||||
热力图图层,包含三种类型的,
|
|
||||||
|
|
||||||
- 方格热力图
|
|
||||||
|
|
||||||
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
|
||||||
|
|
||||||
- 六边形热力图
|
|
||||||
|
|
||||||
将一组点数据按照等大小的六边形网格进行聚合,一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
|
||||||
|
|
||||||
- 经典热力图
|
|
||||||
|
|
||||||
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理,使用之前需要在 source 方法设置数据聚合方法
|
|
||||||
|
|
||||||
### source
|
|
||||||
|
|
||||||
热力图只支持点数据作为数据源
|
|
||||||
|
|
||||||
布局方法 通过 source 的 tansforms 属性配置
|
|
||||||
|
|
||||||
- type 数据聚合类型 grid、hexagon
|
|
||||||
- size 网格半径 单位 米
|
|
||||||
- field 聚合字段
|
|
||||||
- method 聚合方法 count,max,min,sum,mean5 个统计维度
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
|
|
||||||
layer.source(data, {
|
|
||||||
parser: {
|
|
||||||
type: 'csv',
|
|
||||||
x: 'lng',
|
|
||||||
y: 'lat'
|
|
||||||
},
|
|
||||||
transforms:[
|
|
||||||
{
|
|
||||||
type: 'grid',
|
|
||||||
size: 15000,
|
|
||||||
field:'v',
|
|
||||||
method:'sum'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### shape
|
|
||||||
|
|
||||||
不同类型热力图 shape 支持
|
|
||||||
|
|
||||||
| | 2D | 3d |
|
|
||||||
| ------------ | ------------------------------ | ------------------------------------------------- |
|
|
||||||
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
|
|
||||||
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
|
|
||||||
| 普通热力图 | heatmap | heatmap |
|
|
||||||
|
|
||||||
热力图布局下只 shape 方法只支持常量的可视化。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
HeatmapLayer.shape('square');
|
|
||||||
HeatmapLayer.shape('hexagon');
|
|
||||||
// 默认类型可以不设置
|
|
||||||
```
|
|
||||||
|
|
||||||
### size
|
|
||||||
|
|
||||||
当前版本 shape 为 grid,hexagon 不需要设置 size 映射
|
|
||||||
|
|
||||||
default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
|
|
||||||
|
|
||||||
**size(field,values) **
|
|
||||||
|
|
||||||
- field: 热力图权重字段
|
|
||||||
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
HeatmapLayer.size('field', [0, 1]);
|
|
||||||
```
|
|
||||||
|
|
||||||
### color
|
|
||||||
|
|
||||||
default heatMap 类型不需设置 color 映射
|
|
||||||
|
|
||||||
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
|
|
||||||
|
|
||||||
### style
|
|
||||||
|
|
||||||
grid hexagon 可以通过 style 设置透明度
|
|
||||||
|
|
||||||
default 热力图需要通过 style 配置参数热力图参数
|
|
||||||
|
|
||||||
- intensity 全局热力权重 推荐权重范围 1-5
|
|
||||||
- radius 热力半径,单位像素
|
|
||||||
- rampColors 色带参数
|
|
||||||
- colors 颜色数组
|
|
||||||
- positions 数据区间
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
HeatmapLayer.style({
|
|
||||||
intensity: 3,
|
|
||||||
radius: 20,
|
|
||||||
rampColors: {
|
|
||||||
colors: [
|
|
||||||
'rgba(33,102,172,0.0)',
|
|
||||||
'rgb(103,169,207)',
|
|
||||||
'rgb(209,229,240)',
|
|
||||||
'rgb(253,219,199)',
|
|
||||||
'rgb(239,138,98)',
|
|
||||||
'rgb(178,24,43,1.0)',
|
|
||||||
],
|
|
||||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### 完整代码示例
|
|
||||||
|
|
||||||
#### 普通热力图
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
|
|
||||||
|
|
||||||
HeatmapLayer({
|
|
||||||
zIndex: 2,
|
|
||||||
})
|
|
||||||
.source(data)
|
|
||||||
.size('mag', [0, 1]) // weight映射通道
|
|
||||||
.style({
|
|
||||||
intensity: 3,
|
|
||||||
radius: 20,
|
|
||||||
rampColors: {
|
|
||||||
colors: [
|
|
||||||
'rgba(33,102,172,0.0)',
|
|
||||||
'rgb(103,169,207)',
|
|
||||||
'rgb(209,229,240)',
|
|
||||||
'rgb(253,219,199)',
|
|
||||||
'rgb(239,138,98)',
|
|
||||||
'rgb(178,24,43,1.0)',
|
|
||||||
],
|
|
||||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 网格热力图
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var layer = scene
|
|
||||||
.HeatmapLayer({
|
|
||||||
zIndex: 2,
|
|
||||||
})
|
|
||||||
.source(data, {
|
|
||||||
parser: {
|
|
||||||
type: 'csv',
|
|
||||||
x: 'lng',
|
|
||||||
y: 'lat',
|
|
||||||
},
|
|
||||||
transforms: [
|
|
||||||
{
|
|
||||||
type: 'grid',
|
|
||||||
size: 15000,
|
|
||||||
field: 'v',
|
|
||||||
method: 'sum',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})
|
|
||||||
.shape('grid')
|
|
||||||
.style({
|
|
||||||
coverage: 0.8,
|
|
||||||
})
|
|
||||||
.color('count', [
|
|
||||||
'#002466',
|
|
||||||
'#105CB3',
|
|
||||||
'#2894E0',
|
|
||||||
'#CFF6FF',
|
|
||||||
'#FFF5B8',
|
|
||||||
'#FFAB5C',
|
|
||||||
'#F27049',
|
|
||||||
'#730D1C',
|
|
||||||
]);
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 六边形热力图
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var layer = scene
|
|
||||||
.HeatmapLayer({
|
|
||||||
zIndex: 2,
|
|
||||||
})
|
|
||||||
.souce(data, {
|
|
||||||
parser: {
|
|
||||||
type: 'csv',
|
|
||||||
x: lng,
|
|
||||||
y: lat,
|
|
||||||
},
|
|
||||||
transforms: [
|
|
||||||
{
|
|
||||||
type: 'hexgon',
|
|
||||||
size: 1500,
|
|
||||||
field: 'count',
|
|
||||||
operation: 'sum',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})
|
|
||||||
.shape('hexgon')
|
|
||||||
.size(1000)
|
|
||||||
.color('sum')
|
|
||||||
.style({
|
|
||||||
coverage: 0.8,
|
|
||||||
});
|
|
||||||
render();
|
|
||||||
```
|
|
|
@ -1,219 +0,0 @@
|
||||||
---
|
|
||||||
title: HeatmapLayer
|
|
||||||
order: 5
|
|
||||||
---
|
|
||||||
|
|
||||||
# heatmapLayer
|
|
||||||
|
|
||||||
### 简介
|
|
||||||
|
|
||||||
热力图图层,包含三种类型的,
|
|
||||||
|
|
||||||
- 方格热力图
|
|
||||||
|
|
||||||
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
|
||||||
|
|
||||||
- 六边形热力图
|
|
||||||
|
|
||||||
将一组点数据按照等大小的六边形网格进行聚合,一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
|
||||||
|
|
||||||
- 经典热力图
|
|
||||||
|
|
||||||
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理,使用之前需要在 source 方法设置数据聚合方法
|
|
||||||
|
|
||||||
### source
|
|
||||||
|
|
||||||
热力图只支持点数据作为数据源
|
|
||||||
|
|
||||||
布局方法 通过 source 的 tansforms 属性配置
|
|
||||||
|
|
||||||
- type 数据聚合类型 grid、hexagon
|
|
||||||
- size 网格半径 单位 米
|
|
||||||
- field 聚合字段
|
|
||||||
- method 聚合方法 count,max,min,sum,mean5 个统计维度
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
|
|
||||||
layer.source(data, {
|
|
||||||
parser: {
|
|
||||||
type: 'csv',
|
|
||||||
x: 'lng',
|
|
||||||
y: 'lat'
|
|
||||||
},
|
|
||||||
transforms:[
|
|
||||||
{
|
|
||||||
type: 'grid',
|
|
||||||
size: 15000,
|
|
||||||
field:'v',
|
|
||||||
method:'sum'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### shape
|
|
||||||
|
|
||||||
不同类型热力图 shape 支持
|
|
||||||
|
|
||||||
| | 2D | 3d |
|
|
||||||
| ------------ | ------------------------------ | ------------------------------------------------- |
|
|
||||||
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
|
|
||||||
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
|
|
||||||
| 普通热力图 | heatmap | heatmap |
|
|
||||||
|
|
||||||
热力图布局下只 shape 方法只支持常量的可视化。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
HeatmapLayer.shape('square');
|
|
||||||
HeatmapLayer.shape('hexagon');
|
|
||||||
// 默认类型可以不设置
|
|
||||||
```
|
|
||||||
|
|
||||||
### size
|
|
||||||
|
|
||||||
当前版本 shape 为 grid,hexagon 不需要设置 size 映射
|
|
||||||
|
|
||||||
default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
|
|
||||||
|
|
||||||
**size(field,values) **
|
|
||||||
|
|
||||||
- field: 热力图权重字段
|
|
||||||
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
HeatmapLayer.size('field', [0, 1]);
|
|
||||||
```
|
|
||||||
|
|
||||||
### color
|
|
||||||
|
|
||||||
default heatMap 类型不需设置 color 映射
|
|
||||||
|
|
||||||
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
|
|
||||||
|
|
||||||
### style
|
|
||||||
|
|
||||||
grid hexagon 可以通过 style 设置透明度
|
|
||||||
|
|
||||||
default 热力图需要通过 style 配置参数热力图参数
|
|
||||||
|
|
||||||
- intensity 全局热力权重 推荐权重范围 1-5
|
|
||||||
- radius 热力半径,单位像素
|
|
||||||
- rampColors 色带参数
|
|
||||||
- colors 颜色数组
|
|
||||||
- positions 数据区间
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
HeatmapLayer.style({
|
|
||||||
intensity: 3,
|
|
||||||
radius: 20,
|
|
||||||
rampColors: {
|
|
||||||
colors: [
|
|
||||||
'rgba(33,102,172,0.0)',
|
|
||||||
'rgb(103,169,207)',
|
|
||||||
'rgb(209,229,240)',
|
|
||||||
'rgb(253,219,199)',
|
|
||||||
'rgb(239,138,98)',
|
|
||||||
'rgb(178,24,43,1.0)',
|
|
||||||
],
|
|
||||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### 完整代码示例
|
|
||||||
|
|
||||||
#### 普通热力图
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
|
|
||||||
|
|
||||||
HeatmapLayer({
|
|
||||||
zIndex: 2,
|
|
||||||
})
|
|
||||||
.source(data)
|
|
||||||
.size('mag', [0, 1]) // weight映射通道
|
|
||||||
.style({
|
|
||||||
intensity: 3,
|
|
||||||
radius: 20,
|
|
||||||
rampColors: {
|
|
||||||
colors: [
|
|
||||||
'rgba(33,102,172,0.0)',
|
|
||||||
'rgb(103,169,207)',
|
|
||||||
'rgb(209,229,240)',
|
|
||||||
'rgb(253,219,199)',
|
|
||||||
'rgb(239,138,98)',
|
|
||||||
'rgb(178,24,43,1.0)',
|
|
||||||
],
|
|
||||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 网格热力图
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var layer = scene
|
|
||||||
.HeatmapLayer({
|
|
||||||
zIndex: 2,
|
|
||||||
})
|
|
||||||
.source(data, {
|
|
||||||
parser: {
|
|
||||||
type: 'csv',
|
|
||||||
x: 'lng',
|
|
||||||
y: 'lat',
|
|
||||||
},
|
|
||||||
transforms: [
|
|
||||||
{
|
|
||||||
type: 'grid',
|
|
||||||
size: 15000,
|
|
||||||
field: 'v',
|
|
||||||
method: 'sum',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})
|
|
||||||
.shape('grid')
|
|
||||||
.style({
|
|
||||||
coverage: 0.8,
|
|
||||||
})
|
|
||||||
.color('count', [
|
|
||||||
'#002466',
|
|
||||||
'#105CB3',
|
|
||||||
'#2894E0',
|
|
||||||
'#CFF6FF',
|
|
||||||
'#FFF5B8',
|
|
||||||
'#FFAB5C',
|
|
||||||
'#F27049',
|
|
||||||
'#730D1C',
|
|
||||||
]);
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 六边形热力图
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var layer = scene
|
|
||||||
.HeatmapLayer({
|
|
||||||
zIndex: 2,
|
|
||||||
})
|
|
||||||
.souce(data, {
|
|
||||||
parser: {
|
|
||||||
type: 'csv',
|
|
||||||
x: lng,
|
|
||||||
y: lat,
|
|
||||||
},
|
|
||||||
transforms: [
|
|
||||||
{
|
|
||||||
type: 'hexgon',
|
|
||||||
size: 1500,
|
|
||||||
field: 'count',
|
|
||||||
operation: 'sum',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})
|
|
||||||
.shape('hexgon')
|
|
||||||
.size(1000)
|
|
||||||
.color('sum')
|
|
||||||
.style({
|
|
||||||
coverage: 0.8,
|
|
||||||
});
|
|
||||||
render();
|
|
||||||
```
|
|
|
@ -0,0 +1,161 @@
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: GridHeatMapLayer
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { HeatMapLayer } from '@antv/l7';
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## source
|
||||||
|
网格数据只支持点数据作为数据源,数据格式支持csv、json、geojson.
|
||||||
|
|
||||||
|
#### 设置网格聚合参数
|
||||||
|
|
||||||
|
布局方法 通过 source 的 tansforms 属性配置
|
||||||
|
|
||||||
|
- type 数据聚合类型 grid
|
||||||
|
- size 网格半径 单位 米
|
||||||
|
- field 聚合字段
|
||||||
|
- method 聚合方法 count,max,min,sum,mean 5个统计维度
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat'
|
||||||
|
},
|
||||||
|
transforms:[
|
||||||
|
{
|
||||||
|
type: 'grid',
|
||||||
|
size: 15000,
|
||||||
|
field:'v',
|
||||||
|
method:'sum'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
```
|
||||||
|
## shape
|
||||||
|
|
||||||
|
网格热力图虽然是以标准四边形网格进行数据聚合,但是展示效果上可以设置为其形状,形状只支持常量
|
||||||
|
|
||||||
|
### 2d
|
||||||
|
|
||||||
|
- circle,
|
||||||
|
- triangle
|
||||||
|
- square
|
||||||
|
- hexagon
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.shape('circle');
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3d
|
||||||
|
|
||||||
|
- cylinder
|
||||||
|
- triangleColumn
|
||||||
|
- hexagonColumn
|
||||||
|
- squareColumn,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('cylinder');
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
### 2D shape
|
||||||
|
|
||||||
|
不需要设置size方法
|
||||||
|
|
||||||
|
### 3D 图形
|
||||||
|
|
||||||
|
size 表示高度, 支持常量和数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size(10);// 常量
|
||||||
|
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||||
|
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||||
|
|
||||||
|
```
|
||||||
|
### color
|
||||||
|
|
||||||
|
同layer [color方法](../layer/#color)
|
||||||
|
|
||||||
|
### style
|
||||||
|
|
||||||
|
- coverage 网格覆盖度 0 - 1
|
||||||
|
- angle 网格旋转角度 0 - 360
|
||||||
|
- opacity 透明度 0 - 1.0
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.style({
|
||||||
|
coverage: 0.9,
|
||||||
|
angle: 0,
|
||||||
|
opacity: 1.0
|
||||||
|
});
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## 完整实例代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const layer = new HeatmapLayer({})
|
||||||
|
.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat'
|
||||||
|
},
|
||||||
|
transforms: [
|
||||||
|
{
|
||||||
|
type: 'grid',
|
||||||
|
size: 20000,
|
||||||
|
field: 'v',
|
||||||
|
method: 'sum'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.shape('square')
|
||||||
|
.style({
|
||||||
|
coverage: 1,
|
||||||
|
angle: 0
|
||||||
|
})
|
||||||
|
.color(
|
||||||
|
'count',
|
||||||
|
[
|
||||||
|
'#0B0030',
|
||||||
|
'#100243',
|
||||||
|
'#100243',
|
||||||
|
'#1B048B',
|
||||||
|
'#051FB7',
|
||||||
|
'#0350C1',
|
||||||
|
'#0350C1',
|
||||||
|
'#0072C4',
|
||||||
|
'#0796D3',
|
||||||
|
'#2BA9DF',
|
||||||
|
'#30C7C4',
|
||||||
|
'#6BD5A0',
|
||||||
|
'#A7ECB2',
|
||||||
|
'#D0F4CA'
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
scene.addLayer(layer);
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,154 @@
|
||||||
|
---
|
||||||
|
title: 网格热力图
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
将一组点数据按照等大小的正方形网格进行聚合,一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
```javascript
|
||||||
|
import { HeatMapLayer } from '@antv/l7';
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## source
|
||||||
|
网格数据只支持点数据作为数据源,数据格式支持csv、json、geojson.
|
||||||
|
|
||||||
|
#### 设置网格聚合参数
|
||||||
|
|
||||||
|
布局方法 通过 source 的 tansforms 属性配置
|
||||||
|
|
||||||
|
- type 数据聚合类型 grid
|
||||||
|
- size 网格半径 单位 米
|
||||||
|
- field 聚合字段
|
||||||
|
- method 聚合方法 count,max,min,sum,mean 5个统计维度
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat'
|
||||||
|
},
|
||||||
|
transforms:[
|
||||||
|
{
|
||||||
|
type: 'grid',
|
||||||
|
size: 15000,
|
||||||
|
field:'v',
|
||||||
|
method:'sum'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
## shape
|
||||||
|
|
||||||
|
网格热力图虽然是以标准四边形网格进行数据聚合,但是展示效果上可以设置为其形状,形状只支持常量
|
||||||
|
|
||||||
|
### 2d
|
||||||
|
|
||||||
|
- circle,
|
||||||
|
- triangle
|
||||||
|
- square
|
||||||
|
- heaxgon
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('circle');
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3d
|
||||||
|
|
||||||
|
- cylinder
|
||||||
|
- triangleColumn
|
||||||
|
- hexagonColumn
|
||||||
|
- squareColumn,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('cylinder');
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
### 2D shape
|
||||||
|
|
||||||
|
不需要设置size方法
|
||||||
|
|
||||||
|
### 3D 图形
|
||||||
|
|
||||||
|
size 表示高度, 支持常量和数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size(10);// 常量
|
||||||
|
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||||
|
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||||
|
|
||||||
|
```
|
||||||
|
## color
|
||||||
|
|
||||||
|
同layer color方法
|
||||||
|
|
||||||
|
## style
|
||||||
|
|
||||||
|
- coverage 网格覆盖度 0 - 1
|
||||||
|
- angle 网格旋转角度 0 - 360
|
||||||
|
- opacity 透明度 0 - 1.0
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.style({
|
||||||
|
coverage: 0.9,
|
||||||
|
angle: 0,
|
||||||
|
opacity: 1.0
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
## 完整实例代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const layer = new HeatmapLayer({})
|
||||||
|
.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat'
|
||||||
|
},
|
||||||
|
transforms: [
|
||||||
|
{
|
||||||
|
type: 'grid',
|
||||||
|
size: 20000,
|
||||||
|
field: 'v',
|
||||||
|
method: 'sum'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.shape('square')
|
||||||
|
.style({
|
||||||
|
coverage: 1,
|
||||||
|
angle: 0
|
||||||
|
})
|
||||||
|
.color(
|
||||||
|
'count',
|
||||||
|
[
|
||||||
|
'#0B0030',
|
||||||
|
'#100243',
|
||||||
|
'#100243',
|
||||||
|
'#1B048B',
|
||||||
|
'#051FB7',
|
||||||
|
'#0350C1',
|
||||||
|
'#0350C1',
|
||||||
|
'#0072C4',
|
||||||
|
'#0796D3',
|
||||||
|
'#2BA9DF',
|
||||||
|
'#30C7C4',
|
||||||
|
'#6BD5A0',
|
||||||
|
'#A7ECB2',
|
||||||
|
'#D0F4CA'
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
scene.addLayer(layer);
|
||||||
|
```
|
||||||
|
|
|
@ -0,0 +1,135 @@
|
||||||
|
---
|
||||||
|
title: Hexagon HeatMap
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
将一组点数据按照等大小的六边形网格进行聚合,一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
```javascript
|
||||||
|
import { HeatMapLayer } from '@antv/l7';
|
||||||
|
```
|
||||||
|
## source
|
||||||
|
网格数据只支持点数据作为数据源,数据格式支持csv、json、geojson.
|
||||||
|
|
||||||
|
#### 设置网格聚合参数
|
||||||
|
|
||||||
|
布局方法 通过 source 的 tansforms 属性配置
|
||||||
|
|
||||||
|
- type 数据聚合类型 hexagon
|
||||||
|
- size 网格半径 单位 米
|
||||||
|
- field 聚合字段
|
||||||
|
- method 聚合方法 count,max,min,sum,mean 5个统计维度
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat'
|
||||||
|
},
|
||||||
|
transforms:[
|
||||||
|
{
|
||||||
|
type: 'hexagon',
|
||||||
|
size: 15000,
|
||||||
|
field:'v',
|
||||||
|
method:'sum'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
## shape
|
||||||
|
|
||||||
|
网格热力图虽然是以标准四边形网格进行数据聚合,但是展示效果上可以设置为其形状,形状只支持常量
|
||||||
|
|
||||||
|
### 2d
|
||||||
|
|
||||||
|
- circle,
|
||||||
|
- triangle
|
||||||
|
- square
|
||||||
|
- heaxgon
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('circle');
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3d
|
||||||
|
|
||||||
|
- cylinder
|
||||||
|
- triangleColumn
|
||||||
|
- hexagonColumn
|
||||||
|
- squareColumn,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('cylinder');
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
### 2D shape
|
||||||
|
|
||||||
|
不需要设置size方法
|
||||||
|
|
||||||
|
### 3D 图形
|
||||||
|
|
||||||
|
size 表示高度, 支持常量和数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size(10);// 常量
|
||||||
|
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||||
|
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||||
|
|
||||||
|
```
|
||||||
|
## color
|
||||||
|
|
||||||
|
同layer color方法
|
||||||
|
|
||||||
|
## style
|
||||||
|
|
||||||
|
- coverage 网格覆盖度 0 - 1
|
||||||
|
- angle 网格旋转角度 0 - 360
|
||||||
|
- opacity 透明度 0 - 1.0
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.style({
|
||||||
|
coverage: 0.9,
|
||||||
|
angle: 0,
|
||||||
|
opacity: 1.0
|
||||||
|
});
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 完整代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const layer =
|
||||||
|
new HeatmapLayer({
|
||||||
|
zIndex: 2,
|
||||||
|
})
|
||||||
|
.souce(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: lng,
|
||||||
|
y: lat,
|
||||||
|
},
|
||||||
|
transforms: [
|
||||||
|
{
|
||||||
|
type: 'hexagon',
|
||||||
|
size: 1500,
|
||||||
|
field: 'count',
|
||||||
|
operation: 'sum',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
.shape('hexagon')
|
||||||
|
.color('sum')
|
||||||
|
.style({
|
||||||
|
coverage: 0.8,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,138 @@
|
||||||
|
---
|
||||||
|
title: 蜂窝热力图
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
将一组点数据按照等大小的六边形网格进行聚合,一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { HeatMapLayer } from '@antv/l7';
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## source
|
||||||
|
|
||||||
|
网格数据只支持点数据作为数据源,数据格式支持csv、json、geojson.
|
||||||
|
|
||||||
|
#### 设置网格聚合参数
|
||||||
|
|
||||||
|
布局方法 通过 source 的 tansforms 属性配置
|
||||||
|
|
||||||
|
- type 数据聚合类型 hexagon
|
||||||
|
- size 网格半径 单位 米
|
||||||
|
- field 聚合字段
|
||||||
|
- method 聚合方法 count,max,min,sum,mean 5个统计维度
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat'
|
||||||
|
},
|
||||||
|
transforms:[
|
||||||
|
{
|
||||||
|
type: 'hexagon',
|
||||||
|
size: 15000,
|
||||||
|
field:'v',
|
||||||
|
method:'sum'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
## shape
|
||||||
|
|
||||||
|
网格热力图虽然是以标准四边形网格进行数据聚合,但是展示效果上可以设置为其形状,形状只支持常量
|
||||||
|
|
||||||
|
### 2d
|
||||||
|
|
||||||
|
- circle,
|
||||||
|
- triangle
|
||||||
|
- square
|
||||||
|
- heaxgon
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('circle');
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3d
|
||||||
|
|
||||||
|
- cylinder
|
||||||
|
- triangleColumn
|
||||||
|
- hexagonColumn
|
||||||
|
- squareColumn,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('cylinder');
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
### 2D shape
|
||||||
|
|
||||||
|
不需要设置size方法
|
||||||
|
|
||||||
|
### 3D 图形
|
||||||
|
|
||||||
|
size 表示高度, 支持常量和数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size(10);// 常量
|
||||||
|
layer.size('value', [10,50]);// 根据value 字段映射大小
|
||||||
|
layer.size('value', (value)=>{}) // 回调函数设置高度
|
||||||
|
|
||||||
|
```
|
||||||
|
## color
|
||||||
|
|
||||||
|
同layer color方法
|
||||||
|
|
||||||
|
## style
|
||||||
|
|
||||||
|
- coverage 网格覆盖度 0 - 1
|
||||||
|
- angle 网格旋转角度 0 - 360
|
||||||
|
- opacity 透明度 0 - 1.0
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.style({
|
||||||
|
coverage: 0.9,
|
||||||
|
angle: 0,
|
||||||
|
opacity: 1.0
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 完整代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const layer =
|
||||||
|
new HeatmapLayer({
|
||||||
|
zIndex: 2,
|
||||||
|
})
|
||||||
|
.souce(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: lng,
|
||||||
|
y: lat,
|
||||||
|
},
|
||||||
|
transforms: [
|
||||||
|
{
|
||||||
|
type: 'hexagon',
|
||||||
|
size: 1500,
|
||||||
|
field: 'count',
|
||||||
|
operation: 'sum',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
.shape('hexagon')
|
||||||
|
.color('sum')
|
||||||
|
.style({
|
||||||
|
coverage: 0.8,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,69 @@
|
||||||
|
---
|
||||||
|
title: 经典热力图
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { HeatMapLayer } from '@antv/l7';
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## shape
|
||||||
|
常量 heatmap
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('heatmap');
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
- field: 热力图权重字段
|
||||||
|
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.size('weight', [0,1])
|
||||||
|
|
||||||
|
```
|
||||||
|
## color
|
||||||
|
|
||||||
|
heatmap 需要设置color 方法,样式通过style 设置
|
||||||
|
|
||||||
|
## style
|
||||||
|
|
||||||
|
- intensity 全局热力权重 推荐权重范围 1-5
|
||||||
|
- radius 热力半径,单位像素
|
||||||
|
- rampColors 色带参数
|
||||||
|
- colors 颜色数组
|
||||||
|
- positions 数据区间
|
||||||
|
|
||||||
|
⚠️ color, position 的长度要相同
|
||||||
|
|
||||||
|
## 完整代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
heatmapLayer({
|
||||||
|
zIndex: 2,
|
||||||
|
})
|
||||||
|
.source(data)
|
||||||
|
.size('mag', [0, 1]) // weight映射通道
|
||||||
|
.style({
|
||||||
|
intensity: 3,
|
||||||
|
radius: 20,
|
||||||
|
rampColors: {
|
||||||
|
colors: [
|
||||||
|
'rgba(33,102,172,0.0)',
|
||||||
|
'rgb(103,169,207)',
|
||||||
|
'rgb(209,229,240)',
|
||||||
|
'rgb(253,219,199)',
|
||||||
|
'rgb(239,138,98)',
|
||||||
|
'rgb(178,24,43,1.0)',
|
||||||
|
],
|
||||||
|
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
```
|
|
@ -0,0 +1,67 @@
|
||||||
|
---
|
||||||
|
title: 经典热力图
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { HeatMapLayer } from '@antv/l7';
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## shape
|
||||||
|
常量 heatmap
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('heatmap');
|
||||||
|
```
|
||||||
|
|
||||||
|
## size
|
||||||
|
|
||||||
|
- field: 热力图权重字段
|
||||||
|
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.size('weight', [0,1])
|
||||||
|
|
||||||
|
```
|
||||||
|
## color
|
||||||
|
|
||||||
|
heatmap 需要设置color 方法,样式通过style 设置
|
||||||
|
|
||||||
|
## style
|
||||||
|
|
||||||
|
- intensity 全局热力权重 推荐权重范围 1-5
|
||||||
|
- radius 热力半径,单位像素
|
||||||
|
- rampColors 色带参数
|
||||||
|
- colors 颜色数组
|
||||||
|
- positions 数据区间
|
||||||
|
|
||||||
|
⚠️ color, position 的长度要相同
|
||||||
|
|
||||||
|
## 完整代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
heatmapLayer()
|
||||||
|
.source(data)
|
||||||
|
.size('mag', [0, 1]) // weight映射通道
|
||||||
|
.style({
|
||||||
|
intensity: 3,
|
||||||
|
radius: 20,
|
||||||
|
rampColors: {
|
||||||
|
colors: [
|
||||||
|
'rgba(33,102,172,0.0)',
|
||||||
|
'rgb(103,169,207)',
|
||||||
|
'rgb(209,229,240)',
|
||||||
|
'rgb(253,219,199)',
|
||||||
|
'rgb(239,138,98)',
|
||||||
|
'rgb(178,24,43,1.0)',
|
||||||
|
],
|
||||||
|
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
```
|
|
@ -3,12 +3,16 @@ title: ImageLayer
|
||||||
order: 5
|
order: 5
|
||||||
---
|
---
|
||||||
|
|
||||||
# ImageLayer
|
|
||||||
|
|
||||||
## 简介
|
## 简介
|
||||||
|
|
||||||
将图片添加到地图上,需要指定图片的经纬度范围
|
将图片添加到地图上,需要指定图片的经纬度范围
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { ImageLayer } from '@antv/l7';
|
||||||
|
```
|
||||||
|
|
||||||
### 代码示例
|
### 代码示例
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
|
@ -1,14 +1,18 @@
|
||||||
---
|
---
|
||||||
title: ImageLayer
|
title: 图片图层
|
||||||
order: 5
|
order: 5
|
||||||
---
|
---
|
||||||
|
|
||||||
# ImageLayer
|
|
||||||
|
|
||||||
## 简介
|
## 简介
|
||||||
|
|
||||||
将图片添加到地图上,需要指定图片的经纬度范围
|
将图片添加到地图上,需要指定图片的经纬度范围
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { ImageLayer } from '@antv/l7';
|
||||||
|
```
|
||||||
|
|
||||||
### 代码示例
|
### 代码示例
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
|
@ -1,62 +1,63 @@
|
||||||
---
|
---
|
||||||
title: Map Layer
|
title: Base Layer
|
||||||
order: 0
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
# Layer
|
|
||||||
|
|
||||||
## 简介
|
## 简介
|
||||||
|
|
||||||
L7 Layer 接口设计遵循图形语法,在可视表达上
|
L7 Layer 接口设计遵循图形语法,所有图层都继承于该基类。
|
||||||
|
|
||||||
语法示例
|
语法示例
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
new Layer(option)
|
const layer = new Layer(option)
|
||||||
.source()
|
.source()
|
||||||
.color()
|
.color()
|
||||||
.size()
|
.size()
|
||||||
.shape()
|
.shape()
|
||||||
.style();
|
.style();
|
||||||
|
|
||||||
|
scene.addLayer(layer);
|
||||||
```
|
```
|
||||||
|
|
||||||
## 构造函数
|
## 构造函数
|
||||||
|
|
||||||
## 配置项
|
## 配置项
|
||||||
|
|
||||||
### visable
|
### name
|
||||||
|
|
||||||
|
设置图层名称,可根据 name 获取 layer;
|
||||||
|
|
||||||
|
### visible
|
||||||
|
|
||||||
图层是否可见 {bool } default true
|
图层是否可见 {bool } default true
|
||||||
|
|
||||||
### zIndex
|
### zIndex
|
||||||
|
|
||||||
图层绘制顺序,数值越小优先绘制,可以控制图层绘制的上下层级 {int} default 0
|
图层绘制顺序,数值大绘制在上层,可以控制图层绘制的上下层级 {int} default 0
|
||||||
|
|
||||||
### minZoom
|
### minZoom
|
||||||
|
|
||||||
图层显示最小缩放等级,(0-18) {number} default 0
|
图层显示最小缩放等级,(0-18) {number} Mapbox (0-24) 高德 (3-18)
|
||||||
|
|
||||||
### maxZoom
|
### maxZoom
|
||||||
|
|
||||||
图层显示最大缩放等级 (0-18) {number} default 18
|
图层显示最大缩放等级 (0-18) {number} Mapbox (0-24) 高德 (3-18)
|
||||||
|
|
||||||
## 鼠标事件
|
### autoFit
|
||||||
|
|
||||||
⚠️ beta 版当前不支持,正式版会支持
|
layer 初始化完成之后,是否自动缩放到图层范围 {bool } default false
|
||||||
|
|
||||||
```javascript
|
### blend
|
||||||
layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
|
|
||||||
layer.on('dblclick', (ev) => {}); // 鼠标左键双击图层事件
|
|
||||||
layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
|
|
||||||
layer.on('mouseover', (ev) => {}); // 鼠标移入图层要素内时触发
|
|
||||||
layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
|
|
||||||
layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
|
|
||||||
layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
|
|
||||||
layer.on('mouseleave', (ev) => {}); // 鼠标离开图层要素
|
|
||||||
layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
|
|
||||||
```
|
|
||||||
|
|
||||||
## 方法
|
图层元素混合效果
|
||||||
|
|
||||||
|
- normal 正常效果 默认
|
||||||
|
- additive 叠加模式
|
||||||
|
- subtractive 相减模式
|
||||||
|
- max 最大值
|
||||||
|
|
||||||
|
# 方法
|
||||||
|
|
||||||
### source
|
### source
|
||||||
|
|
||||||
|
@ -70,7 +71,7 @@ layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
|
||||||
- parser 数据解析,默认是解析层 geojson
|
- parser 数据解析,默认是解析层 geojson
|
||||||
- transforms [transform,transform ] 数据处理转换 可设置多个
|
- transforms [transform,transform ] 数据处理转换 可设置多个
|
||||||
|
|
||||||
parser 和 transforms [见 source 文档](https://www.yuque.com/antv/l7/source)
|
parser 和 transforms [见 source 文档](../source/source)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.source(data, {
|
layer.source(data, {
|
||||||
|
@ -101,39 +102,57 @@ layer.source(data, {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
###
|
|
||||||
|
|
||||||
### scale
|
### scale
|
||||||
|
|
||||||
cscle('field', scaleConfig)
|
设置数据字段映射方法
|
||||||
|
|
||||||
(field: string, scaleConfig: object)
|
|
||||||
|
|
||||||
为指定的数据字段进行列定义,返回 layer 实例。
|
|
||||||
|
|
||||||
- `field` 字段名。
|
- `field` 字段名。
|
||||||
|
|
||||||
- `scaleConfig` 列定义配置,对象类型,可配置的属性如下:
|
- `scaleConfig` 列定义配置,对象类型,可配置的属性如下:
|
||||||
|
|
||||||
|
#### scale 类型
|
||||||
|
|
||||||
|
**连续型**
|
||||||
|
|
||||||
|
- linear 线性
|
||||||
|
- log
|
||||||
|
- pow 指数型
|
||||||
|
|
||||||
|
**连续分类型**
|
||||||
|
|
||||||
|
- quantile 等分位
|
||||||
|
- quantize 等间距
|
||||||
|
|
||||||
|
**枚举型**
|
||||||
|
|
||||||
|
- cat 枚举
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
{
|
layer.scale('name', {
|
||||||
type: 'linear'; // 指定数据类型,可声明的类型为:identity、linear、cat、time、timeCat、log、pow, quantile,quantize
|
type: 'cat',
|
||||||
}
|
});
|
||||||
|
|
||||||
|
// 设置多个scale
|
||||||
|
|
||||||
|
// 字段名为 key, value 为scale配置项
|
||||||
|
|
||||||
|
layer.scale({
|
||||||
|
name: {
|
||||||
|
type: 'cat',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: 'linear',
|
||||||
|
},
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 视觉编码方法
|
||||||
|
|
||||||
|
可视化编码是将数据转换为可视形式的过程,L7 目前支持形状,大小,颜色 3 种视觉通道,你可以指定数据字段,为不同要素设置不同的图形属性。
|
||||||
|
|
||||||
### size
|
### size
|
||||||
|
|
||||||
将数据值映射到图形的大小上的方法。
|
将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档
|
||||||
|
|
||||||
**注意:**
|
|
||||||
|
|
||||||
不同图层的 size 的含义有所差别:
|
|
||||||
|
|
||||||
- point 图形的 size 影响点的半径大小和高度;
|
|
||||||
|
|
||||||
- line, arc, path 中的 size 影响线的粗细,和高度;
|
|
||||||
|
|
||||||
- polygon size 影响的是高度
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
pointLayer.size(10); // 常量
|
pointLayer.size(10); // 常量
|
||||||
|
@ -219,7 +238,7 @@ layer.color('white'); // 指定颜色
|
||||||
|
|
||||||
- `colors`: string | array | function
|
- `colors`: string | array | function
|
||||||
|
|
||||||
colors 的参数有以下情况: 如果为空,即未指定颜色的数组,那么使用内置的全局的颜色;如果需要指定颜色,则需要以数组格式传入,那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
|
colors 的参数有以下情况: 如果为空,即未指定颜色的数组,那么使用内置的全局的颜色;如果需要指定颜色,则需要以数组格式传入,那么分类的颜色按照数组中的颜色确定.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.color('name'); // 使用默认的颜色
|
layer.color('name'); // 使用默认的颜色
|
||||||
|
@ -265,24 +284,58 @@ layer.color('gender*age', (gender, age) => {
|
||||||
|
|
||||||
### style
|
### style
|
||||||
|
|
||||||
用于配置几何体显示图像属性目前支持以下属性,其他属性会逐步开放
|
全局设置图形显示属性
|
||||||
|
|
||||||
- fill
|
|
||||||
|
|
||||||
- opacity 设置透明度
|
- opacity 设置透明度
|
||||||
|
|
||||||
- stroke 线填充颜色
|
- stroke 线填充颜色 仅点图层支持
|
||||||
|
|
||||||
- strokeWidth 线的宽度
|
- strokeWidth 线的宽度 仅点图层支持
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.style({
|
layer.style({
|
||||||
fill: 'red',
|
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
stroke: 'white',
|
stroke: 'white',
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 图层更新方法
|
||||||
|
|
||||||
|
如果已经添加了图层,需要修改图层显示样式可以再次调用图形映射方法,然后调用 `scene.render()`更新渲染即可
|
||||||
|
|
||||||
|
### 样式更新
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.color('blue');
|
||||||
|
layer.size(10);
|
||||||
|
layer.style({});
|
||||||
|
scene.render();
|
||||||
|
```
|
||||||
|
|
||||||
|
### setData
|
||||||
|
|
||||||
|
更新 Source 数据
|
||||||
|
|
||||||
|
参数:
|
||||||
|
|
||||||
|
- data 数据
|
||||||
|
- option 默认和初始配置项一致,如果数据格式相同可不设置
|
||||||
|
|
||||||
|
调用 setData 方法会自动更新图层渲染
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setData(data);
|
||||||
|
```
|
||||||
|
|
||||||
|
### setBlend(type)
|
||||||
|
|
||||||
|
设置图层叠加方法
|
||||||
|
参数:
|
||||||
|
|
||||||
|
- type blend 类型
|
||||||
|
|
||||||
|
## 图层控制方法
|
||||||
|
|
||||||
### show
|
### show
|
||||||
|
|
||||||
图层显示
|
图层显示
|
||||||
|
@ -299,6 +352,16 @@ layer.show();
|
||||||
layer.hide();
|
layer.hide();
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### isVisible
|
||||||
|
|
||||||
|
图层是否可见
|
||||||
|
|
||||||
|
return `true | false`
|
||||||
|
|
||||||
|
### setIndex
|
||||||
|
|
||||||
|
设置图层绘制顺序
|
||||||
|
|
||||||
### fitBounds
|
### fitBounds
|
||||||
|
|
||||||
缩放到图层范围
|
缩放到图层范围
|
||||||
|
@ -306,3 +369,215 @@ layer.hide();
|
||||||
```javascript
|
```javascript
|
||||||
layer.fitBounds();
|
layer.fitBounds();
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### setMinZoom
|
||||||
|
|
||||||
|
设置图层最小缩放等级
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
- zoom {number}
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setMinZoom(zoom);
|
||||||
|
```
|
||||||
|
|
||||||
|
### setMaxZoom
|
||||||
|
|
||||||
|
设置图层最大缩放等级
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
- zoom {number}
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setMinZoom(zoom);
|
||||||
|
```
|
||||||
|
|
||||||
|
设置图层最大缩放等级
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
- zoom {number}
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setMinZoom(zoom);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 图层交互方法
|
||||||
|
|
||||||
|
### active
|
||||||
|
|
||||||
|
开启或者关闭 mousehover 元素高亮效果
|
||||||
|
|
||||||
|
参数: activeOption | boolean
|
||||||
|
|
||||||
|
activeOption
|
||||||
|
-color 填充颜色
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 开启 Active 使用默认高亮颜色
|
||||||
|
layer.active(true);
|
||||||
|
|
||||||
|
// 开启 Active 自定义高亮颜色
|
||||||
|
|
||||||
|
layer.active({
|
||||||
|
color: 'red',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关闭高亮效果
|
||||||
|
layer.active(false);
|
||||||
|
```
|
||||||
|
|
||||||
|
### setActive
|
||||||
|
|
||||||
|
根据元素 ID 设置指定元素 hover 高亮
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setActive(id);
|
||||||
|
```
|
||||||
|
|
||||||
|
### select
|
||||||
|
|
||||||
|
开启或者关闭 mouseclick 元素选中高亮效果
|
||||||
|
|
||||||
|
参数: selectOption | boolean
|
||||||
|
|
||||||
|
selectOption
|
||||||
|
-color 填充颜色
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 开启 Active 使用默认高亮颜色
|
||||||
|
layer.select(true);
|
||||||
|
|
||||||
|
// 开启 Active 自定义高亮颜色
|
||||||
|
|
||||||
|
layer.select({
|
||||||
|
color: 'red',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关闭高亮效果
|
||||||
|
layer.select(false);
|
||||||
|
```
|
||||||
|
|
||||||
|
### setSelect
|
||||||
|
|
||||||
|
根据元素 ID 设置指定元素 click 选中 高亮
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setSelect(id);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 鼠标事件
|
||||||
|
|
||||||
|
鼠标事件回调参数 target
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
```
|
||||||
|
|
||||||
|
- x: number 鼠标 在地图位置 x 坐标
|
||||||
|
- y: number 鼠标 在地图位置 y 坐标
|
||||||
|
- type: string 鼠标事件类型
|
||||||
|
- lngLat: 经度度对象 {lng:number, lat: number }; 鼠标所在位置经纬度
|
||||||
|
- feature: any; 数据选中的地理要素信息
|
||||||
|
- featureId: number | null; 数据选中的地理要素的 ID
|
||||||
|
|
||||||
|
### click
|
||||||
|
|
||||||
|
点击事件
|
||||||
|
|
||||||
|
### mousemove
|
||||||
|
|
||||||
|
鼠标移动事件
|
||||||
|
|
||||||
|
### mouseout
|
||||||
|
|
||||||
|
鼠标移除
|
||||||
|
|
||||||
|
### mouseup
|
||||||
|
|
||||||
|
鼠标按下
|
||||||
|
|
||||||
|
### mousedown
|
||||||
|
|
||||||
|
鼠标向下
|
||||||
|
|
||||||
|
### contextmenu
|
||||||
|
|
||||||
|
鼠标右键
|
||||||
|
|
||||||
|
### unclick
|
||||||
|
|
||||||
|
点击未拾取到元素
|
||||||
|
|
||||||
|
### unmousemove
|
||||||
|
|
||||||
|
鼠标移动未拾取到元素
|
||||||
|
|
||||||
|
### unmouseup
|
||||||
|
|
||||||
|
鼠标抬起未拾取到元素
|
||||||
|
|
||||||
|
### unmousedown
|
||||||
|
|
||||||
|
鼠标按下未拾取到元素
|
||||||
|
|
||||||
|
### uncontextmenu
|
||||||
|
|
||||||
|
鼠标右键位拾取到元素
|
||||||
|
|
||||||
|
### unpick
|
||||||
|
|
||||||
|
所有鼠标事件未拾取到
|
||||||
|
|
||||||
|
使用示例
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
|
||||||
|
layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
|
||||||
|
layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
|
||||||
|
layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
|
||||||
|
layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
|
||||||
|
layer.on('contextmenu', (ev) => {}); // 图层要素点击右键菜单
|
||||||
|
|
||||||
|
// 鼠标在图层外的事件
|
||||||
|
layer.on('unclick', (ev) => {}); // 图层外点击
|
||||||
|
layer.on('unmousemove', (ev) => {}); // 图层外移动
|
||||||
|
layer.on('unmouseup', (ev) => {}); // 图层外鼠标抬起
|
||||||
|
layer.on('unmousedown', (ev) => {}); // 图层外单击按下时触发
|
||||||
|
layer.on('uncontextmenu', (ev) => {}); // 图层外点击右键
|
||||||
|
layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件
|
||||||
|
```
|
||||||
|
|
||||||
|
## 图层事件
|
||||||
|
|
||||||
|
### inited
|
||||||
|
|
||||||
|
参数 option
|
||||||
|
|
||||||
|
- target 当前 layer
|
||||||
|
- type 事件类型
|
||||||
|
|
||||||
|
图层初始化完成后触发
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.on('inited', (option) => {});
|
||||||
|
```
|
||||||
|
|
||||||
|
### add
|
||||||
|
|
||||||
|
图层添加到 scene
|
||||||
|
|
||||||
|
参数 option
|
||||||
|
|
||||||
|
- target 当前 layer
|
||||||
|
- type 事件类型
|
||||||
|
|
||||||
|
### remove
|
||||||
|
|
||||||
|
图层移除时触发
|
||||||
|
|
||||||
|
参数 option
|
||||||
|
|
||||||
|
- target 当前 layer
|
||||||
|
- type 事件类型
|
||||||
|
|
|
@ -1,62 +1,63 @@
|
||||||
---
|
---
|
||||||
title: Layer
|
title: 图层基类
|
||||||
order: 0
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
# Layer
|
|
||||||
|
|
||||||
## 简介
|
## 简介
|
||||||
|
|
||||||
L7 Layer 接口设计遵循图形语法,在可视表达上
|
L7 Layer 接口设计遵循图形语法,所有图层都继承于该基类。
|
||||||
|
|
||||||
语法示例
|
语法示例
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
new Layer(option)
|
const layer = new Layer(option)
|
||||||
.source()
|
.source()
|
||||||
.color()
|
.color()
|
||||||
.size()
|
.size()
|
||||||
.shape()
|
.shape()
|
||||||
.style();
|
.style();
|
||||||
|
|
||||||
|
scene.addLayer(layer);
|
||||||
```
|
```
|
||||||
|
|
||||||
## 构造函数
|
## 构造函数
|
||||||
|
|
||||||
## 配置项
|
## 配置项
|
||||||
|
|
||||||
### visable
|
### name
|
||||||
|
|
||||||
|
设置图层名称,可根据 name 获取 layer;
|
||||||
|
|
||||||
|
### visible
|
||||||
|
|
||||||
图层是否可见 {bool } default true
|
图层是否可见 {bool } default true
|
||||||
|
|
||||||
### zIndex
|
### zIndex
|
||||||
|
|
||||||
图层绘制顺序,数值越小优先绘制,可以控制图层绘制的上下层级 {int} default 0
|
图层绘制顺序,数值大绘制在上层,可以控制图层绘制的上下层级 {int} default 0
|
||||||
|
|
||||||
### minZoom
|
### minZoom
|
||||||
|
|
||||||
图层显示最小缩放等级,(0-18) {number} default 0
|
图层显示最小缩放等级,(0-18) {number} Mapbox (0-24) 高德 (3-18)
|
||||||
|
|
||||||
### maxZoom
|
### maxZoom
|
||||||
|
|
||||||
图层显示最大缩放等级 (0-18) {number} default 18
|
图层显示最大缩放等级 (0-18) {number} Mapbox (0-24) 高德 (3-18)
|
||||||
|
|
||||||
## 鼠标事件
|
### autoFit
|
||||||
|
|
||||||
⚠️ beta 版当前不支持,正式版会支持
|
layer 初始化完成之后,是否自动缩放到图层范围 {bool } default false
|
||||||
|
|
||||||
```javascript
|
### blend
|
||||||
layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
|
|
||||||
layer.on('dblclick', (ev) => {}); // 鼠标左键双击图层事件
|
|
||||||
layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
|
|
||||||
layer.on('mouseover', (ev) => {}); // 鼠标移入图层要素内时触发
|
|
||||||
layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
|
|
||||||
layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
|
|
||||||
layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
|
|
||||||
layer.on('mouseleave', (ev) => {}); // 鼠标离开图层要素
|
|
||||||
layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
|
|
||||||
```
|
|
||||||
|
|
||||||
## 方法
|
图层元素混合效果
|
||||||
|
|
||||||
|
- normal 正常效果 默认
|
||||||
|
- additive 叠加模式
|
||||||
|
- subtractive 相减模式
|
||||||
|
- max 最大值
|
||||||
|
|
||||||
|
# 方法
|
||||||
|
|
||||||
### source
|
### source
|
||||||
|
|
||||||
|
@ -70,7 +71,7 @@ layer.on('rightclick', (ev) => {}); // 鼠标右键图层要素
|
||||||
- parser 数据解析,默认是解析层 geojson
|
- parser 数据解析,默认是解析层 geojson
|
||||||
- transforms [transform,transform ] 数据处理转换 可设置多个
|
- transforms [transform,transform ] 数据处理转换 可设置多个
|
||||||
|
|
||||||
parser 和 transforms [见 source 文档](https://www.yuque.com/antv/l7/source)
|
parser 和 transforms [见 source 文档](../source/source)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.source(data, {
|
layer.source(data, {
|
||||||
|
@ -101,39 +102,57 @@ layer.source(data, {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
###
|
|
||||||
|
|
||||||
### scale
|
### scale
|
||||||
|
|
||||||
cscle('field', scaleConfig)
|
设置数据字段映射方法
|
||||||
|
|
||||||
(field: string, scaleConfig: object)
|
|
||||||
|
|
||||||
为指定的数据字段进行列定义,返回 layer 实例。
|
|
||||||
|
|
||||||
- `field` 字段名。
|
- `field` 字段名。
|
||||||
|
|
||||||
- `scaleConfig` 列定义配置,对象类型,可配置的属性如下:
|
- `scaleConfig` 列定义配置,对象类型,可配置的属性如下:
|
||||||
|
|
||||||
|
#### scale 类型
|
||||||
|
|
||||||
|
**连续型**
|
||||||
|
|
||||||
|
- linear 线性
|
||||||
|
- log
|
||||||
|
- pow 指数型
|
||||||
|
|
||||||
|
**连续分类型**
|
||||||
|
|
||||||
|
- quantile 等分位
|
||||||
|
- quantize 等间距
|
||||||
|
|
||||||
|
**枚举型**
|
||||||
|
|
||||||
|
- cat 枚举
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
{
|
layer.scale('name', {
|
||||||
type: 'linear'; // 指定数据类型,可声明的类型为:identity、linear、cat、time、timeCat、log、pow, quantile,quantize
|
type: 'cat',
|
||||||
}
|
});
|
||||||
|
|
||||||
|
// 设置多个scale
|
||||||
|
|
||||||
|
// 字段名为 key, value 为scale配置项
|
||||||
|
|
||||||
|
layer.scale({
|
||||||
|
name: {
|
||||||
|
type: 'cat',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: 'linear',
|
||||||
|
},
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 视觉编码方法
|
||||||
|
|
||||||
|
可视化编码是将数据转换为可视形式的过程,L7 目前支持形状,大小,颜色 3 种视觉通道,你可以指定数据字段,为不同要素设置不同的图形属性。
|
||||||
|
|
||||||
### size
|
### size
|
||||||
|
|
||||||
将数据值映射到图形的大小上的方法。
|
将数据值映射到图形的大小上的方法,具体 size 的表示具体意义可以查看对应图层的文档
|
||||||
|
|
||||||
**注意:**
|
|
||||||
|
|
||||||
不同图层的 size 的含义有所差别:
|
|
||||||
|
|
||||||
- point 图形的 size 影响点的半径大小和高度;
|
|
||||||
|
|
||||||
- line, arc, path 中的 size 影响线的粗细,和高度;
|
|
||||||
|
|
||||||
- polygon size 影响的是高度
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
pointLayer.size(10); // 常量
|
pointLayer.size(10); // 常量
|
||||||
|
@ -219,7 +238,7 @@ layer.color('white'); // 指定颜色
|
||||||
|
|
||||||
- `colors`: string | array | function
|
- `colors`: string | array | function
|
||||||
|
|
||||||
colors 的参数有以下情况: 如果为空,即未指定颜色的数组,那么使用内置的全局的颜色;如果需要指定颜色,则需要以数组格式传入,那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
|
colors 的参数有以下情况: 如果为空,即未指定颜色的数组,那么使用内置的全局的颜色;如果需要指定颜色,则需要以数组格式传入,那么分类的颜色按照数组中的颜色确定。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.color('name'); // 使用默认的颜色
|
layer.color('name'); // 使用默认的颜色
|
||||||
|
@ -265,24 +284,58 @@ layer.color('gender*age', (gender, age) => {
|
||||||
|
|
||||||
### style
|
### style
|
||||||
|
|
||||||
用于配置几何体显示图像属性目前支持以下属性,其他属性会逐步开放
|
全局设置图形显示属性
|
||||||
|
|
||||||
- fill
|
|
||||||
|
|
||||||
- opacity 设置透明度
|
- opacity 设置透明度
|
||||||
|
|
||||||
- stroke 线填充颜色
|
- stroke 线填充颜色 仅点图层支持
|
||||||
|
|
||||||
- strokeWidth 线的宽度
|
- strokeWidth 线的宽度 仅点图层支持
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.style({
|
layer.style({
|
||||||
fill: 'red',
|
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
stroke: 'white',
|
stroke: 'white',
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 图层更新方法
|
||||||
|
|
||||||
|
如果已经添加了图层,需要修改图层显示样式可以再次调用图形映射方法,然后调用 `scene.render()`更新渲染即可
|
||||||
|
|
||||||
|
### 样式更新
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.color('blue');
|
||||||
|
layer.size(10);
|
||||||
|
layer.style({});
|
||||||
|
scene.render();
|
||||||
|
```
|
||||||
|
|
||||||
|
### setData
|
||||||
|
|
||||||
|
更新 Source 数据
|
||||||
|
|
||||||
|
参数:
|
||||||
|
|
||||||
|
- data 数据
|
||||||
|
- option 默认和初始配置项一致,如果数据格式相同可不设置
|
||||||
|
|
||||||
|
调用 setData 方法会自动更新图层渲染
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setData(data);
|
||||||
|
```
|
||||||
|
|
||||||
|
### setBlend(type)
|
||||||
|
|
||||||
|
设置图层叠加方法
|
||||||
|
参数:
|
||||||
|
|
||||||
|
- type blend 类型
|
||||||
|
|
||||||
|
## 图层控制方法
|
||||||
|
|
||||||
### show
|
### show
|
||||||
|
|
||||||
图层显示
|
图层显示
|
||||||
|
@ -299,6 +352,16 @@ layer.show();
|
||||||
layer.hide();
|
layer.hide();
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### isVisible
|
||||||
|
|
||||||
|
图层是否可见
|
||||||
|
|
||||||
|
return `true | false`
|
||||||
|
|
||||||
|
### setIndex
|
||||||
|
|
||||||
|
设置图层绘制顺序
|
||||||
|
|
||||||
### fitBounds
|
### fitBounds
|
||||||
|
|
||||||
缩放到图层范围
|
缩放到图层范围
|
||||||
|
@ -306,3 +369,215 @@ layer.hide();
|
||||||
```javascript
|
```javascript
|
||||||
layer.fitBounds();
|
layer.fitBounds();
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### setMinZoom
|
||||||
|
|
||||||
|
设置图层最小缩放等级
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
- zoom {number}
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setMinZoom(zoom);
|
||||||
|
```
|
||||||
|
|
||||||
|
### setMaxZoom
|
||||||
|
|
||||||
|
设置图层最大缩放等级
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
- zoom {number}
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setMinZoom(zoom);
|
||||||
|
```
|
||||||
|
|
||||||
|
设置图层最大缩放等级
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
- zoom {number}
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setMinZoom(zoom);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 图层交互方法
|
||||||
|
|
||||||
|
### active
|
||||||
|
|
||||||
|
开启或者关闭 mousehover 元素高亮效果
|
||||||
|
|
||||||
|
参数: activeOption | boolean
|
||||||
|
|
||||||
|
activeOption
|
||||||
|
-color 填充颜色
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 开启 Active 使用默认高亮颜色
|
||||||
|
layer.active(true);
|
||||||
|
|
||||||
|
// 开启 Active 自定义高亮颜色
|
||||||
|
|
||||||
|
layer.active({
|
||||||
|
color: 'red',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关闭高亮效果
|
||||||
|
layer.active(false);
|
||||||
|
```
|
||||||
|
|
||||||
|
### setActive
|
||||||
|
|
||||||
|
根据元素 ID 设置指定元素 hover 高亮
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setActive(id);
|
||||||
|
```
|
||||||
|
|
||||||
|
### select
|
||||||
|
|
||||||
|
开启或者关闭 mouseclick 元素选中高亮效果
|
||||||
|
|
||||||
|
参数: selectOption | boolean
|
||||||
|
|
||||||
|
selectOption
|
||||||
|
-color 填充颜色
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 开启 Active 使用默认高亮颜色
|
||||||
|
layer.select(true);
|
||||||
|
|
||||||
|
// 开启 Active 自定义高亮颜色
|
||||||
|
|
||||||
|
layer.select({
|
||||||
|
color: 'red',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关闭高亮效果
|
||||||
|
layer.select(false);
|
||||||
|
```
|
||||||
|
|
||||||
|
### setSelect
|
||||||
|
|
||||||
|
根据元素 ID 设置指定元素 click 选中 高亮
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.setSelect(id);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 鼠标事件
|
||||||
|
|
||||||
|
鼠标事件回调参数 target
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
```
|
||||||
|
|
||||||
|
- x: number 鼠标 在地图位置 x 坐标
|
||||||
|
- y: number 鼠标 在地图位置 y 坐标
|
||||||
|
- type: string 鼠标事件类型
|
||||||
|
- lngLat: 经度度对象 {lng:number, lat: number }; 鼠标所在位置经纬度
|
||||||
|
- feature: any; 数据选中的地理要素信息
|
||||||
|
- featureId: number | null; 数据选中的地理要素的 ID
|
||||||
|
|
||||||
|
### click
|
||||||
|
|
||||||
|
点击事件
|
||||||
|
|
||||||
|
### mousemove
|
||||||
|
|
||||||
|
鼠标移动事件
|
||||||
|
|
||||||
|
### mouseout
|
||||||
|
|
||||||
|
鼠标移除
|
||||||
|
|
||||||
|
### mouseup
|
||||||
|
|
||||||
|
鼠标按下
|
||||||
|
|
||||||
|
### mousedown
|
||||||
|
|
||||||
|
鼠标向下
|
||||||
|
|
||||||
|
### contextmenu
|
||||||
|
|
||||||
|
鼠标右键
|
||||||
|
|
||||||
|
### unclick
|
||||||
|
|
||||||
|
点击未拾取到元素
|
||||||
|
|
||||||
|
### unmousemove
|
||||||
|
|
||||||
|
鼠标移动未拾取到元素
|
||||||
|
|
||||||
|
### unmouseup
|
||||||
|
|
||||||
|
鼠标抬起未拾取到元素
|
||||||
|
|
||||||
|
### unmousedown
|
||||||
|
|
||||||
|
鼠标按下未拾取到元素
|
||||||
|
|
||||||
|
### uncontextmenu
|
||||||
|
|
||||||
|
鼠标右键位拾取到元素
|
||||||
|
|
||||||
|
### unpick
|
||||||
|
|
||||||
|
所有鼠标事件未拾取到
|
||||||
|
|
||||||
|
使用示例
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
|
||||||
|
layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
|
||||||
|
layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
|
||||||
|
layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发
|
||||||
|
layer.on('mousedown', (ev) => {}); // 鼠标在图层上单击按下时触发
|
||||||
|
layer.on('contextmenu', (ev) => {}); // 图层要素点击右键菜单
|
||||||
|
|
||||||
|
// 鼠标在图层外的事件
|
||||||
|
layer.on('unclick', (ev) => {}); // 图层外点击
|
||||||
|
layer.on('unmousemove', (ev) => {}); // 图层外移动
|
||||||
|
layer.on('unmouseup', (ev) => {}); // 图层外鼠标抬起
|
||||||
|
layer.on('unmousedown', (ev) => {}); // 图层外单击按下时触发
|
||||||
|
layer.on('uncontextmenu', (ev) => {}); // 图层外点击右键
|
||||||
|
layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件
|
||||||
|
```
|
||||||
|
|
||||||
|
## 图层事件
|
||||||
|
|
||||||
|
### inited
|
||||||
|
|
||||||
|
参数 option
|
||||||
|
|
||||||
|
- target 当前 layer
|
||||||
|
- type 事件类型
|
||||||
|
|
||||||
|
图层初始化完成后触发
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.on('inited', (option) => {});
|
||||||
|
```
|
||||||
|
|
||||||
|
### add
|
||||||
|
|
||||||
|
图层添加到 scene
|
||||||
|
|
||||||
|
参数 option
|
||||||
|
|
||||||
|
- target 当前 layer
|
||||||
|
- type 事件类型
|
||||||
|
|
||||||
|
### remove
|
||||||
|
|
||||||
|
图层移除时触发
|
||||||
|
|
||||||
|
参数 option
|
||||||
|
|
||||||
|
- target 当前 layer
|
||||||
|
- type 事件类型
|
||||||
|
|
|
@ -0,0 +1,76 @@
|
||||||
|
---
|
||||||
|
title: ArcLayer
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
将两个点的连线绘制成弧形,绘制的弧线可以是贝塞尔曲线,大圆航线,通常用来表示两种地理事物关系和联系,或者人口迁移,物流起点目的地等
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
### 数据
|
||||||
|
绘制弧线只需提供起止点坐标即可
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng1',
|
||||||
|
y: 'lat1',
|
||||||
|
x1: 'lng2',
|
||||||
|
y1: 'lat2'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### shape
|
||||||
|
|
||||||
|
弧线支持三种弧线算法
|
||||||
|
|
||||||
|
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||||
|
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线
|
||||||
|
- arc3d 3d 弧线地图 3D 视角
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### animate
|
||||||
|
|
||||||
|
#### 开启关闭动画
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(true)
|
||||||
|
layer.animate(false)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 设置动画参数
|
||||||
|
|
||||||
|
- duration 动画时间 单位(s)秒
|
||||||
|
- interval 轨迹间隔, 取值区间 0 - 1
|
||||||
|
- trailLength 轨迹长度 取值区间 0 - 1
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate({
|
||||||
|
duration: 4,
|
||||||
|
interval: 0.2,
|
||||||
|
trailLength: 0.1
|
||||||
|
|
||||||
|
})
|
||||||
|
```
|
||||||
|
### 示例代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const layer = new LineLayer({})
|
||||||
|
.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng1',
|
||||||
|
y: 'lat1',
|
||||||
|
x1: 'lng2',
|
||||||
|
y1: 'lat2'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.size(1)
|
||||||
|
.shape('arc')
|
||||||
|
.color('#8C1EB2')
|
||||||
|
.style({
|
||||||
|
opacity: 0.8,
|
||||||
|
});
|
||||||
|
```
|
|
@ -0,0 +1,76 @@
|
||||||
|
---
|
||||||
|
title: 弧线图
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
将两个点的连线绘制成弧形,绘制的弧线可以是贝塞尔曲线,大圆航线,通常用来表示两种地理事物关系和联系,或者人口迁移,物流起点目的地等
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
### 数据
|
||||||
|
绘制弧线只需提供起止点坐标即可
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng1',
|
||||||
|
y: 'lat1',
|
||||||
|
x1: 'lng2',
|
||||||
|
y1: 'lat2'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### shape
|
||||||
|
|
||||||
|
弧线支持三种弧线算法
|
||||||
|
|
||||||
|
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||||
|
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线
|
||||||
|
- arc3d 3d 弧线地图 3D 视角
|
||||||
|
|
||||||
|
### animate
|
||||||
|
|
||||||
|
#### 开启关闭动画
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(true)
|
||||||
|
layer.animate(false)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 设置动画参数
|
||||||
|
|
||||||
|
- duration 动画时间 单位(s)秒
|
||||||
|
- interval 轨迹间隔, 取值区间 0 - 1
|
||||||
|
- trailLength 轨迹长度 取值区间 0 - 1
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate({
|
||||||
|
duration: 4,
|
||||||
|
interval: 0.2,
|
||||||
|
trailLength: 0.1
|
||||||
|
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 示例代码
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const layer = new LineLayer({})
|
||||||
|
.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'csv',
|
||||||
|
x: 'lng1',
|
||||||
|
y: 'lat1',
|
||||||
|
x1: 'lng2',
|
||||||
|
y1: 'lat2'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.size(1)
|
||||||
|
.shape('arc')
|
||||||
|
.color('#8C1EB2')
|
||||||
|
.style({
|
||||||
|
opacity: 0.8,
|
||||||
|
});
|
||||||
|
```
|
|
@ -14,7 +14,7 @@ order: 2
|
||||||
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线
|
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线
|
||||||
- arc3d 3d 弧线地图 3D 视角
|
- arc3d 3d 弧线地图 3D 视角
|
||||||
|
|
||||||
⚠️ 弧线只需要设置起始点坐标即可
|
⚠️ 弧线只需要设置起止点坐标即可
|
||||||
|
|
||||||
```
|
```
|
||||||
new LineLayer()
|
new LineLayer()
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
title: LineLayer
|
title: LineLayer
|
||||||
order: 2
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
## 线图层
|
## 线图层
|
||||||
|
@ -14,7 +14,7 @@ order: 2
|
||||||
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线
|
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线
|
||||||
- arc3d 3d 弧线地图 3D 视角
|
- arc3d 3d 弧线地图 3D 视角
|
||||||
|
|
||||||
⚠️ 弧线只需要设置起始点坐标即可
|
⚠️ 弧线只需要设置起止点坐标即可
|
||||||
|
|
||||||
```
|
```
|
||||||
new LineLayer()
|
new LineLayer()
|
||||||
|
@ -68,3 +68,14 @@ order: 2
|
||||||
lineLayer.size(1); // 线的宽度为 1
|
lineLayer.size(1); // 线的宽度为 1
|
||||||
lineLayer.size([1, 2]); // 宽度为1,高度2
|
lineLayer.size([1, 2]); // 宽度为1,高度2
|
||||||
```
|
```
|
||||||
|
### style
|
||||||
|
|
||||||
|
- lineType dash | solid 线类型实线和虚线
|
||||||
|
- dashArray 虚线配置项 ```[ 5, 5]```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer .style({
|
||||||
|
lineType: 'dash',
|
||||||
|
dashArray: [ 5, 5 ]
|
||||||
|
})
|
||||||
|
```
|
|
@ -0,0 +1,49 @@
|
||||||
|
---
|
||||||
|
title: Path
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
用一组首尾不闭合的点坐标对来定位的线图层,通常用来表示轨迹,线路,道路等
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
### shape
|
||||||
|
shape 设置成line即可绘制路线图
|
||||||
|
- line
|
||||||
|
|
||||||
|
### size
|
||||||
|
路径图线的size支持两个维度
|
||||||
|
|
||||||
|
- width 宽度
|
||||||
|
- height 高度
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size([2,10]) // 绘制宽度为2,高度为10的路径
|
||||||
|
|
||||||
|
layer.size('height',[])
|
||||||
|
```
|
||||||
|
### animate
|
||||||
|
|
||||||
|
#### 开启关闭动画
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(true)
|
||||||
|
layer.animate(false)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 设置动画参数
|
||||||
|
|
||||||
|
- duration 动画时间 单位(s)秒
|
||||||
|
- interval 轨迹间隔, 取值区间 0 - 1
|
||||||
|
- trailLength 轨迹长度 取值区间 0 - 1
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate({
|
||||||
|
duration: 4,
|
||||||
|
interval: 0.2,
|
||||||
|
trailLength: 0.1
|
||||||
|
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,49 @@
|
||||||
|
---
|
||||||
|
title: 路径图
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
用一组首尾不闭合的点坐标对来定位的线图层,通常用来表示轨迹,线路,道路等
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
### shape
|
||||||
|
shape 设置成line即可绘制路线图
|
||||||
|
- line
|
||||||
|
|
||||||
|
### size
|
||||||
|
路径图线的size支持两个维度
|
||||||
|
|
||||||
|
- width 宽度
|
||||||
|
- height 高度
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size([2,10]) // 绘制宽度为2,高度为10的路径
|
||||||
|
|
||||||
|
layer.size('height',[])
|
||||||
|
```
|
||||||
|
### animate
|
||||||
|
|
||||||
|
#### 开启关闭动画
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(true)
|
||||||
|
layer.animate(false)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 设置动画参数
|
||||||
|
|
||||||
|
- duration 动画时间 单位(s)秒
|
||||||
|
- interval 轨迹间隔, 取值区间 0 - 1
|
||||||
|
- trailLength 轨迹长度 取值区间 0 - 1
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate({
|
||||||
|
duration: 4,
|
||||||
|
interval: 0.2,
|
||||||
|
trailLength: 0.1
|
||||||
|
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,62 @@
|
||||||
|
---
|
||||||
|
title: Bubble Map
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
气泡图地理区域上方会显示不同大小的圆点,圆形面积与其在数据集中的数值会成正比。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
气泡图通过PointLayer对象实例化,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { PointLayer } from '@antv/l7';
|
||||||
|
|
||||||
|
```
|
||||||
|
### shape
|
||||||
|
|
||||||
|
通常气泡图shape 设置为 **circle**
|
||||||
|
|
||||||
|
### size
|
||||||
|
|
||||||
|
气泡图大小,需要指定数据映射字段
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const bubble =
|
||||||
|
new PointLayer()
|
||||||
|
.source(data)
|
||||||
|
.shape(circle)
|
||||||
|
.size('mag',[0, 25])
|
||||||
|
.color('red')
|
||||||
|
.style({
|
||||||
|
opacity: 0.3,
|
||||||
|
strokeWidth: 1
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### animate
|
||||||
|
|
||||||
|
气泡图支持水波动画效果
|
||||||
|
|
||||||
|
#### 开启关闭动画
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(true)
|
||||||
|
layer.animate(false)
|
||||||
|
```
|
||||||
|
#### 水波配置项
|
||||||
|
|
||||||
|
- speed 水波速度
|
||||||
|
- rings 水波环数
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## tips
|
||||||
|
|
||||||
|
目前style的配置项只支持全局设置,不支持数据映射。
|
||||||
|
|
||||||
|
如果 opacity 设置为 0.3 则所有的气泡都是 0.3
|
||||||
|
|
||||||
|
style方法如果没有设置 stroke, 默认于气泡的填充色相同
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,62 @@
|
||||||
|
---
|
||||||
|
title: 气泡图
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
气泡图地理区域上方会显示不同大小的圆点,圆形面积与其在数据集中的数值会成正比。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
气泡图通过PointLayer对象实例化,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { PointLayer } from '@antv/l7';
|
||||||
|
|
||||||
|
```
|
||||||
|
### shape
|
||||||
|
|
||||||
|
通常气泡图shape 设置为 **circle**
|
||||||
|
|
||||||
|
### size
|
||||||
|
|
||||||
|
气泡图大小,需要指定数据映射字段
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const bubble =
|
||||||
|
new PointLayer()
|
||||||
|
.source(data)
|
||||||
|
.shape(circle)
|
||||||
|
.size('mag',[0, 25])
|
||||||
|
.color('red')
|
||||||
|
.style({
|
||||||
|
opacity: 0.3,
|
||||||
|
strokeWidth: 1
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### animate
|
||||||
|
|
||||||
|
气泡图支持水波动画效果
|
||||||
|
|
||||||
|
#### 开启关闭动画
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(true)
|
||||||
|
layer.animate(false)
|
||||||
|
```
|
||||||
|
#### 水波配置项
|
||||||
|
|
||||||
|
- speed 水波速度
|
||||||
|
- rings 水波环数
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## tips
|
||||||
|
|
||||||
|
目前style的配置项只支持全局设置,不支持数据映射。
|
||||||
|
|
||||||
|
如果 opacity 设置为 0.3 则所有的气泡都是 0.3
|
||||||
|
|
||||||
|
style方法如果没有设置 stroke, 默认于气泡的填充色相同
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
title: Chart Map
|
||||||
|
order: 6
|
||||||
|
---
|
||||||
|
使用二维统计图表代替点状符号的一种特殊复合形式,复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||||
|
|
||||||
|
通过自定义Marker 实现自定义图表
|
||||||
|
|
||||||
|
[demo示例](../../../../examples/point/chart)
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
title: 复合图表地图
|
||||||
|
order: 6
|
||||||
|
---
|
||||||
|
使用二维统计图表代替点状符号的一种特殊复合形式,复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||||
|
|
||||||
|
通过自定义Marker 实现自定义图表
|
||||||
|
|
||||||
|
[demo示例](../../../../examples/point/chart)
|
|
@ -0,0 +1,73 @@
|
||||||
|
---
|
||||||
|
title: Cluster Map
|
||||||
|
order: 5
|
||||||
|
---
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
目前只有点数据支持聚类方法
|
||||||
|
|
||||||
|
数据聚合主要从数据层数据,因此需要在Source方法配置 cluster 参数
|
||||||
|
|
||||||
|
### Source
|
||||||
|
[source 文档](../../source/source)
|
||||||
|
|
||||||
|
### 配置项
|
||||||
|
- cluster **boolean** 是否聚合
|
||||||
|
- clusterOption 聚合配置项
|
||||||
|
- radius 聚合半径 **number** default 40
|
||||||
|
- minZoom: 最小聚合缩放等级 **number** default 0
|
||||||
|
- maxZoom: 最大聚合缩放等级 **number** default 16
|
||||||
|
|
||||||
|
数据聚合之后,源数据会增加 point_count属性,在可视化渲染时可以根据 point_count 进行数据映射。
|
||||||
|
|
||||||
|
#### 方法
|
||||||
|
|
||||||
|
**getClusters(zoom: number)**
|
||||||
|
|
||||||
|
获取指定缩放等级的聚合数据
|
||||||
|
|
||||||
|
- zoom 缩放等级
|
||||||
|
|
||||||
|
**getClustersLeaves(id: string)**
|
||||||
|
|
||||||
|
根据id获取聚合节点的数据
|
||||||
|
|
||||||
|
- id 聚合数据id
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.source(pointsData, {
|
||||||
|
cluster: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置配置项
|
||||||
|
layer.source(pointsData, {
|
||||||
|
cluster: true,
|
||||||
|
clusterOption:{
|
||||||
|
radius:40,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 完整示例
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const pointLayer = new PointLayer({})
|
||||||
|
.source(pointsData, {
|
||||||
|
cluster: true,
|
||||||
|
})
|
||||||
|
.shape('circle')
|
||||||
|
.scale('point_count', {
|
||||||
|
type: 'quantile',
|
||||||
|
})
|
||||||
|
.size('point_count', [5, 10, 15, 20, 25])
|
||||||
|
.color('red')
|
||||||
|
.style({
|
||||||
|
opacity: 0.3,
|
||||||
|
strokeWidth: 1,
|
||||||
|
});
|
||||||
|
```
|
|
@ -0,0 +1,84 @@
|
||||||
|
---
|
||||||
|
title: 聚合图
|
||||||
|
order: 5
|
||||||
|
---
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
目前只有点数据支持聚类方法
|
||||||
|
|
||||||
|
数据聚合主要从数据层数据,因此需要在Source方法配置 cluster 参数
|
||||||
|
|
||||||
|
### Source
|
||||||
|
[source 文档](../../source/source)
|
||||||
|
|
||||||
|
### 配置项
|
||||||
|
- cluster **boolean** 是否聚合
|
||||||
|
- clusterOption 聚合配置项
|
||||||
|
- radius 聚合半径 **number** default 40
|
||||||
|
- minZoom: 最小聚合缩放等级 **number** default 0
|
||||||
|
- maxZoom: 最大聚合缩放等级 **number** default 16
|
||||||
|
|
||||||
|
数据聚合之后,数据会增加 point_count属性,在可视化渲染时可以根据 point_count进行数据映射。
|
||||||
|
|
||||||
|
#### 方法
|
||||||
|
|
||||||
|
**getClusters(zoom: number)**
|
||||||
|
|
||||||
|
获取指定缩放等级的聚合数据
|
||||||
|
|
||||||
|
- zoom 缩放等级
|
||||||
|
|
||||||
|
**getClustersLeaves(id: string)**
|
||||||
|
|
||||||
|
根据id获取聚合节点的数据,每个聚合节点会有一个唯一ID
|
||||||
|
|
||||||
|
- id 聚合数据id
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
layer.source(pointsData, {
|
||||||
|
cluster: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置配置项
|
||||||
|
layer.source(pointsData, {
|
||||||
|
cluster: true,
|
||||||
|
clusterOption:{
|
||||||
|
radius:40,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 完整示例
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const pointLayer = new PointLayer({})
|
||||||
|
.source(pointsData, {
|
||||||
|
cluster: true,
|
||||||
|
})
|
||||||
|
.shape('circle')
|
||||||
|
.scale('point_count', {
|
||||||
|
type: 'quantile',
|
||||||
|
})
|
||||||
|
.size('point_count', [5, 10, 15, 20, 25])
|
||||||
|
// .size(10)
|
||||||
|
.color('red')
|
||||||
|
.style({
|
||||||
|
opacity: 0.3,
|
||||||
|
strokeWidth: 1,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
[聚合图使用案例](../../../examples/point/cluster)
|
||||||
|
|
||||||
|
### FAQ
|
||||||
|
PointLayer的聚合图采用WebGL绘制,不支持自定义具体聚合样式,如果有自定义的需求可以使用MarkerLayer的聚合功能,你可以通过Dom完全自定义样式。
|
||||||
|
|
||||||
|
[MarkerLayer聚合](../../component/markerLayer)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,58 @@
|
||||||
|
---
|
||||||
|
title: 3D Column
|
||||||
|
order: 5
|
||||||
|
---
|
||||||
|
3D柱图地理区域上方会显示不同高度的柱体,主题的高度与其在数据集中的数值会成正比。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
3D柱图通过 PointLayer对象实例化,将shape设置成不同的3Dshape
|
||||||
|
### shape
|
||||||
|
|
||||||
|
3D Shape 支持
|
||||||
|
|
||||||
|
- cylinder
|
||||||
|
- triangleColumn
|
||||||
|
- hexagonColumn
|
||||||
|
- squareColumn
|
||||||
|
|
||||||
|
### size
|
||||||
|
|
||||||
|
3D柱图size 需要设置三个维度 [w, l, z]
|
||||||
|
- w 宽
|
||||||
|
- l 长
|
||||||
|
- z 高度
|
||||||
|
|
||||||
|
size设置成常量
|
||||||
|
|
||||||
|
```
|
||||||
|
layer.size([2,2,3])
|
||||||
|
```
|
||||||
|
size 回调函数设置
|
||||||
|
|
||||||
|
```
|
||||||
|
layer.size('unit_price', h => {
|
||||||
|
return [ 6, 6, h / 500 ];
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const column = new PointLayer({})
|
||||||
|
.source(data)
|
||||||
|
.shape('name', [
|
||||||
|
'cylinder',
|
||||||
|
'triangleColumn',
|
||||||
|
'hexagonColumn',
|
||||||
|
'squareColumn'
|
||||||
|
])
|
||||||
|
.size('unit_price', h => {
|
||||||
|
return [ 6, 6, h / 500 ];
|
||||||
|
})
|
||||||
|
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||||
|
.style({
|
||||||
|
opacity: 1.0
|
||||||
|
});
|
||||||
|
```
|
|
@ -0,0 +1,58 @@
|
||||||
|
---
|
||||||
|
title: 3D 柱图
|
||||||
|
order: 5
|
||||||
|
---
|
||||||
|
3D柱图地理区域上方会显示不同高度的柱体,主题的高度与其在数据集中的数值会成正比。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
3D柱图通过 PointLayer对象实例化,将shape设置成不同的3Dshape
|
||||||
|
### shape
|
||||||
|
|
||||||
|
3D Shape 支持
|
||||||
|
|
||||||
|
- cylinder
|
||||||
|
- triangleColumn
|
||||||
|
- hexagonColumn
|
||||||
|
- squareColumn
|
||||||
|
|
||||||
|
### size
|
||||||
|
|
||||||
|
3D柱图size 需要设置三个维度 [w, l, z]
|
||||||
|
- w 宽
|
||||||
|
- l 长
|
||||||
|
- z 高度
|
||||||
|
|
||||||
|
size设置成常量
|
||||||
|
|
||||||
|
```
|
||||||
|
layer.size([2,2,3])
|
||||||
|
```
|
||||||
|
size 回调函数设置
|
||||||
|
|
||||||
|
```
|
||||||
|
layer.size('unit_price', h => {
|
||||||
|
return [ 6, 6, h / 500 ];
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const column = new PointLayer({})
|
||||||
|
.source(data)
|
||||||
|
.shape('name', [
|
||||||
|
'cylinder',
|
||||||
|
'triangleColumn',
|
||||||
|
'hexagonColumn',
|
||||||
|
'squareColumn'
|
||||||
|
])
|
||||||
|
.size('unit_price', h => {
|
||||||
|
return [ 6, 6, h / 500 ];
|
||||||
|
})
|
||||||
|
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||||
|
.style({
|
||||||
|
opacity: 1.0
|
||||||
|
});
|
||||||
|
```
|
|
@ -0,0 +1,47 @@
|
||||||
|
---
|
||||||
|
title: Dot Density
|
||||||
|
order: 3
|
||||||
|
---
|
||||||
|
亮度图又称点密度图,单位面积的内点的个数越多,亮度会越亮,亮度图一般用来表达海量点数据分布情况
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
### shape
|
||||||
|
- dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
|
||||||
|
|
||||||
|
### color
|
||||||
|
|
||||||
|
- 无权重
|
||||||
|
如果数据没有权重可以将颜色设置为常量,渲染时会自动进行颜色叠加,点越多颜色越亮
|
||||||
|
- 有权重
|
||||||
|
如果数据有权重可以设置一组同一色相,不同亮度的色带,值越大亮度会越亮。
|
||||||
|
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const pointLayer = new PointLayer()
|
||||||
|
.source(data)
|
||||||
|
.size(2)
|
||||||
|
.shape('dot')
|
||||||
|
.color('h8', [
|
||||||
|
'#0A3663',
|
||||||
|
'#1558AC',
|
||||||
|
'#3771D9',
|
||||||
|
'#4D89E5',
|
||||||
|
'#64A5D3',
|
||||||
|
'#72BED6',
|
||||||
|
'#83CED6',
|
||||||
|
'#A6E1E0',
|
||||||
|
'#B8EFE2',
|
||||||
|
'#D7F9F0'
|
||||||
|
])
|
||||||
|
.style({
|
||||||
|
opacity: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
scene.addLayer(pointLayer);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 相关demo
|
||||||
|
|
||||||
|
[城市亮度图](../../../../examples/point/dot)
|
|
@ -0,0 +1,47 @@
|
||||||
|
---
|
||||||
|
title: 亮度图
|
||||||
|
order: 3
|
||||||
|
---
|
||||||
|
亮度图又称点密度图,单位面积的内点的个数越多,亮度会越亮,亮度图一般用来表达海量点数据分布情况
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
### shape
|
||||||
|
- dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
|
||||||
|
|
||||||
|
### color
|
||||||
|
|
||||||
|
- 无权重
|
||||||
|
如果数据没有权重可以将颜色设置为常量,渲染时会自动进行颜色叠加,点越多颜色越亮
|
||||||
|
- 有权重
|
||||||
|
如果数据有权重可以设置一组同一色相,不同亮度的色带,值越大亮度会越亮。
|
||||||
|
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const pointLayer = new PointLayer()
|
||||||
|
.source(data)
|
||||||
|
.size(2)
|
||||||
|
.shape('dot')
|
||||||
|
.color('h8', [
|
||||||
|
'#0A3663',
|
||||||
|
'#1558AC',
|
||||||
|
'#3771D9',
|
||||||
|
'#4D89E5',
|
||||||
|
'#64A5D3',
|
||||||
|
'#72BED6',
|
||||||
|
'#83CED6',
|
||||||
|
'#A6E1E0',
|
||||||
|
'#B8EFE2',
|
||||||
|
'#D7F9F0'
|
||||||
|
])
|
||||||
|
.style({
|
||||||
|
opacity: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
scene.addLayer(pointLayer);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 相关demo
|
||||||
|
|
||||||
|
[城市亮度图](../../../../examples/point/dot)
|
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
title: Custom Marker
|
||||||
|
order: 7
|
||||||
|
---
|
||||||
|
可自定义点符号,通过自定义dom实现地图标注,富文本、动态点状符号都可用于地图上信息的标记。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
[Marker 文档](../../component)
|
||||||
|
|
||||||
|
[MarkerLayer 文档](../../component/markerLayer)
|
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
title: 自定义 Marker
|
||||||
|
order: 7
|
||||||
|
---
|
||||||
|
可自定义点符号,通过自定义dom实现地图标注,富文本、动态点状符号都可用于地图上信息的标记。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
[Marker 文档](../../component)
|
||||||
|
|
||||||
|
[MarkerLayer 文档](../../component/markerLayer)
|
|
@ -1,10 +1,8 @@
|
||||||
---
|
---
|
||||||
title: PointLayer
|
title: PointLayer
|
||||||
order: 1
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
# PointLayer
|
|
||||||
|
|
||||||
## 简介
|
## 简介
|
||||||
|
|
||||||
点数据的展示,数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
点数据的展示,数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
||||||
|
@ -25,6 +23,14 @@ shape 支持
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## source
|
||||||
|
|
||||||
|
点数据类型,根据经纬点绘制图形,目前支持三种数据结构
|
||||||
|
|
||||||
|
- [GeoJSON]('../../../../source/geojson/#point')
|
||||||
|
- [CSV](../../../../source/csv/#parser)
|
||||||
|
- [JSON](../../../../source/json/#点数据)
|
||||||
|
|
||||||
**图片标注**
|
**图片标注**
|
||||||
|
|
||||||
通过 `Scene.addImage()` 可以添加图片资源,
|
通过 `Scene.addImage()` 可以添加图片资源,
|
|
@ -1,10 +1,8 @@
|
||||||
---
|
---
|
||||||
title: PointLayer
|
title: PointLayer
|
||||||
order: 1
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
# PointLayer
|
|
||||||
|
|
||||||
## 简介
|
## 简介
|
||||||
|
|
||||||
点数据的展示,数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
点数据的展示,数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
||||||
|
@ -29,9 +27,9 @@ shape 支持
|
||||||
|
|
||||||
点数据类型,根据经纬点绘制图形,目前支持三种数据结构
|
点数据类型,根据经纬点绘制图形,目前支持三种数据结构
|
||||||
|
|
||||||
- [GeoJOSN]('../source/geojson/#point')
|
- [GeoJSON]('../../../../source/geojson/#point')
|
||||||
- [CSV]()
|
- [CSV](../../../../source/csv/#parser)
|
||||||
- [JSON](../source/json/#点数据)
|
- [JSON](../../../../source/json/#点数据)
|
||||||
|
|
||||||
**图片标注**
|
**图片标注**
|
||||||
|
|
|
@ -0,0 +1,43 @@
|
||||||
|
---
|
||||||
|
title: Scatter Map
|
||||||
|
order: 2
|
||||||
|
---
|
||||||
|
在地理区域上放置相等大小的圆点,用来表示地域上的空间布局或数据分布。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
散点图通过PointLayer对象实例化
|
||||||
|
|
||||||
|
### shape
|
||||||
|
|
||||||
|
- circle
|
||||||
|
- square
|
||||||
|
- hexagon
|
||||||
|
- triangle
|
||||||
|
- pentagon
|
||||||
|
- octogon
|
||||||
|
- hexagram
|
||||||
|
- rhombus
|
||||||
|
- vesica
|
||||||
|
|
||||||
|
散点图shape 一般设置成常量
|
||||||
|
|
||||||
|
### color
|
||||||
|
|
||||||
|
color 可以根据数据的差异设置成不同颜色,表示数据的不同分类。
|
||||||
|
|
||||||
|
### size
|
||||||
|
散点图一般等大小的图形,size 一般设置成常量
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const scatter =
|
||||||
|
new PointLayer()
|
||||||
|
.source(data)
|
||||||
|
.shape(circle)
|
||||||
|
.size(5)
|
||||||
|
.color('red')
|
||||||
|
.style({
|
||||||
|
opacity: 0.3,
|
||||||
|
strokeWidth: 1
|
||||||
|
})
|
||||||
|
```
|
|
@ -0,0 +1,43 @@
|
||||||
|
---
|
||||||
|
title: 散点图
|
||||||
|
order: 2
|
||||||
|
---
|
||||||
|
在地理区域上放置相等大小的圆点,用来表示地域上的空间布局或数据分布。
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
散点图通过PointLayer对象实例化
|
||||||
|
|
||||||
|
### shape
|
||||||
|
|
||||||
|
- circle
|
||||||
|
- square
|
||||||
|
- hexagon
|
||||||
|
- triangle
|
||||||
|
- pentagon
|
||||||
|
- octogon
|
||||||
|
- hexagram
|
||||||
|
- rhombus
|
||||||
|
- vesica
|
||||||
|
|
||||||
|
散点图shape 一般设置成常量
|
||||||
|
|
||||||
|
### color
|
||||||
|
|
||||||
|
color 可以根据数据的差异设置成不同颜色,表示数据的不同分类。
|
||||||
|
|
||||||
|
### size
|
||||||
|
散点图一般等大小的图形,size 一般设置成常量
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
const scatter =
|
||||||
|
new PointLayer()
|
||||||
|
.source(data)
|
||||||
|
.shape(circle)
|
||||||
|
.size(5)
|
||||||
|
.color('red')
|
||||||
|
.style({
|
||||||
|
opacity: 0.3,
|
||||||
|
strokeWidth: 1
|
||||||
|
})
|
||||||
|
```
|
|
@ -0,0 +1,45 @@
|
||||||
|
---
|
||||||
|
title: Symbol Map
|
||||||
|
order: 4
|
||||||
|
---
|
||||||
|
在地理区域上放置不同图片作为符号,通常表示不同地理要素分布情况
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
符号图 通过PointLayer对象实例化,将shape设置成图片符号
|
||||||
|
|
||||||
|
### shape
|
||||||
|
|
||||||
|
通过scene addImage 方法
|
||||||
|
|
||||||
|
addImage()
|
||||||
|
参数:
|
||||||
|
- id 图片的id,
|
||||||
|
- url 图片的url
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.addImage(
|
||||||
|
'00',
|
||||||
|
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||||
|
);
|
||||||
|
|
||||||
|
```
|
||||||
|
⚠️ 符号图的ID不能与点图层已有shape名称相同,比如不能设置 circle
|
||||||
|
|
||||||
|
符号图需要把shape设置成图片的id,同样符号图shape也支持数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const scatter =
|
||||||
|
new PointLayer()
|
||||||
|
.source(data)
|
||||||
|
.shape('00')
|
||||||
|
.size(5)
|
||||||
|
.color('red')
|
||||||
|
.style({
|
||||||
|
opacity: 0.3,
|
||||||
|
strokeWidth: 1
|
||||||
|
})
|
||||||
|
```
|
||||||
|
## 相关demo
|
|
@ -0,0 +1,45 @@
|
||||||
|
---
|
||||||
|
title: 符号图
|
||||||
|
order: 4
|
||||||
|
---
|
||||||
|
在地理区域上放置不同图片作为符号,通常表示不同地理要素分布情况
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
符号图 通过PointLayer对象实例化,将shape设置成图片符号
|
||||||
|
|
||||||
|
### shape
|
||||||
|
|
||||||
|
通过scene addImage 方法
|
||||||
|
|
||||||
|
addImage()
|
||||||
|
参数:
|
||||||
|
- id 图片的id,
|
||||||
|
- url 图片的url
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.addImage(
|
||||||
|
'00',
|
||||||
|
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||||
|
);
|
||||||
|
|
||||||
|
```
|
||||||
|
⚠️ 符号图的ID不能与点图层已有shape名称相同,比如不能设置 circle
|
||||||
|
|
||||||
|
符号图需要把shape设置成图片的id,同样符号图shape也支持数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const scatter =
|
||||||
|
new PointLayer()
|
||||||
|
.source(data)
|
||||||
|
.shape('00')
|
||||||
|
.size(5)
|
||||||
|
.color('red')
|
||||||
|
.style({
|
||||||
|
opacity: 0.3,
|
||||||
|
strokeWidth: 1
|
||||||
|
})
|
||||||
|
```
|
||||||
|
## 相关demo
|
|
@ -0,0 +1,42 @@
|
||||||
|
---
|
||||||
|
title: Label
|
||||||
|
order: 4
|
||||||
|
---
|
||||||
|
为图层添加文本标注
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
地图标注需要添加一个新的图层的实现
|
||||||
|
|
||||||
|
### shape
|
||||||
|
|
||||||
|
- field 标注的字段名称
|
||||||
|
- shapeType 'text'
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('name','text')
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### color
|
||||||
|
同layer
|
||||||
|
|
||||||
|
### size
|
||||||
|
同layer
|
||||||
|
|
||||||
|
### style
|
||||||
|
|
||||||
|
- opacity `number`
|
||||||
|
- textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||||
|
- spacing: `number` 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近
|
||||||
|
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||||
|
- stroke: `string`; 描边颜色
|
||||||
|
- strokeWidth `number` 描边宽度
|
||||||
|
- strokeOpacity `number` 描边透明度
|
||||||
|
- fontWeight `string` 字体粗细
|
||||||
|
- fontFamily `string` 字号
|
||||||
|
- textOffset `[number, number]` 文本偏移量
|
||||||
|
- textAllowOverlap: `boolean` 是否允许文字遮盖
|
||||||
|
|
||||||
|
## 相关demo
|
||||||
|
[文本标注](../../../../examples/point/text)
|
|
@ -0,0 +1,42 @@
|
||||||
|
---
|
||||||
|
title: 文本标注
|
||||||
|
order: 4
|
||||||
|
---
|
||||||
|
为图层添加文本标注
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
地图标注需要添加一个新的图层的实现
|
||||||
|
|
||||||
|
### shape
|
||||||
|
|
||||||
|
- field 标注的字段名称
|
||||||
|
- shapeType 'text'
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('name','text')
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### color
|
||||||
|
同layer
|
||||||
|
|
||||||
|
### size
|
||||||
|
同layer
|
||||||
|
|
||||||
|
### style
|
||||||
|
|
||||||
|
- opacity `number`
|
||||||
|
- textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||||
|
- spacing: `number` 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近
|
||||||
|
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||||
|
- stroke: `string`; 描边颜色
|
||||||
|
- strokeWidth `number` 描边宽度
|
||||||
|
- strokeOpacity `number` 描边透明度
|
||||||
|
- fontWeight `string` 字体粗细
|
||||||
|
- fontFamily `string` 字号
|
||||||
|
- textOffset `[number, number]` 文本偏移量
|
||||||
|
- textAllowOverlap: `boolean` 是否允许文字遮盖
|
||||||
|
|
||||||
|
## 相关demo
|
||||||
|
[文本标注](../../../../examples/point/text)
|
|
@ -0,0 +1,33 @@
|
||||||
|
---
|
||||||
|
title: 3D填充图
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
## 使用
|
||||||
|
```javascript
|
||||||
|
import { PolygonLayer } from '@antv/l7'
|
||||||
|
const layer = new PolygonLayer();
|
||||||
|
```
|
||||||
|
### shape
|
||||||
|
3D Polygon 将多边形沿Z轴向上拉伸
|
||||||
|
- extrude 常量不支持数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('extrude');
|
||||||
|
```
|
||||||
|
|
||||||
|
### size
|
||||||
|
size代表拉伸的高度,支持数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.size(10);// 高度设置成常量
|
||||||
|
layer.size('floor', [0,2000]); // 根据floor字段进行数据映射默认为线
|
||||||
|
layer.size('floor', (floor) => { // 通过回调函数设置size
|
||||||
|
return floor * 2
|
||||||
|
})
|
||||||
|
```
|
||||||
|
### color
|
||||||
|
同 [layer#color](../layer/#color)
|
||||||
|
|
||||||
|
### style
|
||||||
|
同 [layer#style](../layer/#style)
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
title: 填充图
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
## 使用
|
||||||
|
```javascript
|
||||||
|
import { PolygonLayer } from '@antv/l7'
|
||||||
|
const layer = new PolygonLayer();
|
||||||
|
```
|
||||||
|
### shape
|
||||||
|
绘制填充图,shape为```fill``` 常量不支持数据映射
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.shape('fill');
|
||||||
|
```
|
||||||
|
|
||||||
|
### size
|
||||||
|
填充图无size不需要设置size
|
||||||
|
### color
|
||||||
|
同 [layer#color](../layer/#color)
|
||||||
|
|
||||||
|
### style
|
||||||
|
同 [layer#style](../layer/#style)
|
||||||
|
|
|
@ -1,13 +1,17 @@
|
||||||
---
|
---
|
||||||
title: PolygonLayer
|
title: PolygonLayer
|
||||||
order: 3
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
# 填充图
|
|
||||||
|
|
||||||
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
||||||
|
|
||||||
### shape
|
## 使用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { PolygonLayer } from '@antv/l7';
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## shape
|
||||||
|
|
||||||
填充图支持 3 种 shape
|
填充图支持 3 种 shape
|
||||||
|
|