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

fix(doc): file name lowercase

This commit is contained in:
thinkinggis 2019-11-21 13:44:32 +08:00
parent 83f1bb4df9
commit 6124e414ec
530 changed files with 49020 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.editorconfig Normal file
View File

@ -0,0 +1,16 @@
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab

45
.eslintrc Executable file
View File

@ -0,0 +1,45 @@
{
"extends": [
"eslint-config-egg"
],
"globals": {
"AMap": true,
"L7": true,
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module"
},
"plugins": [
"html"
],
"rules": {
"no-console": [
"error",
{
"allow": [
"warn",
"error"
]
}
],
"no-bitwise": [
0
],
"experimentalDecorators": [
0
],
"comma-dangle": [
"error",
"never"
],
"jsdoc/require-param": 0,
"linebreak-style": [
0
]
}
}

24
.github/ISSUE_TEMPLATE.md vendored Executable file
View File

@ -0,0 +1,24 @@
<!--
Thank you for reporting an issue.
1. It's RECOMMENDED to submit PR for typo or tiny bug fix.
2. If this's a FEATURE request, please provide: details, pseudo codes if necessary.
3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able.
4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template [g2-github-issue](https://codepen.io/leungwensen/pen/WXJgox).
感谢您向我们反馈问题。
1. 提交问题前，请先阅读 https://antv.alipay.com/zh-cn/g2/3.x/index.html 上的文档。
2. 我们推荐如果是小问题（错别字修改，小的 bug fix）直接提交 PR。
3. 如果是一个新需求，请提供：详细需求描述，最好是有伪代码实现。
4. 如果是一个 BUG，请提供：复现步骤，错误日志以及相关配置，并尽量填写下面的模板中的条目。
5. 如果可以，请提供尽可能精简的 CodePen 链接，可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox，方便我们排查问题。
6. 扩展阅读：[如何向开源项目提交无法解答的问题](https://zhuanlan.zhihu.com/p/25795393)
-->
* **L7 Version**:
* **Platform**:
* **Mini Showcase(like screenshots)**:
* **CodePen Link**:
<!-- Enter your issue details below this comment. -->

19
.github/PULL_REQUEST_TEMPLATE.md vendored Executable file
View File

@ -0,0 +1,19 @@
<!--
Thank you for your pull request. Please review below requirements.
Bug fixes and new features should include tests and possibly benchmarks.
Contributors guide: https://github.com/antvis/g2/blob/master/CONTRIBUTING.md
感谢您贡献代码。请确认下列 checklist 的完成情况。
Bug 修复和新功能必须包含测试，必要时请附上性能测试。
Contributors guide: https://github.com/antvis/g2/blob/master/CONTRIBUTING.md
-->
##### Checklist
<!-- Remove items that do not apply. For completed items, change [ ] to [x]. -->
- [ ] `npm test` passes
- [ ] tests and/or benchmarks are included
- [ ] commit message follows commit guidelines
##### Description of change
<!-- Provide a description of the change below this comment. -->

75
.gitignore vendored Normal file
View File

@ -0,0 +1,75 @@
# Created by https://www.gitignore.io/api/node
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
# typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# End of https://www.gitignore.io/api/node
lib/
dist/
.DS_Store
public
.cache
yarn.lock
package-lock.json

7
.prettierrc Normal file
View File

@ -0,0 +1,7 @@
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all",
"arrowParens": "always"
}

3
.storybook/addons.ts Normal file
View File

@ -0,0 +1,3 @@
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';
import '@storybook/addon-storysource/register';

32
.storybook/config.ts Normal file
View File

@ -0,0 +1,32 @@
// tslint:disable-next-line:no-submodule-imports
import '!style-loader!css-loader!sass-loader!./iframe.scss';
import '@storybook/addon-console';
import { addParameters, configure } from '@storybook/react';
import { create } from '@storybook/theming';
addParameters({
options: {
isFullscreen: false,
showAddonsPanel: true,
showSearchBox: false,
panelPosition: 'bottom',
hierarchySeparator: /\./,
// hierarchyRootSeparator: /\|/,
enableShortcuts: true,
theme: create({
base: 'light',
brandTitle: 'L7 POC for new architecture',
brandUrl: 'https://github.com/xiaoiver/L7-POC',
gridCellSize: 12,
}),
},
});
// automatically import all files ending in *.stories.tsx
const req = require.context('../stories', true, /\.stories\.tsx$/);
function loadStories() {
req.keys().forEach(req);
}
configure(loadStories, module);

7
.storybook/iframe.scss Normal file
View File

@ -0,0 +1,7 @@
html, body {
margin: 0;
}
.dg.ac {
z-index: 999 !important;
}

400
.storybook/l7.css Normal file
View File

@ -0,0 +1,400 @@
.l7-marker-container {
width:100%
}
.l7-marker {
position: absolute !important;
top: 0;
left: 0;
z-index: 5;
}
.l7-popup-anchor-top,
.l7-popup-anchor-top-left,
.l7-popup-anchor-top-right {
-webkit-flex-direction: column;
flex-direction: column;
}
.l7-popup-anchor-bottom,
.l7-popup-anchor-bottom-left,
.l7-popup-anchor-bottom-right {
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.l7-popup-anchor-left {
-webkit-flex-direction: row;
flex-direction: row;
}
.l7-popup-anchor-right {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.l7-popup {
position: absolute;
top: 0;
left: 0;
display: -webkit-flex;
display: flex;
will-change: transform;
pointer-events: none;
z-index: 5;
}
.l7-popup-tip {
width: 0;
height: 0;
border: 10px solid transparent;
z-index: 1;
}
.l7-popup-anchor-top .l7-popup-tip {
-webkit-align-self: center;
align-self: center;
border-top: none;
border-bottom-color: #fff;
}
.l7-popup-anchor-top-left .l7-popup-tip {
-webkit-align-self: flex-start;
align-self: flex-start;
border-top: none;
border-left: none;
border-bottom-color: #fff;
}
.l7-popup-anchor-top-right .l7-popup-tip {
-webkit-align-self: flex-end;
align-self: flex-end;
border-top: none;
border-right: none;
border-bottom-color: #fff;
}
.l7-popup-anchor-bottom .l7-popup-tip {
-webkit-align-self: center;
align-self: center;
border-bottom: none;
border-top-color: #fff;
}
.l7-popup-anchor-bottom-left .l7-popup-tip {
-webkit-align-self: flex-start;
align-self: flex-start;
border-bottom: none;
border-left: none;
border-top-color: #fff;
}
.l7-popup-anchor-bottom-right .l7-popup-tip {
-webkit-align-self: flex-end;
align-self: flex-end;
border-bottom: none;
border-right: none;
border-top-color: #fff;
}
.l7-popup-anchor-left .l7-popup-tip {
-webkit-align-self: center;
align-self: center;
border-left: none;
border-right-color: #fff;
}
.l7-popup-anchor-right .l7-popup-tip {
-webkit-align-self: center;
align-self: center;
border-right: none;
border-left-color: #fff;
}
.l7-popup-close-button {
position: absolute;
right: 0;
top: 0;
border: 0;
padding: 0;
font-size: 25px;
line-height: 20px;
border-radius: 0 3px 0 0;
cursor: pointer;
background-color: transparent;
}
.l7-popup-close-button:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.l7-popup-content {
position: relative;
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
padding: 10px 10px 15px;
pointer-events: auto;
}
.l7-popup-anchor-top-left .l7-popup-content {
border-top-left-radius: 0;
}
.l7-popup-anchor-top-right .l7-popup-content {
border-top-right-radius: 0;
}
.l7-popup-anchor-bottom-left .l7-popup-content {
border-bottom-left-radius: 0;
}
.l7-popup-anchor-bottom-right .l7-popup-content {
border-bottom-right-radius: 0;
}
.l7-popup-track-pointer {
display: none;
}
.l7-popup-track-pointer * {
pointer-events: none;
user-select: none;
}
.l7-map:hover .l7-popup-track-pointer {
display: flex;
}
.l7-map:active .l7-popup-track-pointer {
display: none;
}
.l7-popup-close-button {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0 3px 0 0;
cursor: pointer;
background-color: transparent;
}
.l7-popup-close-button:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.l7-popup-content {
position: relative;
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
padding: 10px 10px 15px;
pointer-events: auto;
}
/* general toolbar styles */
.l7-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
}
.l7-bar a,
.l7-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.l7-bar a,
.l7-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.l7-bar a:hover {
background-color: #f4f4f4;
}
.l7-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.l7-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.l7-bar a.l7-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
/* control positioning */
.l7-control-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.l7-control-hide {
display: none;
}
.l7-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.l7-top,
.l7-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.l7-top {
top: 0;
}
.l7-right {
right: 0;
}
.l7-bottom {
bottom: 0;
}
.l7-left {
left: 0;
}
.l7-control {
float: left;
clear: both;
}
.l7-right .l7-control {
float: right;
}
.l7-top .l7-control {
margin-top: 10px;
}
.l7-bottom .l7-control {
margin-bottom: 10px;
}
.l7-left .l7-control {
margin-left: 10px;
}
.l7-right .l7-control {
margin-right: 10px;
}
/* attribution and scale controls */
.l7-control-container .l7-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.7);
margin: 0;
}
.l7-control-attribution,
.l7-control-scale-line {
padding: 0 5px;
color: #333;
}
.l7-control-attribution a {
text-decoration: none;
}
.l7-control-attribution a:hover {
text-decoration: underline;
}
.l7-container .l7-control-attribution,
.l7-container .l7-control-scale {
font-size: 11px;
}
.l7-left .l7-control-scale {
margin-left: 5px;
}
.l7-bottom .l7-control-scale {
margin-bottom: 5px;
}
.l7-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
.l7-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.l7-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.l7-touch .l7-control-attribution,
.l7-touch .l7-control-layers,
.l7-touch .l7-bar {
box-shadow: none;
}
.l7-touch .l7-control-layers,
.l7-touch .l7-bar {
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* layers control */
.l7-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.l7-control-layers-toggle {
background-image: url(../images/layers.svg);
width: 36px;
height: 36px;
}
.l7-retina .l7-control-layers-toggle {
background-image: url(../images/layers.svg);
background-size: 26px 26px;
}
.l7-touch .l7-control-layers-toggle {
width: 44px;
height: 44px;
}
.l7-control-layers .l7-control-layers-list,
.l7-control-layers-expanded .l7-control-layers-toggle {
display: none;
}
.l7-control-layers-expanded .l7-control-layers-list {
display: block;
position: relative;
}
.l7-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.l7-control-layers-scrollbar {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 5px;
}
.l7-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.l7-control-layers label {
display: block;
}
.l7-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}

39
.storybook/webpack.config.js Normal file
View File

@ -0,0 +1,39 @@
module.exports = ({ config }) => {
// config.module.rules.push({
// test: /\.glsl$/,
// loader: 'raw-loader'
// });
// config.module.rules.push({
// test: /\.worker\.(js|ts)$/,
// use: {
// loader: 'worker-loader',
// options: { inline: true, fallback: false }
// }
// });
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('awesome-typescript-loader'),
});
config.module.rules.push({
test: /\.stories\.tsx?$/,
loaders: [
{
loader: require.resolve('@storybook/addon-storysource/loader'),
options: { parser: 'typescript' },
},
],
enforce: 'pre',
},{
test: /\.stories\.css?$/,
use: ['style-loader', 'css-loader'],
},
);
config.resolve.extensions.push('.ts', '.tsx', '.js', '.glsl');
return config;
};

7
.stylelintrc Normal file
View File

@ -0,0 +1,7 @@
{
"processors": ["stylelint-processor-styled-components"],
"extends": [
"stylelint-config-standard",
"stylelint-config-styled-components"
]
}

12
.travis.yml Normal file
View File

@ -0,0 +1,12 @@
sudo: false
language: node_js
node_js:
- '12'
branches:
only:
- next
install:
- yarn install
script:
- yarn test
- yarn coveralls

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
}

21
LICENSE.md Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2017 Alipay.inc
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

84
README.md Normal file
View File

@ -0,0 +1,84 @@
# L7
![最近提交](https://badgen.net/github/last-commit/antvis/L7)
L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
<<<<<<< HEAD
<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
<source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
=======
>>>>>>> f40e44f... fix(fix): fix
### Installation
```
npm install @antv/l7
```
### Features
<<<<<<< HEAD
=======
>>>>>>> f40e44f... fix(fix): fix
### Links
## Development
使用 Yarn Workspace 完成依赖安装以及各包之间的 link 工作：
```bash
yarn install
```
开发模式：
```bash
yarn watch
```
运行 Demo
```bash
yarn storybook
```
代替 `git commit` 提交：
```bash
yarn commit
```
## view doc example
```bash
npm start
```
visit http://localhost:8000/
## Add Package
add new package：
```bash
lerna create my-pack -y
```
将 ui-lib 作为 my-pack 的依赖：
```bash
yarn workspace my-pack add ui-lib/1.0.0
```
将 lodash 添加为所有 package 的依赖(不包含root）
```bash
yarn workspaces run add lodash
```
将 typescript 设置为 root 的开发依赖
```bash
yarn add -W -D typescript jest
```

141
README.zh.md Normal file
View File

@ -0,0 +1,141 @@
## L7 地理空间数据可视分析引擎
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
<source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
### Installation
```
npm install @antv/l7
```
## 核心特性
<<<<<<< HEAD
🌏 数据驱动可视化展示
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
🌏 2D，3D 一体化的海量数据高性能渲染
百万级空间数据实时，动态渲染。
🌏 简单灵活的数据接入
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
🌏 多地图底图支持，支持离线内网部署
=======
### 🌏 数据驱动可视化展示
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
### 🌏 2D，3D 一体化的海量数据高性能渲染
百万级空间数据实时，动态渲染。
### 🌏简单灵活的数据接入
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
### 🌏 多地图底图支持，支持离线内网部署
>>>>>>> f40e44f... fix(fix): fix
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
## 支持丰富的图表类型
### 点图层
- 气泡图
- 散点图
- 符号地图
- 3D柱状地图
- 聚合地图
- 复合图表地图
- 自定义Marker
### 线图层
- 路径地图
- 弧线，支持2D弧线、3D弧线以及大圆航线
- 等值线
### 面图层
- 填充图
- 3D填充图
### 热力图
- 经典热力图
- 蜂窝热力图
- 网格热力图
### 栅格地图
- 图片
- Raster
## L7 2.0 Roadmap
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
## Development
使用 Yarn Workspace 完成依赖安装以及各包之间的 link 工作：
```bash
yarn install
```
开发模式：
```bash
yarn watch
```
运行 Demo
```bash
yarn storybook
```
代替 `git commit` 提交：
```bash
yarn commit
```
## view doc example
```bash
npm start
```
visit http://localhost:8000/
## Add Package
add new package：
```bash
lerna create my-pack -y
```
将 ui-lib 作为 my-pack 的依赖：
```bash
yarn workspace my-pack add ui-lib/1.0.0
```
将 lodash 添加为所有 package 的依赖(不包含root）
```bash
yarn workspaces run add lodash
```
将 typescript 设置为 root 的开发依赖
```bash
yarn add -W -D typescript jest
```

120
babel.config.js Normal file
View File

@ -0,0 +1,120 @@
// @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
module.exports = api => {
api.cache(() => process.env.NODE_ENV);
const isSite = api.env('site');
const isCDNBundle = api.env('bundle');
const isCommonJS = api.env('cjs');
const isESModule = api.env('esm');
const isTest = api.env('test');
if (isSite) { //
return {
presets: [
'babel-preset-gatsby'
],
plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator',
[
'@babel/plugin-proposal-decorators',
{
legacy: true
}
],
[
// import glsl as raw text
'babel-plugin-inline-import',
{
extensions: [
// 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
// '.json',
'.glsl'
]
}
]
]
};
}
return {
presets: [
[
'@babel/env',
{
targets: {
browsers: 'Last 2 Chrome versions, Firefox ESR',
node: 'current'
},
// set `modules: false` when building CDN bundle, let rollup do commonjs works
// @see https://github.com/rollup/rollup-plugin-babel#modules
modules: (isCDNBundle || isESModule) ? false : 'auto'
}
],
[
'@babel/preset-react',
{
development: isCommonJS
}
],
'@babel/preset-typescript'
],
plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator',
[
'@babel/plugin-proposal-decorators',
{
legacy: true
}
],
[
'@babel/plugin-proposal-class-properties',
{
// @see https://github.com/storybookjs/storybook/issues/6069#issuecomment-472544973
loose: true
}
],
'@babel/plugin-syntax-dynamic-import',
// let rollup do commonjs works
// @see https://github.com/rollup/rollup-plugin-babel#modules
(isCDNBundle || isESModule) ? {} : '@babel/plugin-transform-modules-commonjs',
// '@babel/plugin-transform-modules-commonjs',
// 开发模式下以原始文本引入，便于调试
isCDNBundle ? {} : [
// import glsl as raw text
'babel-plugin-inline-import',
{
extensions: [
// 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
// '.json',
'.glsl'
]
}
],
[
// @see https://github.com/babel/babel/issues/8741#issuecomment-509041135
'const-enum',
{
transform: 'constObject'
}
],
// 按需引用 @see https://github.com/lodash/babel-plugin-lodash
'lodash',
// 内联 WebGL 常量 @see https://www.npmjs.com/package/babel-plugin-inline-webgl-constants
isCDNBundle ? 'inline-webgl-constants' : {}
],
ignore: [
'node_modules',
...!isTest ? [
'**/*.test.tsx',
'**/*.test.ts',
'**/*.story.tsx',
'__snapshots__',
'__tests__',
'__stories__',
'**/*/__snapshots__',
'**/*/__tests__'
] : []
]
};
};

7
build/bundle.ts Normal file
View File

@ -0,0 +1,7 @@
// @ts-ignore
export * from '@l7/scene';
// @ts-ignore
export * from '@l7/layers';
// @ts-ignore
export * from '@l7/component';

33
build/rollup-plugin-glsl.js Normal file
View File

@ -0,0 +1,33 @@
import { createFilter } from 'rollup-pluginutils';
// borrow from https://github.com/uber/luma.gl/blob/master/dev-modules/babel-plugin-remove-glsl-comments/index.js#L4-L5
const INLINE_COMMENT_REGEX = /\s*\/\/.*[\n\r]/g;
const BLOCK_COMMENT_REGEX = /\s*\/\*(\*(?!\/)|[^*])*\*\//g;
// 生产环境压缩 GLSL
export default function glsl(include, minify) {
const filter = createFilter(include);
return {
name: 'glsl',
transform(code, id) {
if (!filter(id)) return;
if (minify) {
code = code
.trim() // strip whitespace at the start/end
.replace(/\n+/g, '\n') // collapse multi line breaks
// remove comments
.replace(INLINE_COMMENT_REGEX, '\n')
.replace(BLOCK_COMMENT_REGEX, '')
.replace(/\n\s+/g, '\n') // strip identation
// .replace(/\s?([+-\/*=,])\s?/g, '$1') // strip whitespace around operators
// .replace(/([;\(\),\{\}])\n(?=[^#])/g, '$1'); // strip more line breaks
}
return {
code: `export default ${JSON.stringify(code)};`,
map: { mappings: '' }
};
}
};
}

79
build/rollup.config.js Normal file
View File

@ -0,0 +1,79 @@
import path from 'path';
import alias from '@rollup/plugin-alias';
import json from '@rollup/plugin-json';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from "rollup-plugin-terser";
import analyze from 'rollup-plugin-analyzer';
import babel from 'rollup-plugin-babel';
import glsl from './rollup-plugin-glsl';
function resolveFile(filePath) {
return path.join(__dirname, '..', filePath)
}
module.exports = [
{
input: resolveFile('build/bundle.ts'),
output: {
file: resolveFile('dist/bundle.js'),
format: 'umd',
name: 'L7',
globals: {
'mapbox-gl': 'mapboxgl',
},
},
external: [
'mapbox-gl',
],
treeshake: true,
plugins: [
alias(
{
resolve: ['.tsx', '.ts'],
entries: [
{
find: /^@l7\/(.*)/,
replacement: resolveFile('packages/$1/src'),
},
]
},
),
resolve({
browser: true,
preferBuiltins: false,
extensions: ['.js', '.ts'],
}),
glsl(
['**/*.glsl'],
true,
),
json(),
// @see https://github.com/rollup/rollup-plugin-node-resolve#using-with-rollup-plugin-commonjs
commonjs({
namedExports: {
eventemitter3: [ 'EventEmitter' ],
// @see https://github.com/rollup/rollup-plugin-commonjs/issues/266
lodash: [
'isNil',
'uniq',
'clamp',
'isObject',
'isFunction',
'cloneDeep',
'isString',
'isNumber',
],
}
}),
babel({
extensions: ['.js', '.ts'],
}),
terser(),
analyze({
summaryOnly: true,
limit: 20,
}),
],
},
];

5
commitlint.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
extends: [
'@commitlint/config-conventional'
]
};

BIN
demos/raster/basic/data/ndviundefined.be75.tif Executable file
View File

Binary file not shown.

25
demos/raster/basic/demo/image.js Normal file
View File

@ -0,0 +1,25 @@
import { Scene } from '@l7/scene';
import { ImageLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [121.2680, 30.3628],
zoom: 13,
});
const layer = new ImageLayer({});
layer.source(
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{
parser: {
type: 'image',
extent: [121.168, 30.2828, 121.384, 30.4219],
},
},
);
scene.on('loaded',()=>{
scene.addLayer(layer);
})

21
demos/raster/basic/demo/meta.json Normal file
View File

@ -0,0 +1,21 @@
{
"title": {
"zh": "栅格图层",
"en": "Gallery"
},
"demos": [
{
"filename": "image.js",
"title": "图片",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
},
{
"filename": "raster.js",
"title": "地形"
},
{
"filename": "light.js",
"title": "夜光图"
}
]
}

61
demos/raster/basic/demo/raster.js Normal file
View File

@ -0,0 +1,61 @@
import { Scene } from '@l7/scene';
import { RasterLayer } from '@l7/layers'
import * as GeoTIFF from 'geotiff';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'light',
center: [121.2680, 30.3628],
zoom: 3,
});
async function getTiffData() {
const response = await fetch(
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
);
const arrayBuffer = await response.arrayBuffer();
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
const image = await tiff.getImage();
const width = image.getWidth();
const height = image.getHeight();
const values = await image.readRasters();
return {
data: values[0],
width,
height,
min: 0,
max: 8000,
};
}
async function addLayer() {
const tiffdata = await getTiffData();
const layer = new RasterLayer({});
layer
.source(tiffdata.data, {
parser: {
type: 'raster',
width: tiffdata.width,
height: tiffdata.height,
min: 0,
max: 8000,
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
},
})
.style({
heightRatio:100,
opacity: 0.8,
rampColors: {
colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
},
});
return layer;
}
scene.on('loaded', async () =>{
const layer = await addLayer();
scene.addLayer(layer);
scene.render();
})

4
demos/raster/basic/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Raster Map
order: 0
---

4
demos/raster/basic/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 栅格图层
order: 0
---

58
demos/tutorial/control/demo/amap.js Normal file
View File

@ -0,0 +1,58 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers'
import { Scale, Zoom, Layers } from '@l7/component';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'dark',
center: [121.40, 31.258134],
zoom: 14,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
.then((res) => res.json())
.then((data) => {
const pointLayer =
new PointLayer({
})
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
}).shape('circle')
.size('unit_price', [5, 25])
.color('name',['#49B5AD', "#5B8FF9"])
.style({
opacity: 0.3,
strokeWidth: 1,
})
scene.addLayer(pointLayer);
var overlayers = {
"围栏填充": pointLayer,
};
var baseLayers = {
"基础地图": pointLayer,
};
const layersControl = new Layers({
overlayers: overlayers,
});
scene.addControl(layersControl);
});
const zoomControl = new Zoom();
const scaleControl = new Scale({
position:"bottomright"
});
scene.addControl(zoomControl);
scene.addControl(scaleControl);

19
demos/tutorial/control/demo/mapbox.js Normal file
View File

@ -0,0 +1,19 @@
import { Scene } from '@l7/scene';
import { Scale, Zoom } from '@l7/component';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'light',
center: [-97.119140625, 38.75408327579141],
zoom: 2,
});
const zoomControl = new Zoom();
const scaleControl = new Scale({
position:'rightbottom',
});
scene.addControl(zoomControl);
scene.addControl(scaleControl);

16
demos/tutorial/control/demo/meta.json Normal file
View File

@ -0,0 +1,16 @@
{
"title": {
"zh": "地图",
"en": "Category"
},
"demos": [
{
"filename": "amap.js",
"title": "高德底图组件",
},
{
"filename": "mapbox.js",
"title": "MapBox底图组件"
}
]
}

57
demos/tutorial/control/demo/popup.js Normal file
View File

@ -0,0 +1,57 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers'
import { Scale, Zoom, Layers } from '@l7/component';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'dark',
center: [121.40, 31.258134],
zoom: 5,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
.then((res) => res.json())
.then((data) => {
const pointLayer =
new PointLayer({
})
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
}).shape('circle')
.size('unit_price', [5, 25])
.color('name',['#49B5AD', "#5B8FF9"])
.style({
opacity: 0.3,
strokeWidth: 1,
})
scene.addLayer(pointLayer);
var overlayers = {
"围栏填充": pointLayer,
};
var baseLayers = {
"基础地图": pointLayer,
};
const layersControl = new Layers({
overlayers: overlayers,
baseLayers,
});
scene.addControl(layersControl);
});
const zoomControl = new Zoom();
const scaleControl = new Scale();
scene.addControl(zoomControl);
scene.addControl(scaleControl);

4
demos/tutorial/control/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: control
order: 2
---

6
demos/tutorial/control/index.zh.md Normal file
View File

@ -0,0 +1,6 @@
---
title: 组件
order: 2
---

39
demos/tutorial/data/demo/line.js Normal file
View File

@ -0,0 +1,39 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'light',
center: [102.602992, 23.107329],
zoom: 13,
});
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.then((res) => res.json())
.then((data) => {
const layer =
new LineLayer({
})
.source(data)
.size(1)
.shape('line')
.color(
'ELEV',
[
'#E8FCFF',
'#CFF6FF',
'#A1E9ff',
'#65CEF7',
'#3CB1F0',
'#2894E0',
'#1772c2',
'#105CB3',
'#0D408C',
'#002466',
].reverse(),
)
scene.addLayer(layer);
console.log(layer);
});

13
demos/tutorial/data/demo/meta.json Normal file
View File

@ -0,0 +1,13 @@
{
"title": {
"zh": "图库",
"en": "Gallery"
},
"demos": [
{
"filename": "line.js",
"title": "线图层",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ"
}
]
}

4
demos/tutorial/data/index.en.md Normal file
View File

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

4
demos/tutorial/data/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 数据
order: 1
---

9
demos/tutorial/map/demo/amap.js Normal file
View File

@ -0,0 +1,9 @@
import { Scene } from '@l7/scene';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'dark',
center: [121.40, 31.258134],
zoom: 5,
});

10
demos/tutorial/map/demo/mapbox.js Normal file
View File

@ -0,0 +1,10 @@
import { Scene } from '@l7/scene';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'light',
center: [ -97.119140625, 38.75408327579141],
zoom: 2,
});

18
demos/tutorial/map/demo/meta.json Normal file
View File

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

6
demos/tutorial/map/index.en.md Normal file
View File

@ -0,0 +1,6 @@
---
title: map
order: 0
---
初始 L7 地图实例

9
demos/tutorial/map/index.zh.md Normal file
View File

@ -0,0 +1,9 @@
---
title: 地图
order: 0
redirect_from:
- /zh/tutorial
---
初始 L7 地图实例

68
dev-docs/ConfigSchemaValidation.md Normal file
View File

@ -0,0 +1,68 @@
# ConfigSchemaValidation 设计
用户在使用 L7 的 Scene/Layer API 时，由于参数配置项众多难免会误传。需要在运行时通过校验提前发现并给出友好的提示。
另外由于 L7 允许用户自定义 Layer 与 LayerPlugin，规范化参数配置项也能提升易用性和质量。
这方面 Webpack 做的很好，使用 [schema-utils](https://github.com/webpack/schema-utils) 基于 JSON Schema 对 Plugin 和 Loader 进行校验。如果传入了错误的配置项，会给出友好的提示：
```
Invalid configuration object. MyPlugin has been initialised using a configuration object that does not match the API schema.
- configuration.optionName should be a integer.
```
和 Webpack 一样，我们也选择 [ajv](https://github.com/epoberezkin/ajv) 作为 JSON Schema 校验器。
目前我们只在 Layer 初始阶段进行校验，一旦校验失败会中断后续初始化插件的处理，并在控制台给出校验失败信息。后续需要在属性更新时同样进行校验。
## Layer 基类配置项 Schema
目前在基类中我们声明了如下属性及其对应的校验规则：
```javascript
export default {
properties: {
// 开启拾取
enablePicking: {
type: 'boolean',
},
// 开启高亮
enableHighlight: {
type: 'boolean',
},
// 高亮颜色：例如 [0, 0, 1, 1] 或者 '#ffffff'
highlightColor: {
oneOf: [
{
type: 'array',
items: {
type: 'number',
minimum: 0,
maximum: 1,
},
},
{
type: 'string',
},
],
},
},
};
```
如果传入了错误的配置项则会在控制台给出提示。
## Layer 子类配置项 Schema
Layer 子类可以通过重载 `getConfigSchema()` 方法定义自身的特有属性。例如 `PolygonLayer` 需要定义透明度：
```javascript
protected getConfigSchema() {
return {
properties: {
opacity: {
type: 'number',
minimum: 0,
maximum: 1,
},
},
};
}
```

167
dev-docs/MultiPassRenderer.md Normal file
View File

@ -0,0 +1,167 @@
# MultiPassRenderer 实现
每个 Layer 渲染时都需要经历多个流程，从最简单的清屏、拾取到各种各样的后处理。我们希望把复杂渲染流程中每个步骤都抽象出来，让 L7 内部以及用户能够方便的扩展，进行渲染流程的自定义。其中的每一个步骤称作 Pass，负责串联调用各个 Pass 的渲染器称作 MultiPassRenderer。
![](./screenshots/blurpass.png)
## 接口设计
目前我们将 Pass 分成两类：
1. 渲染相关。例如 ClearPass、RenderPass、PickingPass、ShadowPass
2. 后处理相关。例如 CopyPass、BlurPass
```typescript
export enum PassType {
Normal = 'normal',
PostProcessing = 'post-processing',
}
```
每个 Pass 定义两个生命周期节点，初始化和渲染，并将当前 Layer 作为参数传入。因此 Pass 中可以访问 Layer 上的属性及方法：
```typescript
export interface IPass {
getType(): PassType;
init(layer: ILayer): void;
render(layer: ILayer): void;
}
```
其中后处理相关的 Pass 比较特殊，例如最后一个 PostProcessingPass 需要自动切换 renderTarget 为屏幕：
```typescript
export interface IPostProcessingPass extends IPass {
setRenderToScreen(renderToScreen: boolean): void;
isEnabled(): boolean;
setEnabled(enabled: boolean): void;
}
```
具体实现依赖 `@l7/renderer` 实现，目前使用 regl 实现 IFramebuffer 等接口。
## 内置 Pass
目前我们仅对外开放 PostProcessing 后处理相关 Pass 的配置。在 L7 内部我们使用如下流程：
```
ClearPass -> RenderPass -> [ ...其他后处理 Pass ] -> CopyPass
```
目前各内置 Pass 说明如下：
| Pass 名称 | 类型 | 参数 | 说明 |
| -------- | --- | ------------- | --------- |
| ClearPass | normal | 无 | 清除 framebuffer，clearColor 为 [0, 0, 0, 0] |
| RenderPass | normal | 无 | 渲染到 framebuffer，作为后续后处理的输入 |
| PickingPass | normal | 无 | 负责拾取，[详见](./PixelPickingEngine.md) |
| TAAPass | normal | 无 | [详见](./TAA.md) |
| CopyPass | post-processing | 无 | 作为后处理最后一个 Pass，负责拷贝 framebuffer 到屏幕输出 |
剩余后处理效果见最后一节。
后续待实现 Pass 如下：
- [ ] ShadowPass 负责生成 shadowMap，供 PCF、CSM 等实时阴影技术使用
## 使用方法
在每个 Layer 中，通过 `enableMultiPassRenderer` 开启之后，可以配置各个 Pass 的参数。配置方法类似 babel 插件：
```typescript
const layer = new PolygonLayer({
enableMultiPassRenderer: true,
passes: [
'blurH', // 使用 BlurHPass
[
'blurV', // 使用 BlurVPass
{
blurRadius: 20, // 设置模糊半径
},
],
],
});
```
## 内置后处理效果
参考了 [glfx](https://github.com/evanw/glfx.js) 中的一些常用图像处理效果。可以按照名称引用，顺序决定了各个效果的应用次序。例如我们想依次应用噪声和模糊效果：
```typescript
const layer = new PolygonLayer({
passes: [
[
'noise', // 使用 NoisePass
{
amount: 0.5,
},
]
'blurH', // 使用 BlurHPass
'blurV', // 使用 BlurVPass
],
});
```
下面详细介绍各个后处理效果及其参数，在 DEMO 中也可以通过 GUI 任意调节参数。
### 高斯模糊
采用 [高斯模糊 blur9](https://github.com/Jam3/glsl-fast-gaussian-blur/blob/master/9.glsl)。
名称：`blurH/blurV`
参数：
* `blurRadius` 水平/垂直方向模糊半径，默认值为 `8.0`
效果如下：
![](./screenshots/blurpass.png)
### ColorHalftone
CMYK halftone 效果
名称：`colorHalftone`
参数：
* `angle` pattern 旋转角度，默认值为 0
* `size` pattern 大小，默认值为 8
* `center` `[x, y]` pattern 的中心，默认值为 `[0, 0]`
效果如下：
![](./screenshots/halftone.png)
### 噪声
噪声效果。
名称：`noise`
参数：
* `amount` 噪声程度，范围 `[0, 1]`，默认值为 `0.5`
效果如下：
![](./screenshots/noise.png)
### 六边形像素化处理
六边形像素化处理。
名称：`hexagonalPixelate`
参数：
* `scale` 六边形大小，默认值为 `10`
* `center` `[x, y]` pattern 的中心，默认值为 `[0.5, 0.5]`
效果如下：
![](./screenshots/hexagonalPixelate.png)
### Sepia
Sepia 颜色映射。
名称：`sepia`
参数：
* `amount` 程度，范围 `[0, 1]`，默认值为 `0.5`
效果如下：
![](./screenshots/sepia.png)

151
dev-docs/PixelPickingEngine.md Normal file
View File

@ -0,0 +1,151 @@
# PixelPickingEngine 设计
在地图交互中，除了地图底图本身提供的平移、旋转、缩放、flyTo 等相机动作，最常用的就是信息要素的拾取以及后续的高亮了。
3D 引擎常用的拾取技术通常有两种：RayPicking 和 PixelPicking。前者从鼠标点击处沿着投影方向发射一根射线，通过包围盒碰撞检测获取到接触到的第一个对象，后续就可以进行选中对象的高亮甚至是跟随移动了，以上运算均在 CPU 侧完成。
但是在 L7 的场景中，海量数据在同一个 Geometry 中，无法计算每个要素的包围盒，因此在 GPU 侧完成的 PixelPicking 更加适合。
作为拾取引擎 PixelPickingEngine，除了实现内置基本的拾取 Pass，最重要的是提供友好易用的 API，覆盖以下常见场景：
* 基本的拾取场景，用户只需要开启 Layer 拾取功能并设置高亮颜色即可。
* 拾取后展示特定 UI 组件的场景，用户需要监听事件，在回调中使用上述拾取对象完成组件展示。
* 更灵活的联动场景，用户可以不依赖 L7 内置的事件监听机制，直接拾取并高亮指定点/区域包含的要素。
本文会依次介绍：
* PixelPicking 原理
* 使用方法
* 拾取对象结构
* 拾取 API 的使用方法
* 开启/关闭拾取
* 设置高亮颜色
* 展示自定义 UI 组件
* 在自定义 Layer 中使用
## PixelPicking 原理
在执行时机方面，基于 [MultiPassRenderer](./MultiPassRenderer.md) 的设计，拾取发生在实际渲染之前：
```
ClearPass -> PixelPickingPass -> RenderPass -> [ ...其他后处理 Pass ] -> CopyPass
```
PixelPickingPass 分解步骤如下：
1. `ENCODE` 阶段。逐要素编码（idx -> color），传入 attributes 渲染 Layer 到纹理。
2. 获取鼠标在视口中的位置。由于目前 L7 与地图结合的方案为双 Canvas 而非共享 WebGL Context，事件监听注册在地图底图上。
3. 读取纹理在指定位置的颜色，进行解码（color -> idx)，查找对应要素，作为 Layer `onHover/onClick` 回调参数传入。
4. `HIGHLIGHT` 阶段（可选）。将待高亮要素对应的颜色传入 Vertex Shader 用于每个 Vertex 判断自身是否被选中，如果被选中，在 Fragment Shader 中将高亮颜色与计算颜色混合。
## 使用方法
### 拾取对象结构定义
拾取对象结构定义如下：
| 参数名 | 类型 | 说明 |
| -------- | --- | ------------- |
| x | `number` | 鼠标位置在视口空间 x 坐标，取值范围 `[0, viewportWidth]` |
| y | `number` | 鼠标位置在视口空间 y 坐标，取值范围 `[0, viewportHeight]` |
| lnglat | `{ lng: number; lat: number; }` | 鼠标位置经纬度坐标 |
| feature | `object` | GeoJSON feature 属性 |
### API
对于基本的拾取场景，用户只需要开启 Layer 拾取功能并设置高亮颜色即可。
而对于拾取后展示特定 UI 组件的场景，用户需要监听事件，在回调中使用上述拾取对象完成组件展示。
最后，对于更灵活的联动场景，用户可以不依赖 L7 内置的事件监听机制，直接拾取并高亮指定点/区域包含的要素。
#### 禁用/开启拾取
并不是所有 Layer 都需要拾取（例如文本渲染 Layer），通过 `enablePicking` 关闭可以跳过该阶段，减少不必要的渲染开销：
```typescript
const layer = new PolygonLayer({
enablePicking: false, // 关闭拾取
});
```
⚠️L7 默认开启拾取。
#### 设置高亮颜色
如果一个 Layer 开启了拾取，我们可以通过 `highlightColor` 设置高亮颜色：
```typescript
const layer = new PolygonLayer({
enablePicking: true, // 开启拾取
enableHighlight: true, // 开启高亮
highlightColor: [0, 0, 1, 1], // 设置高亮颜色为蓝色
});
```
#### 展示自定义 UI 组件
监听 Layer 上的 `hover/mousemove` 事件就可以得到拾取对象，然后通过对象中包含的位置以及原始数据信息，就可以使用 L7 内置或者自定义 UI 组件展示：
```typescript
layer.on('hover', ({ x, y, lnglat, feature }) => {
// 展示 UI 组件
});
layer.on('mousemove', ({ x, y, lnglat, feature }) => {
// 同上
});
```
除了基于事件监听，还可以通过 Layer 的构造函数传入 `onHover` 回调，在后续 Layer 对应的 react 组件中也可以以这种方式使用：
```typescript
const layer = new PolygonLayer({
enablePicking: true,
onHover: ({ x, y, lnglat, feature }) => {
// 展示 UI 组件
},
});
```
#### 直接调用拾取引擎方法
除了默认在地图上交互完成拾取，在与其他系统进行联动时，脱离了地图交互，仍需要具备拾取指定点/区域内包含要素的能力。
```typescript
anotherSystem.on('hover', ({ x, y }) => {
layer.pick({
x,
y,
});
});
```
⚠️目前只支持拾取视口中一个点所在的要素，未来可以实现拾取指定区域内的全部要素。
### 自定义 Layer 中的拾取
用户实现自定义 Layer 时，必然需要实现 Vertex/Fragment Shader。如果也想使用拾取功能，就需要在 Shader 中引入拾取模块，方法如下。
在 Vertex Shader 中引入 `picking` 模块。关于 L7 Shader 的模块化设计，[详见]()。
```glsl
// mylayer.vert.glsl
#pragma include "picking"
void main() {
setPickingColor(customPickingColors);
}
```
在 Fragment Shader 中
```glsl
// mylayer.frag.glsl
#pragma include "picking"
void main() {
// 必须在末尾，保证后续不会再对 gl_FragColor 进行修改
gl_FragColor = filterPickingColor(gl_FragColor);
}
```
其中涉及 `picking` 模块方法说明如下：
| 方法名 | 应用 shader | 说明 |
| -------- | --- | ------------- |
| `setPickingColor` | `vertex` | 比较自身颜色编码与高亮颜色，判断是否被选中，传递结果给 fragment |
| `filterPickingColor` | `fragment` | 当前 fragment 被选中则使用高亮颜色混合，否则直接输出原始计算结果 |
## 参考资料
* [Deck.gl 交互文档](https://deck.gl/#/documentation/developer-guide/adding-interactivity)
* [Deck.gl Picking 实现](https://deck.gl/#/documentation/developer-guide/writing-custom-layers/picking)
* 「Interactive.Computer.Graphics.Top.Down.Approach - 3.9 Picking」

118
dev-docs/TAA.md Normal file
View File

@ -0,0 +1,118 @@
# 在地理场景中应用 TAA
## 问题背景
关于走样产生的原因以及常用的反走样手段，可以参考「知乎 - 反走样技术（一）：几何反走样」[🔗](https://zhuanlan.zhihu.com/p/28800047)。
我之前也简单总结了下 SSAA、MLAA/SMAA、FXAA 等反走样技术的实现细节。
其中 MSAA 作为浏览器内置实现，开发者使用起来很简单：
> 相对于着色走样，人眼对几何走样更敏感。MSAA 的原理很简单，它仍然把一个像素划分为若干个子采样点，但是相较于 SSAA，每个子采样点的颜色值完全依赖于对应像素的颜色值进行简单的复制（该子采样点位于当前像素光栅化结果的覆盖范围内），不进行单独计算。此外它的做法和 SSAA 相同。由于 MSAA 拥有硬件支持，相对开销比较小，又能很好地解决几何走样问题，在游戏中应用非常广泛（我们在游戏画质选项中常看到的 4x/8x/16x 抗锯齿一般说的就是 MSAA 的子采样点数量分别为4/8/16个）。
下图为 4x MSAA 采样点示意：
![](./screenshots/MSAA.png)
在 Mapbox 中左图未开启 MSAA 而右图选择开启，观察立方体边缘可以发现明显的几何走样：相关 [ISSUE](https://github.com/mapbox/mapbox-gl-js/pull/8474)。
![](./screenshots/mapbox-MSAA.png)
但是 MSAA 存在一些限制：
* WebGL1 不支持对 FBO 进行，因此开启 post-processing 后处理时 MSAA 就失效了。当然 WebGL2 支持 🔗。
* 即使开启，浏览器在某些情况下也不保证应用 🔗。
因此在需要后处理的场景中（例如 L7 的热力图需要 blur pass、PBR 中的 SSAO 环境光遮蔽），只能采用其他反走样手段。
## TAA(Temporal Anti-Aliasing) 原理
来自「知乎 - Experimentalize TAA with no code」🔗：
> 严格来说 TAA 并不能算一个具体的算法，而是更像一个统一的算法框架。和 SSAA 一样，TAA 也能够同时减轻几何走样和着色走样的问题。
关于 TAA 的原理，「GDC - Temporal Reprojection
Anti-Aliasing in INSIDE」[🔗](http://twvideo01.ubm-us.net/o1/vault/gdc2016/Presentations/Pedersen_LasseJonFuglsang_TemporalReprojectionAntiAliasing.pdf) 讲的十分清晰。如果相机和物体的相对位置在当前帧之前发生过变化，那么当前帧就可以以若干前序帧进行修正。
![](./screenshots/taa-1.png)
但如果在前序帧中相机和物体都没有发生过变化，那对于当前帧就无从修正了。因此可以对视锥进行抖动，在渲染每一帧之前，使用抖动矩阵对投影矩阵进行偏移，最终实现视锥的偏移：
![](./screenshots/taa-step1.png)
然后在 FS 中，最关键的就是 reproject 这一步：
![](./screenshots/taa-step2.png)
对于静止场景，「Three.js - TAA example」[🔗](https://threejs.org/examples/#webgl_postprocessing_taa)、「ECharts.GL - temporalSuperSampling」[🔗](https://echarts.apache.org/zh/option-gl.html#globe.temporalSuperSampling) 都采用了这种方法。
## 实现方法
由于需要对投影矩阵进行抖动，我们需要选取低差异序列。
来自「知乎 - 低差异序列（一）- 常见序列的定义及性质」🔗，右图明显比左图纯随机生成覆盖面广：
![](./screenshots/halton.png)
参考 Echarts.GL，我们选择 `Halton(2,3)` 低差异序列：
```typescript
const offset = this.haltonSequence[this.frame % this.haltonSequence.length];
this.cameraService.jitterProjectionMatrix(
((offset[0] * 2.0 - 1.0) / width) * jitterScale,
((offset[1] * 2.0 - 1.0) / height) * jitterScale,
);
```
在每一帧都会尝试进行累加。如果在连续运动过程中，TAA 的累加过程必然来不及完成，此时只需要输出当前帧原始结果即可，随后尝试继续轮询累加是否完成。因此在累加完成之前，都会输出当前帧未经 TAA 的结果。
最后我们需要进行加权平均，历史帧的权重应当越来越小：
![](./screenshots/taa-step3.png)
这里我们选择当前帧权重为 0.9，历史帧为 0.1：
```typescript
useFramebuffer(this.outputRenderTarget, () => {
this.blendModel.draw({
uniforms: {
u_opacity: layerStyleOptions.opacity || 1,
u_MixRatio: this.frame === 0 ? 1 : 0.9,
u_Diffuse1: this.sampleRenderTarget,
u_Diffuse2:
this.frame === 0
? layer.multiPassRenderer.getPostProcessor().getReadFBO()
: this.prevRenderTarget,
},
});
});
```
最后我们将最终的混合结果“拷贝”给后处理模块，实现渐进增强的效果：
```typescript
useFramebuffer(
layer.multiPassRenderer.getPostProcessor().getReadFBO(),
() => {
this.copyModel.draw({
uniforms: {
u_Texture: this.copyRenderTarget,
},
});
},
);
// 调用后处理模块应用后续效果
layer.multiPassRenderer.getPostProcessor().render(layer);
```
## 最终效果
为了更直观地看到效果，在 DEMO 中我们可以调节相机抖动范围：
![](./screenshots/taa-result.gif)
## 参考资料
* 「知乎 - 反走样技术（一）：几何反走样」[🔗](https://zhuanlan.zhihu.com/p/28800047)
* 「知乎 - Experimentalize TAA with no code」[🔗](https://zhuanlan.zhihu.com/p/41642855)
* 「ECharts.GL - temporalSuperSampling」[🔗](https://echarts.apache.org/zh/option-gl.html#globe.temporalSuperSampling)
* 「Mapbox - set custom layers and extrusion examples to use antialias: true」[🔗](https://github.com/mapbox/mapbox-gl-js/pull/8474)
* 「Three.js - TAA example」[🔗](https://threejs.org/examples/#webgl_postprocessing_taa)
* 「Paper - Amortized Supersampling」[🔗](http://hhoppe.com/supersample.pdf)
* 「GDC - Temporal Reprojection Anti-Aliasing in INSIDE」[🔗](http://twvideo01.ubm-us.net/o1/vault/gdc2016/Presentations/Pedersen_LasseJonFuglsang_TemporalReprojectionAntiAliasing.pdf)
* 「知乎 - 低差异序列（一）- 常见序列的定义及性质」[🔗](https://zhuanlan.zhihu.com/p/20197323)

BIN
dev-docs/screenshots/MSAA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
dev-docs/screenshots/blurpass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 721 KiB

BIN
dev-docs/screenshots/halftone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
dev-docs/screenshots/halton.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
dev-docs/screenshots/hexagonalPixelate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 895 KiB

BIN
dev-docs/screenshots/jest.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
dev-docs/screenshots/mapbox-MSAA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 790 KiB

BIN
dev-docs/screenshots/monorep.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
dev-docs/screenshots/noise.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
dev-docs/screenshots/sepia.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 847 KiB

BIN
dev-docs/screenshots/taa-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

BIN
dev-docs/screenshots/taa-result.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
dev-docs/screenshots/taa-step1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
dev-docs/screenshots/taa-step2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
dev-docs/screenshots/taa-step3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 KiB

230
dev-docs/使用方法.md Normal file
View File

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

326
dev-docs/构建方案.md Normal file
View File

@ -0,0 +1,326 @@
# 构建方案
考虑到 L7 提供的三种[使用方法](./使用方法.md)：CDN、Submodule 和 React 组件，我们需要提供对应的构建方案。
由于 React 组件待开发，下面我们将从方案技术细节、优化手段两方面介绍 CDN 和 Submodule 的构建方案。
## CDN
考虑到后续将引入 WebWorker 特性，目前 Webpack4 暂时还不支持多种 target（web + webworker）混合的输出模式，相关 [ISSUE](https://github.com/webpack/webpack/issues/6525)。
如果后续支持，配合 SplitChunksPlugin 应该能解决在 Worker 和不同 entry 之间共享代码的问题。
因此目前和 Mapbox 做法一样，我们使用 Rollup 构建 CDN Bundler。
打包命令如下，会在 `dist/` 下输出产物：
```bash
yarn bundle
```
### UMD
以 L7 为命名空间，让用户可以通过类似 `L7.Scene` 的方式使用。同时以 UMD 为构建目标：
```javascript
{
input: resolveFile('build/bundle.ts'),
output: {
file: resolveFile('dist/bundle.js'),
format: 'umd',
name: 'L7',
},
}
```
目前只需要暴露场景以及图层相关的 API，因此 Bundler 非常简单：
```typescript
// build/bundle.ts
export * from '@l7/scene';
export * from '@l7/layers';
```
### Alias
为了帮助 resolver 定位 lerna packages，需要重命名类似 `@l7/scene` 这样的依赖路径：
```javascript
import alias from '@rollup/plugin-alias';
plugins: [
alias(
{
resolve: ['.tsx', '.ts'],
entries: [
{
find: /^@l7\/(.*)/,
replacement: resolveFile('packages/$1/src'),
},
]
},
),
]
```
配合 [`terser`](https://github.com/TrySound/rollup-plugin-terser) 压缩后，我们就能得到可运行的 CDN 版本了，但从减少构建产物大小出发还有很多优化可以做。
### 减少包大小
除了 Rollup 提供的 TreeShaking，我们主要从三个方面考虑：
* 减少第三方依赖大小尤其是 Lodash
* external Mapbox 依赖
* 压缩 GLSL 代码
* 去除多余空格、换行符和注释
* 内联 WebGL 常量
* 预计算 define 变量
#### Lodash 按需引用
通过 analysis 插件可以看到第三方依赖大小占比：
```
/node_modules/lodash/lodash.js
███████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 23.79 % (540.328 KB)
/node_modules/regl/dist/regl.js
██████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 12.21 % (277.403 KB)
/node_modules/hammerjs/hammer.js
█░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 3.25 % (73.847 KB)
/node_modules/uri-js/dist/es5/uri.all.js
█░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 2.28 % (51.721 KB)
```
仔细查看 Lodash 的引用情况：
```
███████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
file: /node_modules/lodash/lodash.js
bundle space: 23.79 %
rendered size: 540.328 KB
original size: 540.51 KB
code reduction: 0.03 %
dependents: 13
- /packages/core/src/services/layer/StyleAttribute.ts
- /packages/core/src/services/shader/ShaderModuleService.ts
- /packages/core/src/services/renderer/passes/post-processing/BlurHPass.ts
```
按需引用 Lodash 常见的做法有几种：
* [loash-es](https://github.com/lodash/lodash/tree/es)
* babel-plugin-lodash
* lodash-webpack-plugin
由于我们使用 Rollup 以及 `rollup-plugin-babel`，[babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash) 可以很好地解决这个问题。该插件的[原理](https://github.com/rollup/rollup/issues/610#issuecomment-270801483)其实也是引用 `lodash-es`：
```javascript
// this...
import { template } from 'lodash-es';
// ...basically becomes this:
import template from 'lodash-es/template.js';
```
最终的效果还是很明显的：
```
/node_modules/regl/dist/regl.js
████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 16.55 % (277.403 KB)
/node_modules/hammerjs/hammer.js
██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 4.41 % (73.847 KB)
/node_modules/uri-js/dist/es5/uri.all.js
█░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 3.09 % (51.721 KB)
/node_modules/lodash.mergewith/index.js
█░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 3.06 % (51.256 KB)
```
#### 剔除 Mapbox
不同于高德异步加载的方式，Mapbox 用户需要手动引入 Mapbox 的 JS 和 CSS，因此 L7 CDN 版本就需要剔除了。通过 `globals` 假定用户负责引入 Mapbox 的 CDN 版本：
```javascript
{
output: {
globals: {
'mapbox-gl': 'mapboxgl',
},
},
external: [
'mapbox-gl',
],
}
```
这样 L7 Bundler 中就不包含 Mapbox 的 Module Bundler(mapbox-gl) 了。
#### 内联 WebGL 常量
在构建阶段可以将 WebGL 常量替换成对应的值，可以减少字符长度：
```javascript
// from
const max = gl.MAX_VERTEX_ATTRIBS;
// to
const max = 34921;
```
luma.gl 和 deck.gl 都使用了 [babel-plugin-inline-webgl-constants](https://www.npmjs.com/package/babel-plugin-inline-webgl-constants)。
来看一下实际效果，在压缩前就能减少字符长度：
```javascript
// 内联前
const usageMap = {
[gl.STATIC_DRAW]: 'static',
[gl.DYNAMIC_DRAW]: 'dynamic',
[gl.STREAM_DRAW]: 'stream'
};
// 内联后
const usageMap = {
[35044]: 'static',
[35048]: 'dynamic',
[35040]: 'stream'
};
```
#### 压缩 GLSL 代码
在开发编写 Shader 时，我们是不需要对 GLSL 代码进行压缩的，因为在 Shader 编译失败时能根据错误信息定位到具体行列。
但是在生产环境下，我们就需要把 GLSL 源代码中包含的**多余**的换行、空格以及注释去掉，减少最终引入字符串的大小。
这里需要注意的是并不是所有换行都可以简单去除，例如 `define` 语句末尾的换行一定要保留。
luma.gl 和 deck.gl 使用了 [babel-plugin-remove-glsl-comments](https://github.com/uber/luma.gl/tree/master/dev-modules/babel-plugin-remove-glsl-comments) 简单地移除注释，但很明显，多余的空格和换行符依然存在。
因此我们需要写一个简单的 Rollup 插件：
```javascript
export default function glsl(include, minify) {
const filter = createFilter(include);
return {
name: 'glsl',
transform(code, id) {
if (!filter(id)) return;
if (minify) {
code = code
.trim() // strip whitespace at the start/end
.replace(/\n+/g, '\n') // collapse multi line breaks
// remove comments
.replace(INLINE_COMMENT_REGEX, '\n')
.replace(BLOCK_COMMENT_REGEX, '')
.replace(/\n\s+/g, '\n') // strip identation
}
return {
code: `export default ${JSON.stringify(code)};`,
map: { mappings: '' }
};
}
};
}
```
#### GLSL minifier
以上针对 GLSL 的压缩仅限于字符替换，更彻底的优化必然需要生成 GLSL 对应的 AST，从而进行变量重命名、死代码消除等等更高级的优化手段。[glsl-minifier](https://github.com/TimvanScherpenzeel/glsl-minifier) 就是这样一个 CLI 工具。
其中的预计算特性有点类似 [Prepack](https://github.com/facebook/prepack)，在构建阶段就计算出 `define` 变量的值：
```glsl
#define SPREAD 8.00
#define MAX_DIR_LIGHTS 0
#define MAX_POINT_LIGHTS 0
#define MAX_SPOT_LIGHTS 0
#define MAX_HEMI_LIGHTS 0
#define MAX_SHADOWS 0
#define GAMMA_FACTOR 2
uniform mat4 viewMatrix;
uniform vec3 cameraPosition;
uniform vec2 resolution;
uniform float time;
uniform sampler2D texture;
void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy;
float v = texture2D( texture, uv ).x;
if (v == 1000.) discard;
v = sqrt(v);
gl_FragColor = vec4( vec3( 1. - v / SPREAD ), 1.0 );
}
```
上述代码压缩结果如下，`define` 统统不见了，变量名也进行了改写：
```glsl
uniform highp vec2 resolution;uniform sampler2D texture;void main(){highp vec2 a;a=(gl_FragCoord.xy/resolution);lowp vec4 b;b=texture2D(texture,a);if((b.x==1000.0)){discard;}lowp vec4 c;c.w=1.0;c.xyz=vec3((1.0-(sqrt(b.x)/8.0)));gl_FragColor=c;}
```
当然 glsl-minifier 做的远不止这些，还会应用变量名改写、死代码消除等等优化手段：
> Optimisations include function inlining, dead code removal, copy propagation, constant folding, constant propagation, arithmetic optimizations and so on. Minifications includes variable rewriting and whitespace trimming.
显然这种手段要求我们的 Shader 代码在构建时是稳定的，然而 L7 使用的 GLSL 模块化方案需要在运行时进行模块拼接，如果在构建时代码片段中包含的变量发生了改写，势必影响运行时的拼接结果。另外 minifier 会校验代码的正确性，不理解我们自定义的模块引入语句 `pragma include 'module'` 是一定会报错的。
以这样的 Shader 为例：
```glsl
#pragma include "project"
void main() {
// 从 project 模块引入方法
project(position);
}
```
执行压缩时会报错：
```bash
$ node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag
Error:
(28,2): error: no function with name 'project'
Exiting glsl-minifier!
```
因此要想使用这个终极压缩方案，需要修改 L7 目前的 GLSL 模块化方案，代码拼接不能在运行时而需要在构建时完成。但这样就很难兼顾扩展性，毕竟用户自定义图层的 Shader 代码肯定只有运行时才能拿到。
所以一个折中的办法是在构建时先对 L7 内置图层的 Shader 代码进行模块化处理，得到最终的 GLSL 文本，然后再 minify。同时保留运行时模块化拼接的能力，应对用户自定义图层。
## Submodule
npm 和 yarn 只提供了例如 `npm link` 以及 `yarn link` 这样的功能，而 yarn workspaces 只提供了 monorep 需要的底层 link 功能。相比之下 lerna 提供了更高级的功能例如 publish 和 version。因此 yarn workspaces 和 lerna 完全可以组合使用，这也是例如 Jest 等大型项目的使用方式。
![](./screenshots/monorep.png)
构建命令如下，会在各个 package 下生成 `/lib` 和 `/es` 两个文件夹分别包含 ES2015 和 ESModule 产物：
```bash
yarn build
```
### 编译 TS
使用 TS 有两种构建方式：
* native TypeScript with tsc
* [@babel/preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)
由于我们的项目中需要使用到一些 babel plugin（装饰器、引入 GLSL 等），因此后者显然是更好的选择。这里我们使用 babel 7 的项目全局配置 configFile。
为了合并 ES2015 与 ESModule，我们参考 [redux](https://babeljs.io/blog/2018/06/26/on-consuming-and-publishing-es2015+-packages#conflating-javascript-modules-and-es2015)：
```json
// redux package.json
{
"main": "lib/redux.js", // ES5 + Common JS
"module": "es/redux.js", // ES5 + JS Modules
}
```
开发模式加上 `--watch` 即可。
* `--root-mode upward` 使用 root 下的 babel 配置文件
* `--out-dir dist` 输出到 /dist 文件夹下
* `--delete-dir-on-start` 每次构建前清空，因此不需要 `rimraf`
```json
"scripts": {
"build": "run-p build:*",
"build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
},
```
### [WIP] 生成 TS 声明文件
和构建前类型检查不同，此时我们需要 tsc 输出类型声明文件了，当然不需要包含 story 和测试用例。
### [WIP] 异步加载 Mapbox
以 L7 Bundler 方式使用时，由于需要在运行时根据用户配置项选择地图底图，会导致构建时需要将全部地图依赖引入，无法进行 TreeShaking。
目前高德地图使用运行时异步加载方式引入，不会导致该问题，但 Mapbox 同样使用 Bundler，对于高德用户就多余了。
一个可能的方案是对于 Mapbox 使用 CodeSplitting。在容器首次获取 Mapbox 地图服务时异步加载并缓存。

142
dev-docs/自动化测试方案.md Normal file
View File

@ -0,0 +1,142 @@
# 自动化测试方案
如何测试一个 WebGL 应用渲染结果是否正确呢？常用的做法是进行像素比对，当然这也只能用于一些简单的判断例如渲染是否成功，整体的 Snapshot 比对开销很大。
但不管怎么说，这都意味着我们必须使用 WebGL API 进行真实的渲染。
以上过程在测试用例中描述如下：
```javascript
// 1. 绘制
// 2. 读取像素
const pixels = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
// 3. 判断某个像素点是否符合预期
```
在与测试框架结合时，常用的方案有：
* Electron 除了 WebGL API，DOM API 等其他浏览器实现对于 WebGL 测试都是多余的，在 CI 时需要安装的依赖过大，所需的启动时间也很长。
* [node-webgl](https://github.com/mikeseven/node-webgl) 不同于 WebGL，可以直接调用 OpenGL 驱动，但同样包含了很多 WebGL 之外的特性。
这里我们选择 [headless-gl](https://github.com/stackgl/headless-gl)，一个纯粹的 WebGL 1 规范的实现。并且能够很容易集成进现有的 [CI 流程](https://github.com/stackgl/headless-gl#how-can-i-use-headless-gl-with-a-continuous-integration-service)中，例如 [TravisCI](https://travis-ci.org/) 和 [AppVeyor](http://www.appveyor.com/)。
## 测试框架
在配置测试框架前，我们必须解决一个 WebGL 项目中常见的问题。
### 引入 GLSL 文件
如何在测试时正确引入 GLSL 文件是一个问题。目前各个 3D 引擎常用的做法有两种：
* 以字符串形式直接写在 `.js` 文件中。`luma.gl/deck.gl` 使用[这种方式](https://github.com/uber/deck.gl/blob/7.1-release/modules/layers/src/arc-layer/arc-layer-fragment.glsl.js)。
* 使用 `.glsl` 编写，测试前使用构建脚本自动生成对应的 `.js` 文件。`Three.js`、`clay.gl` 使用[这种方式](https://github.com/pissang/claygl/blob/master/build/glsl2js.js)。
前者的好处是测试流程无需做过多修改，坏处则是无法享受编辑器对于 GLSL 的语法高亮，影响开发体验。而后者又需要编写额外的 `glsl2js` 的转换脚本。
我们显然希望如后者一样直接写 GLSL，但最好能让测试框架帮助我们完成自动转换的工作。
之前我们选择 `@babel/preset-typescript` 而非官方 `tsc` 的一大原因就是可以使用 `babel` 丰富的插件，`babel-plugin-inline-import` 就能完成类似 webpack 中 `raw-loader` 的功能，直接以字符串形式引入 GLSL 代码：
```javascript
// 以字符串形式引入 GLSL 代码
import circleFrag from '../../shaders/circle_frag.glsl';
```
这样测试框架只需要使用同一套 babel 项目全局配置就行了。我们使用 Jest：
```javascript
// jest.config.js
module.exports = {
transform: {
'^.+\\.(ts|tsx)$': 'babel-jest',
},
}
```
下面就可以编写测试用例了。
## 测试用例编写
我们将测试用例分成三类：
* 内部服务的单元测试
* 渲染服务结果的 Snapshot 快照测试
* React 组件测试
将测试用例放在任意路径的 `__tests__` 文件夹下并以 `xxx.spec.ts` 命名就可以帮助框架发现并执行了。
使用 `yarn test` 运行所有测试用例：
![](./screenshots/jest.png)
### 单元测试
这类测试直接使用 Jest API 就好了，我们以 `@l7/core` 模块的 `ShaderModuleService` 为例，编写一个简单的测试用例：
```typescript
// services/shader/__test__/shader.spec.ts
import 'reflect-metadata';
import IShaderModuleService from '../IShaderModuleService';
import ShaderModuleService from '../ShaderModuleService';
describe('ShaderService', () => {
let shaderService: IShaderModuleService;
beforeEach(() => {
shaderService = new ShaderModuleService();
});
it('should register common module correctly and generate fragment/vertex shader code', () => {
const rawShaderCode = `
#define PI 3.14
`;
const commonModule = {
fs: rawShaderCode,
vs: rawShaderCode,
};
shaderService.registerModule('common', commonModule);
const { vs, fs } = shaderService.getModule('common');
expect(vs).toMatch(/3\.14/);
expect(fs).toMatch(/3\.14/);
});
});
```
### 渲染结果测试
得益于 L7 使用的基于 Inversify 的依赖注入方案，我们能够很轻易地将渲染服务替换为基于 headless-gl 的渲染服务。
具体到我们目前的渲染服务实现 `regl`，它能轻易做到这一点。事实上 regl 的[测试用例](https://github.com/regl-project/regl/blob/gh-pages/test/util/create-context.js#L28)也是这样使用的。
### [WIP] React 组件测试
### Coverage Report
我们使用 Coveralls.io：
```json
// package.json
"coveralls": "jest --coverage && cat ./tests/coverage/lcov.info | coveralls",
```
运行 `yarn coveralls` 可以查看代码覆盖率，我们为分支、行覆盖率等指标设置了阈值：
```javascript
// jest.config.js
module.exports = {
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
};
```
## TravisCI
TravisCI 检测到 `yarn.lock` 就会默认安装 `yarn` 并使用它安装依赖，所以不需要[额外的配置](https://yarnpkg.com/en/docs/install-ci#travis-tab)。
TravisCI 配合之前的 Coveralls.io。

138
docs/api/component/control.en.md Normal file
View File

@ -0,0 +1,138 @@
---
title: Control
order: 1
---
# control
地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
## 构造函数
```javascript
const baseControl = new L7.Control.Base(option);
```
#### option
 position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
#### scene 内置地图组件
zoom 地图放大缩小  默认添加<br />Scale 地图比例尺   默认添加<br />attribution 地图数据属性  默认添加<br />layer 图层列表
**scene配置项设置控件添加状态**
```javascript
scene = new L7.scene({
zoomControl: true,
scaleControl: true,
attributionControl: true
})
```
####
#### Zoom
放大缩小组件 默认 左上角
```javascript
new L7.Control.Zoom({
position: 'topleft'
}).addTo(scene);
```
#### Scale
比例尺组件默认左下角
```javascript
new L7.Control.Scale({
position: 'bottomleft'
}).addTo(scene);
```
#### attribution
默认右下角
```javascript
new L7.Control.Attribution({
position: 'bottomleft'
}).addTo(scene);
```
#### layer
图层列表目前只支持可视化overlayers 图层控制
```javascript
var overlayers = {
"围栏填充": layer,
"围栏边界": layer2
};
new L7.Control.Layers({
overlayers: overlayers
}).addTo(scene);
```
## 方法
#### onAdd
组件添加到地图Scene时调用，自定义组件时需要实现此方法
#### addTo
添加到地图scene
```javascript
control.addTo(scene);
```
#### setPosition
设置组件位置
```javascript
control.setPosition('bottomright');
```
#### remove
移除地图组件
```javascript
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

137
docs/api/component/control.zh.md Normal file
View File

@ -0,0 +1,137 @@
---
title: Control
order: 3
---
# control
地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
## 构造函数
```javascript
const baseControl = new L7.Control.Base(option);
```
#### option
 position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
#### scene 内置地图组件
zoom 地图放大缩小  默认添加<br />Scale 地图比例尺   默认添加<br />attribution 地图数据属性  默认添加<br />layer 图层列表
**scene配置项设置控件添加状态**
```javascript
scene = new L7.scene({
zoomControl: true,
scaleControl: true,
attributionControl: true
})
```
####
#### Zoom
放大缩小组件 默认 左上角
```javascript
new L7.Control.Zoom({
position: 'topleft'
}).addTo(scene);
```
#### Scale
比例尺组件默认左下角
```javascript
new L7.Control.Scale({
position: 'bottomleft'
}).addTo(scene);
```
#### attribution
默认右下角
```javascript
new L7.Control.Attribution({
position: 'bottomleft'
}).addTo(scene);
```
#### layer
图层列表目前只支持可视化overlayers 图层控制
```javascript
var overlayers = {
"围栏填充": layer,
"围栏边界": layer2
};
new L7.Control.Layers({
overlayers: overlayers
}).addTo(scene);
```
## 方法
#### onAdd
组件添加到地图Scene时调用，自定义组件时需要实现此方法
#### addTo
添加到地图scene
```javascript
control.addTo(scene);
```
#### setPosition
设置组件位置
```javascript
control.setPosition('bottomright');
```
#### remove
移除地图组件
```javascript
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

83
docs/api/component/marker.en.md Normal file
View File

@ -0,0 +1,83 @@
---
title: Marker
order: 3
---
Marker 地图标注 目前只支持2D dom标注
## 构造函数
Marker<br />`const Marker = new L7.Marker(option)`
#### option
- color        `string `   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32) 设置默认marker的颜色
- element    `Dom|string`    自定义marker Dom节点，可以是dom实例，也可以是dom id
- anchor     `string`  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
- offset    `Array`  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
## 方法
#### setLnglat
设置marker经纬度位置
#### addTo
将marker添加到地图Scene
#### remove
移除marker
#### getElement
获取marker dom Element
#### getLngLat
获取marker经纬度坐标
#### togglePopup
开启或者关闭marker弹出框
#### setPopup
为marker设置popup
#### getPopup
获取marker弹出框
## 示例代码
#### 默认Marker
**<br />` const marker = new L7.Marker({color:'blue'})`
#### 自定义Marker
```javascript
var el = document.createElement('label');
el.className = 'lableclass';
el.textContent = data[i].v;
el.style.background = getColor(data[i].v);
new L7.Marker({
element: el
})
.setLnglat([data[i].x * 1, data[i].y])
.addTo(scene);
```
#### 设置 popup
```javascript
var popup = new L7.Popup({
anchor: 'left'
}).setText(item.name);
new L7.Marker({
element: el
}).setLnglat(item.coordinates)
.setPopup(popup)
.addTo(scene);
```

83
docs/api/component/marker.zh.md Normal file
View File

@ -0,0 +1,83 @@
---
title: Marker
order: 3
---
Marker 地图标注 目前只支持2D dom标注
## 构造函数
Marker<br />`const Marker = new L7.Marker(option)`
#### option
- color        `string `   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32) 设置默认marker的颜色
- element    `Dom|string`    自定义marker Dom节点，可以是dom实例，也可以是dom id
- anchor     `string`  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
- offset    `Array`  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
## 方法
#### setLnglat
设置marker经纬度位置
#### addTo
将marker添加到地图Scene
#### remove
移除marker
#### getElement
获取marker dom Element
#### getLngLat
获取marker经纬度坐标
#### togglePopup
开启或者关闭marker弹出框
#### setPopup
为marker设置popup
#### getPopup
获取marker弹出框
## 示例代码
#### 默认Marker
**<br />` const marker = new L7.Marker({color:'blue'})`
#### 自定义Marker
```javascript
var el = document.createElement('label');
el.className = 'lableclass';
el.textContent = data[i].v;
el.style.background = getColor(data[i].v);
new L7.Marker({
element: el
})
.setLnglat([data[i].x * 1, data[i].y])
.addTo(scene);
```
#### 设置 popup
```javascript
var popup = new L7.Popup({
anchor: 'left'
}).setText(item.name);
new L7.Marker({
element: el
}).setLnglat(item.coordinates)
.setPopup(popup)
.addTo(scene);
```

92
docs/api/component/popup.en.md Normal file
View File

@ -0,0 +1,92 @@
---
title: Popup
order: 4
---
# popup
地图标注信息窗口，用于展示地图要素的属性信息
## 构造函数
Popup
```javascript
const popup = new L7.Popup(option)
```
#### option
- closeButton
- closeOnClick
- maxWidth
- anchor
## 方法
#### setLnglat
设置popup的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
```javascript
popup.setLnglat([112, 32]);
```
#### addTo
**参数**：scene 地图scene实例
将popup添加到地图scene显示
```javascript
popup.addTo(scene);
```
#### setHtml
**参数**：html 字符串
设置popup html 内容
```javascript
var html = '<p>\u7701\u4EFD\uFF1A' + feature.s + '</p>\n <p>\u5730\u533A\uFF1A' + feature.m + '</p>\n <p>\u6E29\u5EA6\uFF1A' + feature.t + '</p>\n ';
popup.setHtml(html);
```
#### setText
设置 popup 显示文本内容
```javascript
popup.setText('hello world');
```
#### remove
移除popup
```javascript
popup.remove()
```
## 事件
#### close
```javascript
popup.on('close',()=>{})
```
## 示例代码
#### 添加popup
```
var html = '<p>'+feature.m+'</p>';
const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
```
### FAQ

92
docs/api/component/popup.zh.md Normal file
View File

@ -0,0 +1,92 @@
---
title: popup
order: 0
---
# popup
地图标注信息窗口，用于展示地图要素的属性信息
## 构造函数
Popup
```javascript
const popup = new L7.Popup(option)
```
#### option
- closeButton
- closeOnClick
- maxWidth
- anchor
## 方法
#### setLnglat
设置popup的经纬度位置<br />**参数**：lnglat 经纬度数组 [112,32]
```javascript
popup.setLnglat([112, 32]);
```
#### addTo
**参数**：scene 地图scene实例
将popup添加到地图scene显示
```javascript
popup.addTo(scene);
```
#### setHtml
**参数**：html 字符串
设置popup html 内容
```javascript
var html = '<p>\u7701\u4EFD\uFF1A' + feature.s + '</p>\n <p>\u5730\u533A\uFF1A' + feature.m + '</p>\n <p>\u6E29\u5EA6\uFF1A' + feature.t + '</p>\n ';
popup.setHtml(html);
```
#### setText
设置 popup 显示文本内容
```javascript
popup.setText('hello world');
```
#### remove
移除popup
```javascript
popup.remove()
```
## 事件
#### close
```javascript
popup.on('close',()=>{})
```
## 示例代码
#### 添加popup
```
var html = '<p>'+feature.m+'</p>';
const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
```
### FAQ

75
docs/api/l7.en.md Normal file
View File

@ -0,0 +1,75 @@
---
title: Introduction
order: 0
redirect_from:
- /en/docs/api
---
#### An open source large-scale geospatial data visualization analysis development framework powered by WebGL
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
<source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
## 核心特性
🌏 数据驱动可视化展示
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
🌏 2D，3D 一体化的海量数据高性能渲染
百万级空间数据实时，动态渲染。
🌏 简单灵活的数据接入
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
🌏 多地图底图支持，支持离线内网部署
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
## 支持丰富的图表类型
### 点图层
- 气泡图
- 散点图
- 符号地图
- 3D柱状地图
- 聚合地图
- 复合图表地图
- 自定义Marker
### 线图层
- 路径地图
- 弧线，支持2D弧线、3D弧线以及大圆航线
- 等值线
### 面图层
- 填充图
- 3D填充图
### 热力图
- 经典热力图
- 蜂窝热力图
- 网格热力图
### 栅格地图
- 图片
- Raster
## L7 2.0 Roadmap
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

76
docs/api/l7.zh.md Normal file
View File

@ -0,0 +1,76 @@
---
title: 简介
order: 0
redirect_from:
- /zh/docs/api
---
# L7 地理空间数据可视分析引擎
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
<source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
## 核心特性
🌏 数据驱动可视化展示
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
🌏 2D，3D 一体化的海量数据高性能渲染
百万级空间数据实时，动态渲染。
🌏 简单灵活的数据接入
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
🌏 多地图底图支持，支持离线内网部署
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
## 支持丰富的图表类型
### 点图层
- 气泡图
- 散点图
- 符号地图
- 3D柱状地图
- 聚合地图
- 复合图表地图
- 自定义Marker
### 线图层
- 路径地图
- 弧线，支持2D弧线、3D弧线以及大圆航线
- 等值线
### 面图层
- 填充图
- 3D填充图
### 热力图
- 经典热力图
- 蜂窝热力图
- 网格热力图
### 栅格地图
- 图片
- Raster
## L7 2.0 Roadmap
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

205
docs/api/layer/heatmap.en.md Normal file
View File

@ -0,0 +1,205 @@
---
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()
```

204
docs/api/layer/heatmap.zh.md Normal file
View File

@ -0,0 +1,204 @@
---
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()
```

23
docs/api/layer/imagelayer.en.md Normal file
View File

@ -0,0 +1,23 @@
---
title: ImageLayer
order: 5
---
# ImageLayer
## 简介
将图片添加到地图上，需要指定图片的经纬度范围
### 代码示例
```javascript
const layer = new ImageLayer({});
layer.source(
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{
parser: {
type: 'image',
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
}
}
);
```

23
docs/api/layer/imagelayer.zh.md Normal file
View File

@ -0,0 +1,23 @@
---
title: ImageLayer
order: 5
---
# ImageLayer
## 简介
将图片添加到地图上，需要指定图片的经纬度范围
### 代码示例
```javascript
const layer = new ImageLayer({});
layer.source(
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
{
parser: {
type: 'image',
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
}
}
);
```

322
docs/api/layer/layer.en.md Normal file
View File

@ -0,0 +1,322 @@
---
title: Map Layer
order: 0
---
# Layer
## 简介
L7 Layer 接口设计遵循图形语法，在可视表达上
语法示例
```javascript
new Layer(option)
.source()
.color()
.size()
.shape()
.style()
```
## 构造函数
## 配置项
### visable
图层是否可见   {bool } default true
### zIndex
 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0
### minZoom
图层显示最小缩放等级，（0-18）   {number}  default 0
### maxZoom
 图层显示最大缩放等级 （0-18）   {number}  default 18
## 鼠标事件
beta版当前不支持，正式版会支持
```javascript
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
layer.on('dblclick', (ev)=>{}); // 鼠标左键双击图层事件
layer.on('mousemove', (ev)=>{}); // 鼠标在图层上移动时触发
layer.on('mouseover', (ev)=>{}); // 鼠标移入图层要素内时触发
layer.on('mouseout', (ev)=>{}); // 鼠标移出图层要素时触发
layer.on('mouseup', (ev)=>{}); // 鼠标在图层上单击抬起时触发
layer.on('mousedown', (ev)=>{}); // 鼠标在图层上单击按下时触发
layer.on('mouseleave', (ev)=>{}); // 鼠标离开图层要素
layer.on('rightclick', (ev)=>{}); // 鼠标右键图层要素
```
## 方法
### source
数据源为layer设置数据 source(data,config)
- data {geojson|json|csv}
      源数据
- config  可选 数据源配置项
- parser 数据解析，默认是解析层geojson
- transforms [transform，transform ]  数据处理转换 可设置多个
 parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source)
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'map',
callback:function(item){
const [x, y] = item.coordinates;
item.lat = item.lat*1;
item.lng = item.lng*1;
item.v = item.v *1;
item.coordinates = [x*1,y*1];
return item;
}
},
{
type: 'hexagon',
size: 6000,
field:'v',
method:'sum'
}
]
})
```
###
### scale
cscle('field', scaleConfig)
(field: string, scaleConfig: object)
为指定的数据字段进行列定义，返回 layer 实例。
- `field` 字段名。
- `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
```javascript
{
type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize
}
```
### size
将数据值映射到图形的大小上的方法。
**注意：** 
不同图层的 size 的含义有所差别：
- point 图形的 size 影响点的半径大小和高度；
- line, arc, path 中的 size 影响线的粗细,和高度；
- polygon size 影响的是高度
```javascript
pointLayer.size(10); // 常量
pointLayer.size('type'); // 使用字段映射到大小
pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值
pointLayer.size('type', (type) => { // 回调函数
if(type === 'a') {
return 10;
}
return 5;
});
```
#### size(value）
传入数字常量，如 `pointLayer.size(20)`
#### size(field)
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
#### size(field, callback)
使用回调函数控制图形大小。
- `callback`: function 回调函数。
```javascript
pointLayer.size('age', (value) => {
if(value === 1) {
return 5;
}
return 10;
});
```
### color
将数据值映射到图形的颜色上的方法。
```javascript
layer.color('red'); // 常量颜色
layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
layer.color('type', [ 'red', 'blue' ]) // 指定颜色
layer.color('type', (type) => { // 通过回调函数
if (type === 'a') {
return 'red';
}
return 'blue';
});
layer.color('type*value', (type, value) => { //多个参数，通过回调函数
if (type === 'a' && value > 100) {
return 'red';
}
return 'blue';
});
```
#### color(value)
参数：`value` ：string
只支持接收一个参数，value 可以是：
- 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
示例
```javascript
layer.color('name') // 映射数据字段
layer.color('white') // 指定颜色
```
#### color(field, colors)
参数：
- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
-  `colors`: string | array | function
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
```javascript
layer.color('name'); // 使用默认的颜色
layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色
```
- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
```javascript
layer.color('gender', (value) => {
if(value === 1) {
return 'red'
}
return 'blue';
});
layer.color('gender*age', (gender, age) => {
if(age === 20 && gender ==' 男' ) {
return 'red'
}
return 'blue';
});
```
### shape
将数据值映射到图形的形状上的方法。
**shape(shape)**
参数`shape` string
只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
| layer类型 | shape类型 | 备注 |
| --- | --- | --- |
| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | |
| line | line,arc, arc3d, greatcircle | |
| polygon | fill,line, extrude | |
**shape(field, shapes)**
**shape(field, callback)**
### style
用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
- fill
- opacity  设置透明度
- stroke 线填充颜色
- strokeWidth 线的宽度
```javascript
layer.style({
fill:'red',
opacity:0.8,
stroke:'white'
})
```
### show
图层显示
```javascript
layer.show();
```
### hide
图层隐藏
```javascript
layer.hide();
```
### fitBounds
缩放到图层范围
```javascript
layer.fitBounds()
```

322
docs/api/layer/layer.zh.md Normal file
View File

@ -0,0 +1,322 @@
---
title: Layer
order: 0
---
# Layer
## 简介
L7 Layer 接口设计遵循图形语法，在可视表达上
语法示例
```javascript
new Layer(option)
.source()
.color()
.size()
.shape()
.style()
```
## 构造函数
## 配置项
### visable
图层是否可见   {bool } default true
### zIndex
 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0
### minZoom
图层显示最小缩放等级，（0-18）   {number}  default 0
### maxZoom
 图层显示最大缩放等级 （0-18）   {number}  default 18
## 鼠标事件
beta版当前不支持，正式版会支持
```javascript
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
layer.on('dblclick', (ev)=>{}); // 鼠标左键双击图层事件
layer.on('mousemove', (ev)=>{}); // 鼠标在图层上移动时触发
layer.on('mouseover', (ev)=>{}); // 鼠标移入图层要素内时触发
layer.on('mouseout', (ev)=>{}); // 鼠标移出图层要素时触发
layer.on('mouseup', (ev)=>{}); // 鼠标在图层上单击抬起时触发
layer.on('mousedown', (ev)=>{}); // 鼠标在图层上单击按下时触发
layer.on('mouseleave', (ev)=>{}); // 鼠标离开图层要素
layer.on('rightclick', (ev)=>{}); // 鼠标右键图层要素
```
## 方法
### source
数据源为layer设置数据 source(data,config)
- data {geojson|json|csv}
      源数据
- config  可选 数据源配置项
- parser 数据解析，默认是解析层geojson
- transforms [transform，transform ]  数据处理转换 可设置多个
 parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source)
```javascript
layer.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms:[
{
type: 'map',
callback:function(item){
const [x, y] = item.coordinates;
item.lat = item.lat*1;
item.lng = item.lng*1;
item.v = item.v *1;
item.coordinates = [x*1,y*1];
return item;
}
},
{
type: 'hexagon',
size: 6000,
field:'v',
method:'sum'
}
]
})
```
###
### scale
cscle('field', scaleConfig)
(field: string, scaleConfig: object)
为指定的数据字段进行列定义，返回 layer 实例。
- `field` 字段名。
- `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
```javascript
{
type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize
}
```
### size
将数据值映射到图形的大小上的方法。
**注意：** 
不同图层的 size 的含义有所差别：
- point 图形的 size 影响点的半径大小和高度；
- line, arc, path 中的 size 影响线的粗细,和高度；
- polygon size 影响的是高度
```javascript
pointLayer.size(10); // 常量
pointLayer.size('type'); // 使用字段映射到大小
pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值
pointLayer.size('type', (type) => { // 回调函数
if(type === 'a') {
return 10;
}
return 5;
});
```
#### size(value）
传入数字常量，如 `pointLayer.size(20)`
#### size(field)
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
#### size(field, callback)
使用回调函数控制图形大小。
- `callback`: function 回调函数。
```javascript
pointLayer.size('age', (value) => {
if(value === 1) {
return 5;
}
return 10;
});
```
### color
将数据值映射到图形的颜色上的方法。
```javascript
layer.color('red'); // 常量颜色
layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
layer.color('type', [ 'red', 'blue' ]) // 指定颜色
layer.color('type', (type) => { // 通过回调函数
if (type === 'a') {
return 'red';
}
return 'blue';
});
layer.color('type*value', (type, value) => { //多个参数，通过回调函数
if (type === 'a' && value > 100) {
return 'red';
}
return 'blue';
});
```
#### color(value)
参数：`value` ：string
只支持接收一个参数，value 可以是：
- 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
示例
```javascript
layer.color('name') // 映射数据字段
layer.color('white') // 指定颜色
```
#### color(field, colors)
参数：
- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
-  `colors`: string | array | function
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
```javascript
layer.color('name'); // 使用默认的颜色
layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色
```
- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
```javascript
layer.color('gender', (value) => {
if(value === 1) {
return 'red'
}
return 'blue';
});
layer.color('gender*age', (gender, age) => {
if(age === 20 && gender ==' 男' ) {
return 'red'
}
return 'blue';
});
```
### shape
将数据值映射到图形的形状上的方法。
**shape(shape)**
参数`shape` string
只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
| layer类型 | shape类型 | 备注 |
| --- | --- | --- |
| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | |
| line | line,arc, arc3d, greatcircle | |
| polygon | fill,line, extrude | |
**shape(field, shapes)**
**shape(field, callback)**
### style
用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
- fill
- opacity  设置透明度
- stroke 线填充颜色
- strokeWidth 线的宽度
```javascript
layer.style({
fill:'red',
opacity:0.8,
stroke:'white'
})
```
### show
图层显示
```javascript
layer.show();
```
### hide
图层隐藏
```javascript
layer.hide();
```
### fitBounds
缩放到图层范围
```javascript
layer.fitBounds()
```

72
docs/api/layer/linelayer.en.md Normal file
View File

@ -0,0 +1,72 @@
---
title: LineLayer
order: 2
---
## 线图层
### shape
线图层支持4种 shape
- line 绘制路径图，
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
- arc3d 3d弧线地图 3D视角
⚠️ 弧线只需要设置起始点坐标即可
```
new LineLayer()
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
```
如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
```
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
106.5234375,
57.51582286553883
],
[
136.40625,
61.77312286453146
]
]
}
}
]
}
```
### size
线图层 可以设置高度
- size 类型为number 则表示 line的宽度
- size 类型为 [number , number] 分别表示宽度和高度
```javascript
lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1,2]); // 宽度为1，高度2
```

72
docs/api/layer/linelayer.zh.md Normal file
View File

@ -0,0 +1,72 @@
---
title: LineLayer
order: 2
---
## 线图层
### shape
线图层支持4种 shape
- line 绘制路径图，
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
- arc3d 3d弧线地图 3D视角
⚠️ 弧线只需要设置起始点坐标即可
```
new LineLayer()
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
```
如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
```
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
106.5234375,
57.51582286553883
],
[
136.40625,
61.77312286453146
]
]
}
}
]
}
```
### size
线图层 可以设置高度
- size 类型为number 则表示 line的宽度
- size 类型为 [number , number] 分别表示宽度和高度
```javascript
lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1,2]); // 宽度为1，高度2
```

77
docs/api/layer/pointlayer.en.md Normal file
View File

@ -0,0 +1,77 @@
---
title: PointLayer
order: 1
---
# PointLayer
## 简介
点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。
shape 支持
**3D类型 柱图**
```
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
```
**2D 符号图**
```
'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica',
```
**图片标注**
通过 ```Scene.addImage()``` 可以添加图片资源，
### 代码示例
#### 基本图形显示示例
```javascript
import { PointLayer } from "@antv/l7"
const layer = PointLayer({
zIndex: 2
})
.source(data.list, {
type: 'array',
x: 'j',
y: 'w',
})
.shape('cylinder')
.size('t',(level)=> {
return [4,4,(level+40)];
})
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
```
#### 符号图
使用图片添加地图标注
```javascript
scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
const layer = new PointLayer({
zIndex: 4
})
.source(city)
.size(20.0)
.shape('local')
.color('#0D408C')
```

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

@ -0,0 +1,78 @@
---
title: PointLayer
order: 1
---
# PointLayer
## 简介
点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。
shape 支持
**3D类型 柱图**
```
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
```
**2D 符号图**
```
'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica',
```
**图片标注**
通过 ```Scene.addImage()``` 可以添加图片资源，
### 代码示例
#### 基本图形显示示例
```javascript
import { PointLayer } from "@antv/l7"
const layer = PointLayer({
zIndex: 2
})
.source(data.list, {
type: 'array',
x: 'j',
y: 'w',
})
.shape('cylinder')
.size('t',(level)=> {
return [4,4,(level+40)];
})
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
```
#### 符号图
使用图片添加地图标注
```javascript
scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
const layer = new PointLayer({
zIndex: 4
})
.source(city)
.size(20.0)
.shape('local')
.color('#0D408C')
```

26
docs/api/layer/polygonlayer.en.md Normal file
View File

@ -0,0 +1,26 @@
---
title: PolygonLayer
order: 3
---
# 填充图
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
### shape
填充图支持3种shape
- fill 绘制填充面 不支持数据映射
- line 绘制填充图描边 不支持数据映射
- extrude 对填充图3D拉伸 不支持数据映射
``` javascript
PolyonLayer.shape('fill');
PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude'); // size 表示高度
```
其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)

26
docs/api/layer/polygonlayer.zh.md Normal file
View File

@ -0,0 +1,26 @@
---
title: PolygonLayer
order: 3
---
# 填充图
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
### shape
填充图支持3种shape
- fill 绘制填充面 不支持数据映射
- line 绘制填充图描边 不支持数据映射
- extrude 对填充图3D拉伸 不支持数据映射
``` javascript
PolyonLayer.shape('fill');
PolyonLayer.shape('line').size(1); // size 表示线宽度
PolyonLayer.shape('extrude'); // size 表示高度
```
其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)

174
docs/api/quickstart.en.md Normal file
View File

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

174
docs/api/quickstart.zh.md Normal file
View File

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

321
docs/api/scene.en.md Normal file
View File

@ -0,0 +1,321 @@
---
title: Scene
order: 1
---
## 简介
`Scene `基础的地图类,提供地图创建，图层创建，管理等功能
示例代码
```javascript
import {Scene} from '@l7/scene';
const scene =new L7.Scene({
id:'map',
mapStyle:'dark',
center:[ 110.770672, 34.159869 ],
pitch:45
})
```
### 构造函数
**Scene**<br />支持两种实例化方式
- 独立实例化 内部根据id自动穿件地图实例
- 传入地图实例
#### 独立实例化 Scene
```javascript
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark',
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 12,
maxZoom:20,
minZoom:0,
});
```
#### 根据map 实例创建Sence
_L7 基于高德地图3D模式开发的，因此传入Map实例 __viewModes需要设置成3d_<br />_
```javascript
var mapinstance = new AMap.Map('map',{
center: [ 120.19382669582967, 30.258134 ],
viewMode: '3D',
pitch: 0,
zoom: 12,
maxZoom:20,
minZoom:0,
});
const scene = new L7.Scene({
mapStyle: 'dark',
map:mapinstance
});
```
## map
L7 在scene 下保留了高德地图实例，可以通过scene.map 调用高德地图的map方法。<br />map 实例方法见[高德地图文档](https://lbs.amap.com/api/javascript-api/reference/map)
```javascript
scene.map
```
## 构造类
### PointLayer
新建点图层
### PolylineLayer
新建线图层
### PolygonLayer
新建面图层
### ImageLayer
新建图片图层
## 配置项
### id
需传入 dom 容器或者容器 id  {domObject || string} [必选]
### zoom
地图初始显示级别 {number} （0-22）
### center
地图初始中心经纬度 {Lnglat}
### pitch
地图初始俯仰角度 {number}  default 0
### mapSyle
地图样式 {style} 目前仅支持高德地图。 default 'dark'<br />L7 内置三种种默认地图样式 dark | light|blank 空地图
设置地图的显示样式，目前支持两种地图样式：<br />第一种：自定义地图样式，如`"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"`<br />可前往[地图自定义平台](https://lbs.amap.com/dev/mapstyle/index)定制自己的个性地图样式；<br />第二种：官方样式模版,如`"amap://styles/grey"`。<br />其他模版样式及自定义地图的使用说明见[开发指南](https://lbs.amap.com/api/javascript-api/guide/create-map/mapstye/)
### minZoom
地图最小缩放等级 {number}  default 0 (0-22)
### maxZoom
地图最大缩放等级 {number}  default 22 (0-22)
### rotateEnable
地图是否可旋转 {Boolean} default true
## 方法
### getZoom
获取当前缩放等级
```javascript
scene.getZoom();
```
return {float}  当前缩放等级
### getLayers()
获取所有的地图图层
```javascript
scene.getLayers();
```
return 图层数组 {Array}
### getCenter()
获取地图中心点
```javascript
scene.getCenter()
```
return {Lnglat} :地图中心点
### getSize()
获取地图容器大小
```javascript
scene.getSize()
```
return { Object } 地图容器的 width,height
### getPitch()
获取地图俯仰角
```javascript
scene.getPitch();
```
return {number} pitch
### setCenter()
设置地图中心点坐标
```javascript
scene.setCenter([lng,lat])
```
参数：`center` {LngLat} 地图中心点
### setZoomAndCenter
设置地图等级和中心
```javascript
scene.setZoomAndCenter(zoom,center)
```
参数：zoom {number}<br />center {LngLat}
### setRotation
设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]
```javascript
scene.setRotation(rotation)
```
参数： `rotation` {number}
### zoomIn
地图放大一级
```javascript
scene.zoomIn()
```
### zoomOut
地图缩小一级
```javascript
scene.ZoomOUt()
```
### panTo
地图平移到指定的位置
```javascript
scene.panTo(LngLat)
```
参数：`center` LngLat 中心位置坐标
### panBy
以像素为单位沿X方向和Y方向移动地图
```javascript
scene.panBy(x,y)
```
参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br />      `y` {number} 垂直方向移动像素 向下为正方向
### setPitch
设置地图仰俯角度
```javascript
scene.setPitch(pitch)
```
参数 :<br />   `pitch` {number}
###
### setStatus
设置当前地图显示状态，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等   
```javascript
scene.setStatus({
dragEnable: true,
keyboardEnable: true,
doubleClickZoom: true,
zoomEnable: true,
rotateEnable: true
});
```
### fitBounds
地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
```javascript
scene.fitBounds([112,32,114,35]);
```
### removeLayer
移除layer
```javascript
scene.removeLayer(layer)
```
参数<br />`layer` {Layer}
### getLayers
 获取所有的layer
```javascript
scene.getLayers()
```
return layers  {array}
## 事件
### on
事件监听
#### 参数
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
### off
移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
### 地图事件
```javascript
scene.on('loaded',()=>{})  //地图加载完成触发
scene.on('mapmove',()=>{}) // 地图平移时触发事件
scene.on('movestart',()=>{}) // 地图平移开始时触发
scene.on('moveend',()=>{}) // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
scene.on('zoomchange',()=>{}) // 地图缩放级别更改后触发
scene.on('zoomstart',()=>{}) // 缩放开始时触发
scene.on('zoomend',()=>{}) // 缩放停止时触发
```
### 鼠标事件
```javascript
scene.on('click', (ev)=>{}); // 鼠标左键点击事件
scene.on('dblclick', (ev)=>{}); // 鼠标左键双击事件
scene.on('mousemove', (ev)=>{}); // 鼠标在地图上移动时触发
scene.on('mousewheel', (ev)=>{}); // 鼠标滚轮开始缩放地图时触发
scene.on('mouseover', (ev)=>{}); // 鼠标移入地图容器内时触发
scene.on('mouseout', (ev)=>{}); // 鼠标移出地图容器时触发
scene.on('mouseup', (ev)=>{}); // 鼠标在地图上单击抬起时触发
scene.on('mousedown', (ev)=>{}); // 鼠标在地图上单击按下时触发
scene.on('rightclick', (ev)=>{}); // 鼠标右键单击事件
scene.on('dragstart', (ev)=>{}); //开始拖拽地图时触发
scene.on('dragging', (ev)=>{}); // 拖拽地图过程中触发
scene.on('dragend', (ev)=>{}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
```
### 其它事件
```javascript
scene.on('resize',()=>{}) // 地图容器大小改变事件
```

292
docs/api/scene.zh.md Normal file
View File

@ -0,0 +1,292 @@
---
title: 场景 Scene
order: 1
---
# 简介
## Scene
L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理
## Map
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理
只需要通过Scene传入地图配置项即可。
目前L7 支持两种地图底图
- 高德地图 国内业务场景 合规中国地图
- MapBox 国际业务，或者内网离线部署场景
示例代码
```javascript
import {Scene} from '@l7/scene';
const scene =new L7.Scene({
id:'map',
mapStyle:'dark',
center:[ 110.770672, 34.159869 ],
pitch:45
})
```
### 构造函数
**Scene**
## map
L7 在scene 下保留了高德地图实例，可以通过scene.map 调用高德地图的map方法。<br />map 实例方法见[高德地图文档](https://lbs.amap.com/api/javascript-api/reference/map)
```javascript
scene.map
```
## 配置项
### 地图配置项
### id
需传入 dom 容器或者容器 id  {domObject || string} [必选]
### zoom
地图初始显示级别 {number} （0-22）
### center
地图初始中心经纬度 {Lnglat}
### pitch
地图初始俯仰角度 {number}  default 0
### mapSyle
简化地图样式设置，L7 内置了三种主题默认样式
- dark
- light
- normal
地图样式 {style} 目前仅支持高德地图。 default 'dark'<br />L7 内置三种种默认地图样式 dark | light|blank 空地图
设置地图的显示样式，目前支持两种地图样式：<br />第一种：自定义地图样式，如`"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"`<br />可前往[地图自定义平台](https://lbs.amap.com/dev/mapstyle/index)定制自己的个性地图样式；<br />第二种：官方样式模版,如`"amap://styles/grey"`。<br />其他模版样式及自定义地图的使用说明见[开发指南](https://lbs.amap.com/api/javascript-api/guide/create-map/mapstye/)
### minZoom
地图最小缩放等级 {number}  default 0 (0-22)
### maxZoom
地图最大缩放等级 {number}  default 22 (0-22)
### rotateEnable
地图是否可旋转 {Boolean} default true
## 方法
### getZoom
获取当前缩放等级
```javascript
scene.getZoom();
```
return {float}  当前缩放等级
### getLayers()
获取所有的地图图层
```javascript
scene.getLayers();
```
return 图层数组 {Array}
### getCenter()
获取地图中心点
```javascript
scene.getCenter()
```
return {Lnglat} :地图中心点
### getSize()
获取地图容器大小
```javascript
scene.getSize()
```
return { Object } 地图容器的 width,height
### getPitch()
获取地图俯仰角
```javascript
scene.getPitch();
```
return {number} pitch
### setCenter()
设置地图中心点坐标
```javascript
scene.setCenter([lng,lat])
```
参数：`center` {LngLat} 地图中心点
### setZoomAndCenter
设置地图等级和中心
```javascript
scene.setZoomAndCenter(zoom,center)
```
参数：zoom {number}<br />center {LngLat}
### setRotation
设置地图顺时针旋转角度，旋转原点为地图容器中心点，取值范围 [0-360]
```javascript
scene.setRotation(rotation)
```
参数： `rotation` {number}
### zoomIn
地图放大一级
```javascript
scene.zoomIn()
```
### zoomOut
地图缩小一级
```javascript
scene.ZoomOUt()
```
### panTo
地图平移到指定的位置
```javascript
scene.panTo(LngLat)
```
参数：`center` LngLat 中心位置坐标
### panBy
以像素为单位沿X方向和Y方向移动地图
```javascript
scene.panBy(x,y)
```
参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br />      `y` {number} 垂直方向移动像素 向下为正方向
### setPitch
设置地图仰俯角度
```javascript
scene.setPitch(pitch)
```
参数 :<br />   `pitch` {number}
###
### setStatus
设置当前地图显示状态，包括是否可鼠标拖拽移动地图、地图是否可缩放、地图是否可旋转（rotateEnable）、是否可双击放大地图、是否可以通过键盘控制地图旋转（keyboardEnable）等   
```javascript
scene.setStatus({
dragEnable: true,
keyboardEnable: true,
doubleClickZoom: true,
zoomEnable: true,
rotateEnable: true
});
```
### fitBounds
地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
```javascript
scene.fitBounds([112,32,114,35]);
```
### removeLayer
移除layer
```javascript
scene.removeLayer(layer)
```
参数<br />`layer` {Layer}
### getLayers
 获取所有的layer
```javascript
scene.getLayers()
```
return layers  {array}
## 事件
### on
事件监听
#### 参数
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
### off
移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
### 地图事件
```javascript
scene.on('loaded',()=>{})  //地图加载完成触发
scene.on('mapmove',()=>{}) // 地图平移时触发事件
scene.on('movestart',()=>{}) // 地图平移开始时触发
scene.on('moveend',()=>{}) // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发
scene.on('zoomchange',()=>{}) // 地图缩放级别更改后触发
scene.on('zoomstart',()=>{}) // 缩放开始时触发
scene.on('zoomend',()=>{}) // 缩放停止时触发
```
### 鼠标事件
```javascript
scene.on('click', (ev)=>{}); // 鼠标左键点击事件
scene.on('dblclick', (ev)=>{}); // 鼠标左键双击事件
scene.on('mousemove', (ev)=>{}); // 鼠标在地图上移动时触发
scene.on('mousewheel', (ev)=>{}); // 鼠标滚轮开始缩放地图时触发
scene.on('mouseover', (ev)=>{}); // 鼠标移入地图容器内时触发
scene.on('mouseout', (ev)=>{}); // 鼠标移出地图容器时触发
scene.on('mouseup', (ev)=>{}); // 鼠标在地图上单击抬起时触发
scene.on('mousedown', (ev)=>{}); // 鼠标在地图上单击按下时触发
scene.on('rightclick', (ev)=>{}); // 鼠标右键单击事件
scene.on('dragstart', (ev)=>{}); //开始拖拽地图时触发
scene.on('dragging', (ev)=>{}); // 拖拽地图过程中触发
scene.on('dragend', (ev)=>{}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
```
### 其它事件
```javascript
scene.on('resize',()=>{}) // 地图容器大小改变事件
```

27
docs/api/source/geojson.en.md Normal file
View File

@ -0,0 +1,27 @@
---
title: geojson
order: 1
---
# geojson 数据介绍
## 简介
GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
[geojson详细文档]()
## Geojson相关的JS库
### 地理统计分析工具
[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
### 在线工具：
[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据

27
docs/api/source/geojson.zh.md Normal file
View File

@ -0,0 +1,27 @@
---
title: geojson
order: 1
---
# geojson 数据介绍
## 简介
GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
[geojson详细文档]()
## Geojson相关的JS库
### 地理统计分析工具
[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
### 在线工具：
[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据

298
docs/api/source/source.en.md Normal file
View File

@ -0,0 +1,298 @@
---
title: Source
order: 0
---
# Source
### 概述
source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
**parser:**
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。
**transform**
数据转换，数据统计，网格布局，数据聚合等数据操作。
## API
### parser
空间数据分矢量数据和栅格数据两大类
- 矢量数据 支持 csv，geojson，json 三种数据类型
- 栅格数据 支持 image，Raster
#### geojson
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
不需要设置parser 参数
```javascript
layer.source(data)
```
#### json
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
**点数据**
x: 经度字段
y: 纬度字段
```javascript
const data = [{
lng:112.345,
lat:30.455,
value: 10
},{
 lng:114.345,
lat:31.455,
value: 10
 }
]
layer.source(
data,
{
parser: {
type:'json',
x:'lng',
y:'lat',
}
})
```
**线段数据**
type: json
这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标
x:经度字段 起点经度
y:纬度字段 起点纬度
x1:经度字段 终点经度
y1:纬度字段 终点纬度
```javascript
const data = [{
lng1:112.345,
lat1:30.455,
  lng2:112.345,
lat2:30.455,
value: 10
},{
 lng1:114.345,
lat1:31.455,
  lng2:112.345,
lat2:30.455,
value: 10
 }
];
layer.source(
data,
{
parser:{
type:'json',
x:'lng1',
y:'lat1' ,
    x1:'lng1',
y1:'lat2' ,
}
}
})
```
**面数据**
需要指定coordinates 字段, coordinates据格式
**注意面数据 coord  是三层数据结构**
```javascript
[ {
type: "Polygon",
'geometryCoord': [
[
[
115.1806640625,
30.637912028341123
],
[
114.9609375,
29.152161283318915
],
[
117.79541015625001,
27.430289738862594
],
[
118.740234375,
29.420460341013133
],
[
117.46582031249999,
31.50362930577303
],
[
115.1806640625,
30.637912028341123
]
]
]
}
]
layer.source(data,{
parser:{
type:'json',
coordinates:'geometryCoord'
}
})
```
#### csv
点，线数据配置项同json数据类型
```javascript
layer.source(
data,
{
parser:{
type:'csv',
x:'lng1',
y:'lat1' ,
    x1:'lng1',
y1:'lat2' ,
}
})
```
**栅格数据类型****
#### image
 根据图片的经纬度范围，将图片添加到地图上。 配置项
-  type: image
-  extent: 图像的经纬度范围 []
```javascript
layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
parser:{
type:'image',
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
}
})
```
 
#### raster
栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项
- type  raster
- width  数据宽度二维矩阵 columns 
- height 数据高度
- min 数据最大值
- max 数据最小值
- extent 经纬度范围
```javascript
source(values, {
parser: {
type: 'raster',
width: n,
height: m,
min: 0,
max: 8000,
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
}
})
```
### transforms
目前支持三种数据处理方法 map，grid，hexagon transform配置项
- type 数据处理类型
-  tansform cfg  数据处理配置项
#### map
数据处理，支持自定义callback函数
- callback:function 回调函数
```javascript
layer.source(data, {
transforms:[
{
type: 'map',
callback:function(item){
const [x, y] = item.coordinates;
item.lat = item.lat*1;
item.lng = item.lng*1;
item.v = item.v *1;
item.coordinates = [x*1,y*1];
return item;
}
},
```
#### grid
生成方格网布局，根据数据字段统计，主要在网格热力图中使用
-  type: 'grid',
-  size: 网格半径
-  field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度
```javascript
layer.source(data, {
transforms:[
{
type: 'grid',
size: 15000,
field:'v',
method:'sum'
}
]
}
```
#### hexagon
生成六边形网格布局，根据数据字段统计
-  type: 'hexagon',
-  size: 网格半径
-  field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度
```

298
docs/api/source/source.zh.md Normal file
View File

@ -0,0 +1,298 @@
---
title: Source
order: 0
---
# Source
### 概述
source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
**parser:**
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。
**transform:**
数据转换，数据统计，网格布局，数据聚合等数据操作。
## API
### parser
空间数据分矢量数据和栅格数据两大类
- 矢量数据 支持 csv，geojson，json 三种数据类型
- 栅格数据 支持 image，Raster
#### geojson
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
不需要设置parser 参数
```javascript
layer.source(data);
```
#### json
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
**点数据**
x: 经度字段
y: 纬度字段
```javascript
const data = [{
lng:112.345,
lat:30.455,
value: 10
},{
 lng:114.345,
lat:31.455,
value: 10
 }
]
layer.source(
data,
{
parser: {
type:'json',
x:'lng',
y:'lat',
}
})
```
**线段数据**
type: json
这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标
x:经度字段 起点经度
y:纬度字段 起点纬度
x1:经度字段 终点经度
y1:纬度字段 终点纬度
```javascript
const data = [{
lng1:112.345,
lat1:30.455,
  lng2:112.345,
lat2:30.455,
value: 10
},{
 lng1:114.345,
lat1:31.455,
  lng2:112.345,
lat2:30.455,
value: 10
 }
];
layer.source(
data,
{
parser:{
type:'json',
x:'lng1',
y:'lat1' ,
    x1:'lng1',
y1:'lat2' ,
}
}
})
```
**面数据**
需要指定coordinates 字段, coordinates据格式
**注意面数据 coord  是三层数据结构**
```javascript
[ {
type: "Polygon",
'geometryCoord': [
[
[
115.1806640625,
30.637912028341123
],
[
114.9609375,
29.152161283318915
],
[
117.79541015625001,
27.430289738862594
],
[
118.740234375,
29.420460341013133
],
[
117.46582031249999,
31.50362930577303
],
[
115.1806640625,
30.637912028341123
]
]
]
}
];
layer.source(data,{
parser:{
type:'json',
coordinates:'geometryCoord'
}
});
```
#### csv
点，线数据配置项同json数据类型
```javascript
layer.source(
data,
{
parser:{
type:'csv',
x:'lng1',
y:'lat1' ,
    x1:'lng1',
y1:'lat2' ,
}
})
```
**栅格数据类型****
#### image
 根据图片的经纬度范围，将图片添加到地图上。 配置项
-  type: image
-  extent: 图像的经纬度范围 []
```javascript
layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
parser:{
type:'image',
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
}
});
```
 
#### raster
栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项
- type  raster
- width  数据宽度二维矩阵 columns 
- height 数据高度
- min 数据最大值
- max 数据最小值
- extent 经纬度范围
```javascript
source(values, {
parser: {
type: 'raster',
width: n,
height: m,
min: 0,
max: 8000,
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
}
});
```
### transforms
目前支持三种数据处理方法 map，grid，hexagon transform配置项
- type 数据处理类型
-  tansform cfg  数据处理配置项
#### map
数据处理，支持自定义callback函数
- callback:function 回调函数
```javascript
layer.source(data, {
transforms:[
{
type: 'map',
callback:function(item){
const [x, y] = item.coordinates;
item.lat = item.lat*1;
item.lng = item.lng*1;
item.v = item.v *1;
item.coordinates = [x*1,y*1];
return item;
}
}
]
});
```
#### grid
生成方格网布局，根据数据字段统计，主要在网格热力图中使用
-  type: 'grid',
-  size: 网格半径
-  field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度
```javascript
layer.source(data, {
transforms:[
{
type: 'grid',
size: 15000,
field:'v',
method:'sum'
}
],
})
```
#### hexagon
生成六边形网格布局，根据数据字段统计
-  type: 'hexagon',
-  size: 网格半径
-  field: 数据统计字段
-  method:聚合方法  count,max,min,sum,mean5个统计维度
```

65
docs/manual/tutorial/data.en.md Normal file
View File

@ -0,0 +1,65 @@
---
title: data
order: 1
---
## 数据
目前L7支持的数据格式有GeoJson,CSV,JSon Image
GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
## GeoJSON
> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
```json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
110.478515625,
32.76880048488168
],
[
117.68554687499999,
32.76880048488168
],
[
117.68554687499999,
37.64903402157866
],
[
110.478515625,
37.64903402157866
],
[
110.478515625,
32.76880048488168
]
]
]
}
}
]
}
```
## 地理统计分析工具
[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
## 在线工具
[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据
[https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据

74
docs/manual/tutorial/data.zh.md Normal file
View File

@ -0,0 +1,74 @@
---
title: 数据
order: 1
---
## 数据
目前L7支持的数据格式有GeoJson,CSV,JSon Image
GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
## GeoJSON
> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
```json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
110.478515625,
32.76880048488168
],
[
117.68554687499999,
32.76880048488168
],
[
117.68554687499999,
37.64903402157866
],
[
110.478515625,
37.64903402157866
],
[
110.478515625,
32.76880048488168
]
]
]
}
}
]
}
```
## 地理统计分析工具
[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
## 在线工具
[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据
[https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据
## 数据资源
#### 全国行政区划边界 
[支持 geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
#### HighCharts 全球行政区划数据集
[https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/)

33
examples/gallery/basic/demo/arcCircle.js Normal file
View File

@ -0,0 +1,33 @@
import { LineLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'mapbox',
style: 'dark',
center: [ 107.77791556935472, 35.443286920228644 ],
zoom: 2.9142882493605033
});
window.mapScene = scene;
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
.then(res => res.text())
.then(data => {
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,
blur: 0.99
});
scene.addLayer(layer);
});

45
examples/gallery/basic/demo/bus_dark.js Normal file
View File

@ -0,0 +1,45 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers';
const scene = new Scene({
id: 'map',
center: [ 103.83735604457024, 1.360253881403068 ],
pitch: 4.00000000000001,
zoom: 10.210275860702593,
rotation: 19.313180925794313,
type: 'mapbox',
style: 'dark'
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data, {
parser: {
coordinates: 'path',
type: 'json'
}
})
.size('level', level => {
return [ 1.0, level * 1 ];
})
.shape('line')
.color(
'level',
[
'#312B60',
'#4A457E',
'#615C99',
'#816CAD',
'#A67FB5',
'#C997C7',
'#DEB8D4',
'#F5D4E6',
'#FAE4F1',
'#FFF3FC'
].slice(0, 8)
);
scene.addLayer(layer);
});

44
examples/gallery/basic/demo/column_dark.js Normal file
View File

@ -0,0 +1,44 @@
import { Scene } from '@l7/scene';
import { PointLayer } from '@l7/layers';
const scene = new Scene({
id: 'map',
pitch: 35.210526315789465,
type: 'amap',
style: 'dark',
center: [ 104.288144, 31.239692 ],
zoom: 4.4
});
window.mapScene = scene;
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w'
}
})
.shape('cylinder')
.size('t', function(level) {
return [ 1, 2, level * 2 + 20 ];
})
.color('t', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'
])
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
});

59
examples/gallery/basic/demo/light.js Normal file
View File

@ -0,0 +1,59 @@
import { HeatmapLayer } from '@l7/layers';
import { Scene } from '@l7/scene';
const scene = new Scene({
id: 'map',
style: 'dark',
pitch: 43,
center: [ 120.13383079335335, 29.651873105004427 ],
zoom: 7.068989519212174,
type: 'mapbox'
});
window.mapScene = scene;
fetch(
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
)
.then(res => res.text())
.then(data => {
const layer = new HeatmapLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng',
y: 'lat'
},
transforms: [
{
type: 'hexagon',
size: 2500,
field: 'v',
method: 'sum'
}
]
})
.size('sum', sum => {
return sum * 200;
})
.shape('hexagonColumn')
.style({
coverage: 0.8,
angle: 0,
opacity: 1.0
})
.color('sum', [
'#094D4A',
'#146968',
'#1D7F7E',
'#289899',
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#C3F9CC',
'#DEFAC0',
'#ECFFB1'
]);
scene.addLayer(layer);
});

39
examples/gallery/basic/demo/meta.json Normal file
View File

@ -0,0 +1,39 @@
{
"title": {
"zh": "图库",
"en": "Gallery"
},
"demos": [
{
"filename": "column_dark.js",
"title": "",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*WkpEQqzuM-oAAAAAAAAAAABkARQnAQ"
},
{
"filename": "arcCircle.js",
"title": "",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FTp1Roy34qgAAAAAAAAAAABkARQnAQ"
},
{
"filename": "bus_dark.js",
"title": "",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "light.js",
"title": "",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HxpoRIcBA80AAAAAAAAAAABkARQnAQ"
},
{
"filename": "point.js",
"title": "",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Xp7iRaORYuIAAAAAAAAAAABkARQnAQ"
}
,
{
"filename": "normal.js",
"title": "",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
}
]
}

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