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

Merge pull request #1 from antvis/master 

merge master
This commit is contained in:
yanyu510 2020-07-30 18:11:19 +08:00 committed by GitHub
parent 760a044023 7b02173bcb
commit bd31ae7f88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
297 changed files with 16360 additions and 3417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.eslintrc
View File

@ -18,15 +18,6 @@
"html"
],
"rules": {
"no-console": [
"warn",
{
"allow": [
"warn",
"error"
]
}
],
"no-bitwise": [
0
],
@ -40,6 +31,9 @@
"jsdoc/require-param": 0,
"linebreak-style": [
0
]
],
"indent": ["error", 2, {
"ignoredNodes": ["TemplateLiteral"]
}]
}
}

97
.github/CONTRIBUTING_ENGLISH.md vendored Normal file
View File

@ -0,0 +1,97 @@
# Contributing to L7
👍🎉 Welcome to contribute code to L7! 🎉👍
## Pre-installation
### Install Yarn
Since Yarn workspace is used, Yarn needs to be installed first: https://yarnpkg.com/en/docs/install#windows-stable
### Windows environment configuration
[The L7 test solution](https://github.com/antvis/L7/blob/master/dev-docs/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E6%96%B9%E6%A1%88.md) relies on headless-gl, which requires node-gyp [to compile local dependencies](https://github.com/nodejs/node-gyp#on-windows).
1. Start PowerShell as an administrator
2. Run `npm install --global --production windows-build-tools` to install Microsoft's windows-build-tools
See [other issues](https://github.com/antvis/L7/issues/101) during installation.
## Install dependencies
Install dependencies and complete Yarn workspace initialization:
```bash
yarn install
```
### Windows
```bash
copy node_modules/gl/deps/windows/dll/x64/*.dll c:\windows\system32
```
## Run DEMO
Start each package code change monitoring:
```bash
yarn watch
```
Start Storybook, it will automatically open `http://localhost:6006/`:
```bash
yarn storybook
```
## Run test
Run unit tests:
```bash
yarn test
```
Run unit tests and view code coverage:
```bash
yarn coveralls
```
## Add Lerna package
Add a new lerna package:
```bash
lerna create my-pack -y
```
Use ui-lib as a dependency of my-pack:
```bash
yarn workspace my-pack add ui-lib/1.0.0
```
Add lodash as a dependency of all packages (excluding root)
```bash
yarn workspaces run add lodash
```
Set typescript to root development dependency:
```bash
yarn add -W -D typescript jest
```
## Submit code
Instead of `git commit`:
```bash
yarn commit
```
## release
### Set the version number
```bash
yarn run version:prerelease
```
After setting, you need to commit the code
### release
yarn run release

2
.gitignore vendored
View File

@ -80,4 +80,4 @@ packages/l7/package_bak.json
stories/Test
packages/draw/node_modules/@turf
packages/district/src/data
packages/district/src/data

3
.storybook/webpack.config.js
View File

@ -36,6 +36,9 @@ module.exports = ({ config }) => {
loader: 'svg-inline-loader'
}
);
config.resolve.alias = {
'@antv/l7-district': path.resolve(__dirname, '../packages/boundary/src'),
}
config.resolve.extensions.push('.ts', '.tsx', 'css', '.js', '.glsl');

3
docs/api/component/markerLayer.en.md
View File

@ -40,7 +40,8 @@ scene.addMarkerLayer(markerLayer);
- field `string` 聚合统计字段
- method `sum| max| min| mean`
- element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
参数：feature
回调函数包含以下参数
point_count 默认 聚合元素个数
clusterData `Array` 聚合节点的原始数据
point_sum 聚合求和 根据 field 和 method 计算

4
docs/api/component/markerLayer.zh.md
View File

@ -41,9 +41,7 @@ scene.addMarkerLayer(markerLayer);
- field `string` 聚合统计字段
- method `sum| max| min| mean`
- element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
参数：feature
回调函数包含以下参数
- point_count 默认 聚合元素个数
- clusterData `Array` 聚合节点的原始数据
- point_sum 聚合求和 根据 field 和 method 计算

124
docs/api/district/baselayer.en.md Normal file
View File

@ -0,0 +1,124 @@
---
title: 标准地图
order: 2
---
## 五种地图类型
- WorldLayer 世界地图
- CountryLayer 国家地图，目前只支持中国
- ProvinceLayer 省级地图
- CityLayer 市级地图
- CountyLayer 县级地图
## 构造函数
参数：
- scene L7 scene 对象
- option 行政区划配置项
- zIndex 图层绘制顺序
- data `Array` 属性数据用于可视化渲染
- visible 地图是否可见
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量
- field 标注字段 常量
- size 标注大小 常量
- stroke 文字描边颜色
- strokeWidth 文字描边宽度
- textAllowOverlap 是否允许文字压盖
- opacity 标注透明度
- fill 填充配置项 支持数据映射
- color 图层填充颜色，支持常量和数据映射
常量：统一设置成一样的颜色
数据映射
- field 填充映射字段
- values 映射值，同 color 方法第二个参数数组，回调函数
- style 同 polygonLayer 的 style 方法
- activeColor 鼠标滑过高亮颜色
- bubble 气泡图
- enable `boolean` 是否显示气泡 default false
- color 气泡颜色 支持常量、数据映射
- size 气泡大小 支持常量、数据映射
- shape 气泡形状 支持常量、数据映射
- style 气泡图样式 同 PointLayer
- stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
- strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
- autoFit 是否自动缩放到图层范围 `boolean`
- popup 信息窗口
- openTriggerEvent 触发事件 例如 'mousemove' | 'click';
- closeTriggerEvent 触发事件 例如 'mousemove' | 'click';
- enable 是否开启 `boolean`
- triggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html 字符串，支持回调函数 (properties: any) => string;
- chinaNationalStroke 中国国界线颜色 `CountryLayer`
- chinaNationalWidth 中国国界线宽度 `CountryLayer`
- coastlineStroke 海岸线颜色 `CountryLayer`
- coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
- nationalWidth 国界线 `WorldLayer` `CountryLayer`
- nationalStroke 国界线 `WorldLayer` `CountryLayer`
- provinceStroke 省界颜色 `CountryLayer depth= 0，1，2时生效`
- provinceStrokeWidth 省界宽度 `CountryLayer depth = 0，1，2时生效`
- cityStroke 市级边界颜色 `CountryLayer depth =1，2时生效`
- cityStrokeWidth 市级边界宽度 `CountryLayer depth =1，2 时生效`
- countyStroke 县级边界颜色 `CountryLayer depth =2时生效`
- countyStrokeWidth 县级边界宽度 `CountryLayer depth =2时生效`
⛔ ProvinceLayer, CityLayer, CountyLayer 如需要设置描边颜色，宽度使用 storke,strokeWidth 配置。
### 数据
District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接
- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
### 属性
行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
#### fillLayer
图层事件可以通过该属性进行设置
### 方法
#### updateData(data, joinBy)
更新显示数据，
参数：
- data 需要更新的数据
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
### getFillData
获取填充数据，可用于绘制独立的边界线
#### show
显示图层
#### hide
图层隐藏不显示
#### destroy
移除并销毁图层

129
docs/api/district/baselayer.zh.md Normal file
View File

@ -0,0 +1,129 @@
---
title: 标准地图
order: 2
---
## 五种地图类型
- WorldLayer 世界地图
- CountryLayer 国家地图，目前只支持中国
- ProvinceLayer 省级地图
- CityLayer 市级地图
- CountyLayer 县级地图
## 构造函数
参数：
- scene L7 scene 对象
- option 行政区划配置项
- zIndex 图层绘制顺序
- data `Array` 属性数据用于可视化渲染
- visible 地图是否可见
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约 111km，数字越大精度越低。参考设置数据 0.01
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量
- field 标注字段 常量
- size 标注大小 常量
- stroke 文字描边颜色
- strokeWidth 文字描边宽度
- textAllowOverlap 是否允许文字压盖
- opacity 标注透明度
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
其他包括 text [style 的配置](../layer/point_layer/text#style)
- fill 填充配置项 支持数据映射
- color 图层填充颜色，支持常量和数据映射
常量：统一设置成一样的颜色
数据映射
- field 填充映射字段
- values 映射值，同 color 方法第二个参数数组，回调函数
- filter 图层过滤方法，支持常量和数据映射 同 layer.filter 方法
数据映射 - field 填充映射字段 - values 回调函数 `false` 返回值将会被过滤掉
- style 同 polygonLayer 的 style 方法
- activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮
- bubble 气泡图
- enable `boolean` 是否显示气泡 default false
- color 气泡颜色 支持常量、数据映射
- size 气泡大小 支持常量、数据映射
- shape 气泡形状 支持常量、数据映射
- style 气泡图样式 同 PointLayer
- showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
- stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
- strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
- autoFit 是否自动缩放到图层范围 `boolean`
- popup 信息窗口
- enable 是否开启 `boolean`
- openTriggerEvent 触发事件 例如 'mousemove' | 'click';
- closeTriggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html 字符串，支持回调函数 (properties: any) => string;
- chinaNationalStroke 中国国界线颜色 `CountryLayer`
- chinaNationalWidth 中国国界线宽度 `CountryLayer`
- coastlineStroke 海岸线颜色 `CountryLayer`
- coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
- nationalWidth 国界线 `WorldLayer` `CountryLayer`
- nationalStroke 国界线 `WorldLayer` `CountryLayer`
- provinceStroke 省界颜色 `CountryLayer depth= 0，1，2时生效`
- provinceStrokeWidth 省界宽度 `CountryLayer depth = 0，1，2时生效`
- cityStroke 市级边界颜色 `CountryLayer depth =1，2时生效`
- cityStrokeWidth 市级边界宽度 `CountryLayer depth =1，2 时生效`
- countyStroke 县级边界颜色 `CountryLayer depth =2时生效`
- countyStrokeWidth 县级边界宽度 `CountryLayer depth =2时生效`
⛔ ProvinceLayer, CityLayer, CountyLayer 如需要设置描边颜色，宽度使用 storke,strokeWidth 配置。
### 数据
District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接
- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
### 属性
行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
#### fillLayer
图层事件可以通过该属性进行设置
### 方法
#### updateData(data, joinBy)
更新显示数据，
参数：
- data 需要更新的数据
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
### getFillData
获取填充数据，可用于绘制独立的边界线
#### show
显示图层
#### hide
图层隐藏不显示
#### destroy
移除并销毁图层

162
docs/api/district/drilldown.en.md Normal file
View File

@ -0,0 +1,162 @@
---
title: 钻取地图
order: 2
---
钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。
钻取地图支持两种可视化类型
- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小
## 使用
```javascript
import { DrillDownLayer } from '@antv/l7-district';
```
DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
### 构造函数
- scene L7 scene 对象
- option 行政区划配置项
- drillDepth `number` 下钻深度 `0 | 1 | 2` 1 市级 2，县级
- customTrigger 是否自定义下钻交互，默认 `false`
- drillDownTriggerEvent 向下钻取的触发事件 ⛔customTrigger 为 true 时不生效
- drillUpTriggleEvent 向上钻取的触发事件 ⛔customTrigger 为 true 时不生效
- provinceData 省级数据
- cityData 市级数据 可以是全量的数据，下钻时可以不需要重新设置数据
- countyData 县级数据 可以是全量的数据，下钻时可以不需要重新设置数据
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- label 文本配置项 `labelOption`
- bubble 气泡配置项 `bubbleOption`
- fill 填充配置项 `fillOption`
- province `layerOption` 省级图层配置，如果不设置等同全局配置
- city `layerOption` 市级图层配置，如果不设置等同全局配置
- county `layerOption` 县级图层配置，如果不设置等同全局配置
#### layerOption
下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致
- joinBy: [string, string];
- label: `Partial<ILabelOption>`;
- bubble: `Partial<IBubbleOption>`;
- fill: `Partial<IFillOptions>`;
⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性
- chinaNationalStroke 中国国界线颜色
- chinaNationalWidth 中国国界线宽度
- coastlineStroke 海岸线颜色
- coastlineWidth 海岸线宽度
- nationalWidth 国界线
- nationalStroke 国界线
- provinceStroke 省界颜色
- provinceStrokeWidth 省界宽度
#### labelOption
文本标注配置项，目前只支持常量配置，不支持数据映射
- enable `boolean` 是否开启标注 `true`
- color `string` 标注颜色
- field `string` 标注字段名 默认 `NAME_CHN`
- size `number` 文本大小 默认 `8`
- stroke `string` 描边颜色 `#fff`
- strokeWidth `number` 描边宽度 `2`
- textAllowOverlap: `boolean` 文字是否允许压盖 `true`
- opacity `number` 透明度 `1`
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
其他包括 text [style 的配置](../layer/point_layer/text#style)
#### bubbleOption
气泡图配置项
- enable `boolean` 是否显示气泡 `true`
- shape: AttributeType; 气泡形状支持数据映射
- size: AttributeType; 气泡大小支持数据映射
- color: AttributeType; 气泡颜色支持数据映射
- scale: { // 数字度量
field: string; 度量字段
type: ScaleTypeName; 度量字段
};
- style: {
opacity: number; 透明度
stroke: string; 填充色
strokeWidth: number; 填充宽度
};
#### fill
填充图样式
- scale: ScaleTypeName | null; 填充颜色度量类型
- color: AttributeType; 填充颜色支持数据映射
- style: any; 填充图样式
- activeColor: string; 填充图高亮颜色
## 属性
为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出
### provinceLayer
全国地图 CountyLayer
### cityLayer
省级地图 ProvinceLayer
### countyLayer
市级地图 CityLayer
## 方法
### drillDown
向下钻取 自定义钻取交互行为时使用
** 参数 **
- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用
- data 下钻层级的数据，可选，如果不设置取全局配置
- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置
```javascirpt
drillLayer.drillDown(['110100'])
```
### drillUp
向上钻取
```javascirpt
drillLayer.drillUp(['110100'])
```
### updateData
参数
- layer 更新图层名称 `province|city|county`
- data 数据
- joinBy 可选
### show
显示图形
### hide
隐藏图层
### destroy
移除并销毁图层

159
docs/api/district/drilldown.zh.md Normal file
View File

@ -0,0 +1,159 @@
---
title: 钻取地图
order: 2
---
钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。
钻取地图支持两种可视化类型
- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小
## 使用
```javascript
import { DrillDownLayer } from '@antv/l7-district';
```
DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
### 构造函数
- scene L7 scene 对象
- option 行政区划配置项
- drillDepth `number` 下钻深度 `0 | 1 | 2` 1 市级 2，县级
- customTrigger 是否自定义下钻交互，默认 `false`
- drillDownTriggerEvent 向下钻取的触发事件 ⛔customTrigger 为 true 时不生效
- drillUpTriggleEvent 向上钻取的触发事件 ⛔customTrigger 为 true 时不生效
- provinceData 省级数据
- cityData 市级数据 可以是全量的数据，下钻时可以不需要重新设置数据
- countyData 县级数据 可以是全量的数据，下钻时可以不需要重新设置数据
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- label 文本配置项 `labelOption`
- bubble 气泡配置项 `bubbleOption`
- fill 填充配置项 `fillOption`
- province `layerOption` 省级图层配置，如果不设置等同全局配置
- city `layerOption` 市级图层配置，如果不设置等同全局配置
- county `layerOption` 县级图层配置，如果不设置等同全局配置
#### layerOption
下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致
- joinBy: [string, string];
- label: `Partial<ILabelOption>`;
- bubble: `Partial<IBubbleOption>`;
- fill: `Partial<IFillOptions>`;
⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性
- chinaNationalStroke 中国国界线颜色
- chinaNationalWidth 中国国界线宽度
- coastlineStroke 海岸线颜色
- coastlineWidth 海岸线宽度
- nationalWidth 国界线
- nationalStroke 国界线
- provinceStroke 省界颜色
- provinceStrokeWidth 省界宽度
#### labelOption
文本标注配置项，目前只支持常量配置，不支持数据映射
- enable `boolean` 是否开启标注 `true`
- color `string` 标注颜色
- field `string` 标注字段名 默认 `NAME_CHN`
- size `number` 文本大小 默认 `8`
- stroke `string` 描边颜色 `#fff`
- strokeWidth `number` 描边宽度 `2`
- textAllowOverlap: `boolean` 文字是否允许压盖 `true`
- opacity `number` 透明度 `1`
#### bubbleOption
气泡图配置项
- enable `boolean` 是否显示气泡 `true`
- shape: AttributeType; 气泡形状支持数据映射
- size: AttributeType; 气泡大小支持数据映射
- color: AttributeType; 气泡颜色支持数据映射
- scale: { // 数字度量
field: string; 度量字段
type: ScaleTypeName; 度量字段
};
- style: {
opacity: number; 透明度
stroke: string; 填充色
strokeWidth: number; 填充宽度
};
#### fill
填充图样式
- scale: ScaleTypeName | null; 填充颜色度量类型
- color: AttributeType; 填充颜色支持数据映射
- style: any; 填充图样式
- activeColor: string; 填充图高亮颜色
## 属性
为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出
### provinceLayer
全国地图 CountyLayer
### cityLayer
省级地图 ProvinceLayer
### countyLayer
市级地图 CityLayer
## 方法
### drillDown
向下钻取 自定义钻取交互行为时使用
** 参数 **
- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用
- data 下钻层级的数据，可选，如果不设置取全局配置
- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置
```javascirpt
drillLayer.drillDown(['110100'])
```
### drillUp
向上钻取
```javascirpt
drillLayer.drillUp(['110100'])
```
### updateData
参数
- layer 更新图层名称 `province|city|county`
- data 数据
- joinBy 可选
### show
显示图形
### hide
隐藏图层
### destroy
移除并销毁图层

171
docs/api/district/start.en.md Normal file
View File

@ -0,0 +1,171 @@
---
title: 快速开始
order: 0
---
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
## 使用
**using modules**
```javascript
import { WorldLayer } from '@antv/l7-district';
```
**CDN 版本引用**
CDN 引用所有的方法都在 L7.District 命名空间下。
```html
<head>
<! --引入最新版的L7-District -->
<script src="https://unpkg.com/@antv/l7-district"></script>
</head>
```
```javascript
import { WorldLayer } from '@antv/l7-district';
/**
* L7.District.WorldLayer()// CDN 引用
* */
new WorldLayer(scene, {
data: [],
fill: {
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603',
],
},
},
stroke: '#ccc',
label: {
enable: true,
textAllowOverlap: false,
field: 'Short_Name_ZH',
},
popup: {
enable: false,
Html: (props) => {
return `<span>${props.Short_Name_ZH}</span>`;
},
},
});
```
⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
## 简介
District 支持下面几种图
- WorldLayer 世界地图
- CountryLayer 国家地图，目前只支持中国
- ProvinceLayer 省级地图
- CityLayer 市级地图
- CountyLayer 县级地图
- DrillDownLayer 上钻下取地图
## 构造函数
参数：
- scene L7 scene 对象
- option 行政区划配置项
- zIndex 图层绘制顺序
- data `Array` 属性数据用于可视化渲染
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量
- field 标注字段 常量
- size 标注大小 常量
- stroke 文字描边颜色
- strokeWidth 文字描边宽度
- textAllowOverlap 是否允许文字压盖
- opacity 标注透明度
- fill 填充配置项 支持数据映射
- color 图层填充颜色，支持常量和数据映射
常量：统一设置成一样的颜色
数据映射
- field 填充映射字段
- values 映射值，同 color 方法第二个参数数组，回调函数
- style 同 polygonLayer 的 style 方法
- activeColor 鼠标滑过高亮颜色
- bubble 气泡图
- enable `boolean` 是否显示气泡 default false
- color 气泡颜色 支持常量、数据映射
- size 气泡大小 支持常量、数据映射
- shape 气泡形状 支持常量、数据映射
- style 气泡图样式 同 PointLayer
- stroke 填充描边颜色
- strokeWidth 填充描边宽度
- autoFit 是否自动缩放到图层范围 `boolean`
- popup 信息窗口
- enable 是否开启 `boolean`
- triggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html 字符串，支持回调函数 (properties: any) => string;
- chinaNationalStroke 中国国界线颜色
- chinaNationalWidth 中国国界线宽度
- coastlineStroke 海岸线颜色
- coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
- nationalWidth 国界线 `WorldLayer` `CountryLayer`
- nationalStroke 国界线 `WorldLayer` `CountryLayer`
- provinceStroke 省界颜色 `CountryLayer`
- provinceStrokeWidth 省界宽度 `CountryLayer`
- cityStroke 市级边界颜色 `CountryLayer`
- cityStrokeWidth 市级边界宽度 `CountryLayer`
- countyStroke 县级边界颜色 `CountryLayer`
- countyStrokeWidth 县级边界宽度 `CountryLayer`
### 数据
District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接
- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
### 属性
行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
#### fillLayer
### 方法
#### updateData(data, joinBy)
更新显示数据，
参数：
- data 需要更新的数据
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
#### show
显示图层
#### hide
图层隐藏不显示
#### destroy
移除并销毁图层

37
docs/api/district/start.zh.md Normal file
View File

@ -0,0 +1,37 @@
---
title: 快速开始
order: 0
---
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
## 使用
**using modules**
```javascript
import { WorldLayer } from '@antv/l7-district';
```
**CDN 版本引用**
```html
<head>
<! --引入最新版的L7-District -->
<script src="https://unpkg.com/@antv/l7-district"></script>
</head>
```
⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
### 数据
District 提供 polygon 数据需要跟用户的属性数据，通过关系字段进行连接
- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
- [省级行政名称*adcode*对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)

16
docs/api/layer/point_layer/text.zh.md
View File

@ -27,7 +27,21 @@ layer.shape('name','text')
### style
- opacity `number`
- textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
- textAnchor `string` 文本相对锚点的位置
`'right'
| 'top-right'
| 'left'
| 'bottom-right'
| 'left'
| 'top-left'
| 'bottom-left'
| 'bottom'
| 'bottom-right'
| 'bottom-left'
| 'top'
| 'top-right'
| 'top-left'
| 'center';`
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
- stroke: `string`; 描边颜色

53
docs/api/react/layer.en.md
View File

@ -3,11 +3,30 @@ title: Layer Component
order: 2
---
## Layer 类型
React 各个组件名称和 L7 名称保持一致
- PointLayer
- PolygonLayer
- LineLayer
- HeatmapLayer
- RasterLayer
- ImageLayer
- CityBuildingLayer
### 使用方式
```jsx
import { PointLayer } '@antv/l7-react';
```
## Layer Props
| prop name | Type | Default | Description |
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
| option | `layer option` | | layer 配置项 |
| options | `layer options` | | layer 配置项 |
| source | `sourceOption` | | 数据源配置项 |
| color | `attributeOption` | | 颜色通道 |
| shape | `attributeOption` | | 图层形状属性 |
@ -17,17 +36,21 @@ order: 2
| filter | `Function` | | 图层数据过滤方法 |
| select | `boolean` `interaction option` | | 图层选中高亮 |
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
| animate | `animate Option` | `null` | 图层动画配置 |
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
### layer option
### layer options
| prop name | Type | Default | Description |
| --------- | --------- | ----------------------- | ---------------------------------------- |
| name | `string` | | 图层名字，可根据名称获取 layer |
| visible | `boolean` | `true` | 图层是否可见 |
| zIndex | `number` | 0 | 图层绘制顺序， |
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
| prop name | Type | Default | Description |
| ------------- | --------- | ----------------------- | -------------------------------------------------------------------------------------------------------- |
| name | `string` | | 图层名字，可根据名称获取 layer |
| visible | `boolean` | `true` | 图层是否可见 |
| zIndex | `number` | 0 | 图层绘制顺序， |
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
| blend | 'string' | 'normal' | 图层元素混合效果 [详情](../layer/layer/#blend) |
| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 |
### attribute Option
@ -71,19 +94,25 @@ const scales = {
### interaction option
active，select 配置项
**option**
- color 设置交互的颜色，指滑过或者选中的
```jsx
<>
```
### 获取 layer 对象
#### onLayerLoaded
回调函数获取 layer, scene 对象
onLayerLoaded=(layer, scene) =>{
}
```javascript
onLayerLoaded = (layer, scene) => {};
```
#### Context API

2
docs/api/react/layer.zh.md
View File

@ -49,7 +49,7 @@ import { PointLayer } '@antv/l7-react';
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') |
| blend | 'string' | 'normal' | 图层元素混合效果 [详情](../layer/layer/#blend) |
| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 |
### attribute Option

22
docs/api/react/scene.en.md
View File

@ -3,15 +3,23 @@ title: Scene
order: 1
---
## 使用
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
```javascript
import { MapboxScene, AmapScene } from '@antv/l7-react';
```
## Scene Props
| prop name | Type | Default | Description |
| ------------- | ---------- | ---------- | -------------------------------------- |
| style | `Object` | `null` | scene css 样式 |
| className | `string` | `null` | 样式名称 |
| map | `Object` | `Required` | map option [地图配置项]() |
| option | `Object` | `void` | scene option 配置项 [详情](#map-props) |
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
| prop name | Type | Default | Description |
| ------------- | -------------- | ---------- | ----------------------------------------- |
| style | `Object` | `null` | scene css 样式 |
| className | `string` | `null` | 样式名称 |
| map | `map option` | `Required` | map option [地图配置项](#map-option) |
| option | `scene option` | `void` | scene option 配置项 [详情](#scene-option) |
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
### 高德地图场景

14
docs/api/react/scene.zh.md
View File

@ -13,13 +13,13 @@ import { MapboxScene, AmapScene } from '@antv/l7-react';
## Scene Props
| prop name | Type | Default | Description |
| ------------- | -------------- | ---------- | -------------------------------------- |
| style | `Object` | `null` | scene css 样式 |
| className | `string` | `null` | 样式名称 |
| map | `map option` | `Required` | map option [地图配置项]() |
| option | `scene option` | `void` | scene option 配置项 [详情](#map-props) |
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
| prop name | Type | Default | Description |
| ------------- | -------------- | ---------- | ----------------------------------------- |
| style | `Object` | `null` | scene css 样式 |
| className | `string` | `null` | 样式名称 |
| map | `map option` | `Required` | map option [地图配置项](#map-option) |
| option | `scene option` | `void` | scene option 配置项 [详情](#scene-option) |
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
### 高德地图场景

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

@ -317,10 +317,13 @@ scene.setPitch(pitch);
参数 :
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
- `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]]
```javascript
scene.fitBounds([112, 32, 114, 35]);
scene.fitBounds([
[112, 32],
[114, 35],
]);
```
### getContainer

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

@ -351,10 +351,13 @@ scene.setPitch(pitch);
参数 :
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
- `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]]
```javascript
scene.fitBounds([112, 32, 114, 35]);
scene.fitBounds([
[112, 32],
[114, 35],
]);
```
### removeLayer

3
docs/tutorial/map/offline.en.md
View File

@ -134,5 +134,4 @@ const scene = new Scene({
});
```
离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)<br />![image.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1575463410498-0784ce76-743d-4cc4-8d68-964dfd010925.png#align=left&display=inline&height=514&name=image.png&originHeight=514&originWidth=824&size=156914&status=done&style=none&width=824)
[d离线，无token使用mapbox demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)<br />

3
docs/tutorial/map/offline.zh.md
View File

@ -132,5 +132,4 @@ const scene = new Scene({
});
```
离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)<br />![image.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1575463410498-0784ce76-743d-4cc4-8d68-964dfd010925.png#align=left&display=inline&height=514&name=image.png&originHeight=514&originWidth=824&size=156914&status=done&style=none&width=824)
离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)

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

@ -86,79 +86,6 @@ const scene = new Scene({
});
```
### React中使用
React 组件待开发，期待和大家共建l7-react 目前可以暂时以 Submodule 方式使用
```
import { Scene, PolygonLayer } from '@antv/l7';
import { AMap } from '@antv/l7-maps';
import * as React from 'react';
export default class AMapExample 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({
id: 'map',
map: new AMap({
center: [110.19382669582967, 50.258134],
pitch: 0,
style: 'dark',
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);
this.scene = scene;
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}
```
⚠️组件 Unmount 时需要通过 scene.destroy() 手动销毁场景。
更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories)
## 不同项目使用模板
不同项目模板在CodeSandbox你可以预览，也可以下载到本地

136
examples/district/basic/API.en.md
View File

@ -0,0 +1,136 @@
---
title: API
---
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
## 使用
**using modules**
```javascript
import { WorldLayer } from '@antv/l7-district';
```
**CDN 版本引用**
```html
<head>
<! --引入最新版的L7-District -->
<script src="https://unpkg.com/@antv/l7-district"></script>
</head>
```
⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
## 简介
District 支持下面几种图
- WorldLayer 世界地图
- CountryLayer 国家地图，目前只支持中国
- ProvinceLayer 省级地图
- CityLayer 市级地图
- CountyLayer 县级地图
- DrillDownLayer 上钻下取地图
## 构造函数
参数：
- scene L7 scene 对象
- option 行政区划配置项
- zIndex 图层绘制顺序
- data `Array` 属性数据用于可视化渲染
- visible 地图是否可见
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量
- field 标注字段 常量
- size 标注大小 常量
- stroke 文字描边颜色
- strokeWidth 文字描边宽度
- textAllowOverlap 是否允许文字压盖
- opacity 标注透明度
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
其他包括 text [style 的配置](../layer/point_layer/text#style)
- fill 填充配置项 支持数据映射
- color 图层填充颜色，支持常量和数据映射
常量：统一设置成一样的颜色
数据映射
- field 填充映射字段
- values 映射值，同color方法第二个参数数组，回调函数
- style 同 polygonLayer的style方法
- activeColor 鼠标滑过高亮颜色
- bubble 气泡图
- enable `boolean` 是否显示气泡 default false
- color 气泡颜色 支持常量、数据映射
- size 气泡大小 支持常量、数据映射
- shape 气泡形状 支持常量、数据映射
- style 气泡图样式 同 PointLayer
- stroke 填充描边颜色
- strokeWidth 填充描边宽度
- autoFit 是否自动缩放到图层范围 `boolean`
- popup 信息窗口
- enable 是否开启 `boolean`
- triggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html字符串，支持回调函数 (properties: any) => string;
- chinaNationalStroke 中国国界线颜色
- chinaNationalWidth 中国国界线宽度
- coastlineStroke 海岸线颜色
- coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
- nationalWidth 国界线 `WorldLayer` `CountryLayer`
- nationalStroke 国界线 `WorldLayer` `CountryLayer`
- provinceStroke 省界颜色 `CountryLayer`
- provinceStrokeWidth 省界宽度 `CountryLayer`
- cityStroke 市级边界颜色 `CountryLayer`
- cityStrokeWidth 市级边界宽度 `CountryLayer`
- countyStroke 县级边界颜色 `CountryLayer`
- countyStrokeWidth 县级边界宽度 `CountryLayer`
### 数据
District 提供polygon数据需要跟用户的属性数据，通过关系字段进行连接
- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
- [省级行政名称_adcode_对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
### 属性
行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
#### fillLayer
图层事件可以通过该属性进行设置
### 方法
#### updateData(data, joinBy)
更新显示数据，
参数：
- data 需要更新的数据
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
### getFillData
获取填充数据，可用于绘制独立的边界线
#### show
显示图层
#### hide
图层隐藏不显示
#### destroy
移除并销毁图层

139
examples/district/basic/API.zh.md
View File

@ -3,6 +3,141 @@ title: API
---
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
## 配置项
## 使用
**using modules**
```javascript
import { WorldLayer } from '@antv/l7-district';
```
**CDN 版本引用**
```html
<head>
<! --引入最新版的L7-District -->
<script src="https://unpkg.com/@antv/l7-district"></script>
</head>
```
## 简介
District 支持下面几种图
- WorldLayer 世界地图
- CountryLayer 国家地图，目前只支持中国
- ProvinceLayer 省级地图
- CityLayer 市级地图
- CountyLayer 县级地图
## 构造函数
参数：
- scene L7 scene 对象
- option 行政区划配置项
- zIndex 图层绘制顺序
- data `Array` 属性数据用于可视化渲染
- visible 地图是否可见
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- showBorder `boolean` 是否显示国界线，默认显示，不建议不显示
- simplifyTolerance 数据抽稀容差,默认不抽稀 `boolean | number` 单位为度，一度约111km，数字越大精度越低。参考设置数据 0.01
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量
- field 标注字段 常量
- size 标注大小 常量
- stroke 文字描边颜色
- strokeWidth 文字描边宽度
- textAllowOverlap 是否允许文字压盖
- opacity 标注透明度
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
其他包括 text [style 的配置](../layer/point_layer/text#style)
- fill 填充配置项 支持数据映射
- color 图层填充颜色，支持常量和数据映射
常量：统一设置成一样的颜色
数据映射
- field 填充映射字段
- values 映射值，同color方法第二个参数数组，回调函数
- filter 图层过滤方法，支持常量和数据映射 同layer.filter方法
数据映射
- field 填充映射字段
- values 回调函数 `false` 返回值将会被过滤掉
- style 同 polygonLayer的style方法
- activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮
- bubble 气泡图
- enable `boolean` 是否显示气泡 default false
- color 气泡颜色 支持常量、数据映射
- size 气泡大小 支持常量、数据映射
- shape 气泡形状 支持常量、数据映射
- filter 图层过滤方法，支持常量和数据映射 同layer.filter方法
数据映射
- field 填充映射字段
- values 回调函数 `false` 返回值将会被过滤掉
- style 气泡图样式 同 PointLayer
- stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
- strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
- autoFit 是否自动缩放到图层范围 `boolean`
- popup 信息窗口
- enable 是否开启 `boolean`
- triggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html字符串，支持回调函数 (properties: any) => string;
- chinaNationalStroke 中国国界线颜色 `CountryLayer`
- chinaNationalWidth 中国国界线宽度 `CountryLayer`
- coastlineStroke 海岸线颜色 `CountryLayer`
- coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
- nationalWidth 国界线 `WorldLayer` `CountryLayer`
- nationalStroke 国界线 `WorldLayer` `CountryLayer`
- provinceStroke 省界颜色 `CountryLayer depth= 0，1，2时生效`
- provinceStrokeWidth 省界宽度 `CountryLayer depth = 0，1，2时生效 `
- cityStroke 市级边界颜色 `CountryLayer depth =1，2时生效`
- cityStrokeWidth 市级边界宽度 `CountryLayer depth =1，2 时生效`
- countyStroke 县级边界颜色 `CountryLayer depth =2时生效`
- countyStrokeWidth 县级边界宽度 `CountryLayer depth =2时生效`
⛔ ProvinceLayer, CityLayer, CountyLayer 如需要设置描边颜色，宽度使用storke,strokeWidth配置。
### 数据
District 提供polygon数据需要跟用户的属性数据，通过关系字段进行连接
- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
- [省级行政名称_adcode_对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
### 属性
行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
#### fillLayer
图层事件可以通过该属性进行设置
### 方法
#### updateData(data, joinBy)
更新显示数据，
参数：
- data 需要更新的数据
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
### getFillData
获取填充数据，可用于绘制独立的边界线
#### show
显示图层
#### hide
图层隐藏不显示
#### destroy
移除并销毁图层
## 方法

98
examples/district/basic/demo/attach_map.js Normal file
View File

@ -0,0 +1,98 @@
import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 0,
maxZoom: 10
})
});
const attachMapContainer = document.createElement('div');
attachMapContainer.id = 'attach';
attachMapContainer.style.cssText = `position: absolute;
height: 125px;
width: 98px;
right: 50px;
bottom: 20px;
border: 1px solid #333;`;
document.getElementById('map').parentElement.append(attachMapContainer);
scene.on('loaded', () => {
new CountryLayer(scene, {
data: [],
joinBy: [ 'NAME_CHN', 'name' ],
depth: 1,
provinceStroke: '#783D2D',
cityStroke: '#EBCCB4',
cityStrokeWidth: 1,
label: {
enable: false
},
fill: {
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});
// 添加附图，附图需要和主图保持一致
const scene2 = new Scene({
id: 'attach',
logoVisible: false,
map: new Mapbox({
center: [ 113.60540108435657, 12.833692637803168 ],
pitch: 0,
style: 'blank',
zoom: 1.93,
minZoom: 0,
maxZoom: 3,
interactive: false
})
});
scene2.on('loaded', () => {
new CountryLayer(scene2, {
data: [],
label: {
enable: false
},
popup: {
enable: false
},
autoFit: false,
depth: 1,
fill: {
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
}
});
});

216
examples/district/basic/demo/china_map_2.js Normal file
View File

@ -0,0 +1,216 @@
import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const ProvinceData = [
{
name: '云南省',
code: 530000,
value: 17881.12
},
{
name: '黑龙江省',
code: 230000,
value: 16361.62
},
{
name: '贵州省',
code: 520000,
value: 14806.45
},
{
name: '北京市',
code: 110000,
value: 30319.98
},
{
name: '河北省',
code: 130000,
value: 36010.27
},
{
name: '山西省',
code: 140000,
value: 16818.11
},
{
name: '吉林省',
code: 220000,
value: 15074
},
{
name: '宁夏回族自治区',
code: 640000,
value: 3705.18
},
{
name: '辽宁省',
code: 210000,
value: 25315.35
},
{
name: '海南省',
code: 460000,
value: 4832.05
},
{
name: '内蒙古自治区',
code: 150000,
value: 17289.22
},
{
name: '天津市',
code: 120000,
value: 18809.64
},
{
name: '新疆维吾尔自治区',
code: 650000,
value: 12199.08
},
{
name: '上海市',
code: 310000,
value: 32679.87
},
{
name: '陕西省',
code: 610000,
value: 24438.32
},
{
name: '甘肃省',
code: 620000,
value: 8246.07
},
{
name: '安徽省',
code: 340000,
value: 30006.82
},
{
name: '香港特别行政区',
code: 810000,
value: 0
},
{
name: '广东省',
code: 440000,
value: 97277.77
},
{
name: '河南省',
code: 410000,
value: 48055.86
},
{
name: '湖南省',
code: 430000,
value: 36425.78
},
{
name: '江西省',
code: 360000,
value: 21984.78
},
{
name: '四川省',
code: 510000,
value: 40678.13
},
{
name: '广西壮族自治区',
code: 450000,
value: 20353.51
},
{
name: '江苏省',
code: 320000,
value: 92595.4
},
{
name: '澳门特别行政区',
code: 820000,
value: null
},
{
name: '浙江省',
code: 330000,
value: 56197.15
},
{
name: '山东省',
code: 370000,
value: 76469.67
},
{
name: '青海省',
code: 630000,
value: 2865.23
},
{
name: '重庆市',
code: 500000,
value: 20363.19
},
{
name: '福建省',
code: 350000,
value: 35804.04
},
{
name: '湖北省',
code: 420000,
value: 39366.55
},
{
name: '西藏自治区',
code: 540000,
value: 1477.63
},
{
name: '台湾省',
code: 710000,
value: null
}
];
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 0,
maxZoom: 10
})
});
scene.on('loaded', () => {
new CountryLayer(scene, {
data: ProvinceData,
joinBy: [ 'NAME_CHN', 'name' ],
depth: 1,
provinceStroke: '#783D2D',
cityStroke: '#EBCCB4',
cityStrokeWidth: 1,
fill: {
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

19
examples/district/basic/demo/city.js
View File

@ -37,15 +37,16 @@ async function initMap() {
textAllowOverlap: false
},
fill: {
field: 'pop',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
color: { field: 'pop',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,

20
examples/district/basic/demo/county.js
View File

@ -21,15 +21,17 @@ scene.on('loaded', () => {
field: 'NAME_CHN'
},
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,

106
examples/district/basic/demo/hainan.js Normal file
View File

@ -0,0 +1,106 @@
import { Scene } from '@antv/l7';
import { ProvinceLayer, CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
async function initMap() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 109.803, 19.347 ],
pitch: 0,
style: 'blank',
zoom: 7,
minZoom: 6,
maxZoom: 11
})
});
const attachMapContainer = document.createElement('div');
attachMapContainer.id = 'attach';
attachMapContainer.style.cssText = `position: absolute;
height: 125px;
width: 98px;
right: 50px;
bottom: 20px;
border: 1px solid #333;`;
document.getElementById('map').parentElement.append(attachMapContainer);
scene.on('loaded', () => {
new ProvinceLayer(scene, {
data: [],
geoDataLevel: 1,
autoFit: false,
joinBy: [ 'adcode', 'code' ],
adcode: [ '460000' ],
depth: 2,
stroke: '#aaa',
label: {
enable: false,
field: 'NAME_CHN',
textAllowOverlap: false
},
fill: {
color: '#A3d7FF'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
const scene2 = new Scene({
id: 'attach',
logoVisible: false,
map: new Mapbox({
center: [ 113.60540108435657, 12.833692637803168 ],
pitch: 0,
style: 'blank',
zoom: 1.93,
// zoom: 3,
minZoom: 0,
maxZoom: 3,
interactive: false
})
});
scene2.on('loaded', () => {
new CountryLayer(scene2, {
data: [],
label: {
enable: false
},
popup: {
enable: false
},
autoFit: false,
provinceStroke: '#aaa',
depth: 1,
fill: {
color: '#A3d7FF'
}
});
new ProvinceLayer(scene2, {
data: [],
autoFit: false,
adcode: [ '460000' ],
depth: 2,
zIndex: 2,
stroke: '#aaa',
strokeWidth: 0.1,
label: {
enable: false,
field: 'NAME_CHN',
textAllowOverlap: false
},
fill: {
color: '#A3d7ff'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
}
initMap();

14
examples/district/basic/demo/meta.json
View File

@ -4,9 +4,8 @@
"en": "District"
},
"demos": [
{
"filename": "china_map.js",
"filename": "china_map_2.js",
"title": "中国地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*tClNQoAo5isAAAAAAAAAAABkARQnAQ"
},
@ -31,9 +30,14 @@
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*iVwLSpIf_ckAAAAAAAAAAABkARQnAQ"
},
{
"filename": "drill_down.js",
"title": "中国地图上钻下取",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ"
"filename": "attach_map.js",
"title": "中国地图附图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*bGX-Tbw5uVAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "hainan.js",
"title": "海南省地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nHOTQ61hFbYAAAAAAAAAAABkARQnAQ"
}
]
}

20
examples/district/basic/demo/province.js
View File

@ -37,15 +37,17 @@ async function initMap() {
textAllowOverlap: false
},
fill: {
field: 'pop',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
color: {
field: 'pop',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,

26
examples/district/basic/demo/world_map.js
View File

@ -9,33 +9,35 @@ const scene = new Scene({
style: 'blank',
zoom: 0,
minZoom: 0,
maxZoom: 10
maxZoom: 5
})
});
scene.on('loaded', () => {
new WorldLayer(scene, {
data: [],
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
stroke: '#ccc',
label: {
enable: true,
textAllowOverlap: false,
field: 'Short_Name_ZH'
field: 'NAME_CHN'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.Short_Name_ZH}</span>`;
return `<span>${props.NAME_CHN}</span>`;
}
}
});

2
examples/district/basic/index.en.md
View File

@ -1,4 +1,4 @@
---
title: L7 District
order: 3
order: 0
---

4
examples/district/basic/index.zh.md
View File

@ -1,4 +1,4 @@
---
title: 基础组件
order: 3
title: 填充图
order: 1
---

117
examples/district/bubble/API.en.md Normal file
View File

@ -0,0 +1,117 @@
---
title: API
---
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
## 使用
**using modules**
```javascript
import { WorldLayer } from '@antv/l7-district';
```
**CDN 版本引用**
```html
<head>
<! --引入最新版的L7-District -->
<script src="https://unpkg.com/@antv/l7-district"></script>
</head>
```
⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
## 简介
District 支持下面几种图
- WorldLayer 世界地图
- CountryLayer 国家地图，目前只支持中国
- ProvinceLayer 省级地图
- CityLayer 市级地图
- CountyLayer 县级地图
- DrillDownLayer 上钻下取地图
## 构造函数
参数：
- scene L7 scene 对象
- option 行政区划配置项
- zIndex 图层绘制顺序
- data `Array` 属性数据用于可视化渲染
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量
- field 标注字段 常量
- size 标注大小 常量
- stroke 文字描边颜色
- strokeWidth 文字描边宽度
- textAllowOverlap 是否允许文字压盖
- opacity 标注透明度
- fill 填充配置项 支持数据映射
- color 图层填充颜色，支持常量和数据映射
常量：统一设置成一样的颜色
数据映射
- field 填充映射字段
- values 映射值，同color方法第二个参数数组，回调函数
- style 同 polygonLayer的style方法
- activeColor 鼠标滑过高亮颜色
- stroke 填充描边颜色
- strokeWidth 填充描边宽度
- autoFit 是否自动缩放到图层范围 `boolean`
- popup 信息窗口
- enable 是否开启 `boolean`
- triggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html字符串，支持回调函数 (properties: any) => string;
- chinaNationalStroke 中国国界线颜色
- chinaNationalWidth 中国国界线宽度
- coastlineStroke 海岸线颜色
- coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
- nationalWidth 国界线 `WorldLayer` `CountryLayer`
- nationalStroke 国界线 `WorldLayer` `CountryLayer`
- provinceStroke 省界颜色 `CountryLayer`
- provinceStrokeWidth 省界宽度 `CountryLayer`
- cityStroke 市级边界颜色 `CountryLayer`
- cityStrokeWidth 市级边界宽度 `CountryLayer`
- countyStroke 县级边界颜色 `CountryLayer`
- countyStrokeWidth 县级边界宽度 `CountryLayer`
### 数据
District 提供polygon数据需要跟用户的属性数据，通过关系字段进行连接
- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
- [省级行政名称_adcode_对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
### 属性
行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
#### fillLayer
### 方法
#### updateData(data, joinBy)
更新显示数据，
参数：
- data 需要更新的数据
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
#### show
显示图层
#### hide
图层隐藏不显示
#### destroy
移除并销毁图层

117
examples/district/bubble/API.zh.md Normal file
View File

@ -0,0 +1,117 @@
---
title: API
---
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
## 使用
**using modules**
```javascript
import { WorldLayer } from '@antv/l7-district';
```
**CDN 版本引用**
```html
<head>
<! --引入最新版的L7-District -->
<script src="https://unpkg.com/@antv/l7-district"></script>
</head>
```
⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
## 简介
District 支持下面几种图
- WorldLayer 世界地图
- CountryLayer 国家地图，目前只支持中国
- ProvinceLayer 省级地图
- CityLayer 市级地图
- CountyLayer 县级地图
- DrillDownLayer 上钻下取地图
## 构造函数
参数：
- scene L7 scene 对象
- option 行政区划配置项
- zIndex 图层绘制顺序
- data `Array` 属性数据用于可视化渲染
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表
- depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
- label 标注配置项 支持常量，不支持数据映射
- enable `boolean` 是否显示标注
- color 标注字体颜色 常量
- field 标注字段 常量
- size 标注大小 常量
- stroke 文字描边颜色
- strokeWidth 文字描边宽度
- textAllowOverlap 是否允许文字压盖
- opacity 标注透明度
- fill 填充配置项 支持数据映射
- color 图层填充颜色，支持常量和数据映射
常量：统一设置成一样的颜色
数据映射
- field 填充映射字段
- values 映射值，同color方法第二个参数数组，回调函数
- style 同 polygonLayer的style方法
- activeColor 鼠标滑过高亮颜色
- stroke 填充描边颜色
- strokeWidth 填充描边宽度
- autoFit 是否自动缩放到图层范围 `boolean`
- popup 信息窗口
- enable 是否开启 `boolean`
- triggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html字符串，支持回调函数 (properties: any) => string;
- chinaNationalStroke 中国国界线颜色
- chinaNationalWidth 中国国界线宽度
- coastlineStroke 海岸线颜色
- coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
- nationalWidth 国界线 `WorldLayer` `CountryLayer`
- nationalStroke 国界线 `WorldLayer` `CountryLayer`
- provinceStroke 省界颜色 `CountryLayer`
- provinceStrokeWidth 省界宽度 `CountryLayer`
- cityStroke 市级边界颜色 `CountryLayer`
- cityStrokeWidth 市级边界宽度 `CountryLayer`
- countyStroke 县级边界颜色 `CountryLayer`
- countyStrokeWidth 县级边界宽度 `CountryLayer`
### 数据
District 提供polygon数据需要跟用户的属性数据，通过关系字段进行连接
- [国家名称对照表](https://gw.alipayobjects.com/os/bmw-prod/b6fcd072-72a7-4875-8e05-9652ffc977d9.csv)
- [省级行政名称_adcode_对照表.csv](https://gw.alipayobjects.com/os/bmw-prod/2aa6fb7b-3694-4df3-b601-6f6f9adac496.csv)
- [市级行政区划及编码](https://gw.alipayobjects.com/os/bmw-prod/d2aefd78-f5df-486f-9310-7449cc7f5569.csv)
- [县级行政区名称级编码](https://gw.alipayobjects.com/os/bmw-prod/fafd299e-0e1e-4fa2-a8ac-10a984c6e983.csv)
### 属性
行政区划组件每个图层有多个子图层组成，如标注层，国界线、省界线等等，
#### fillLayer
### 方法
#### updateData(data, joinBy)
更新显示数据，
参数：
- data 需要更新的数据
- joinBy 关联字段 可选，如果不设置保持和初始化一致。
#### show
显示图层
#### hide
图层隐藏不显示
#### destroy
移除并销毁图层

21
examples/district/basic/demo/china_map.js → examples/district/bubble/demo/china_bubble.js
View File

@ -189,21 +189,16 @@ scene.on('loaded', () => {
new CountryLayer(scene, {
data: ProvinceData,
joinBy: [ 'NAME_CHN', 'name' ],
// label: {
// field: 'NAME_CHN',
// textAllowOverlap: true,
// },
depth: 1,
fill: {
field: 'value',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
color: '#ccc'
},
bubble: {
enable: true,
size: {
field: 'value',
values: [ 3, 20 ]
}
},
popup: {
enable: true,

57
examples/district/bubble/demo/city.js Normal file
View File

@ -0,0 +1,57 @@
import { Scene } from '@antv/l7';
import { CityLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
async function initMap() {
const response = await fetch(
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json'
);
const provinceData = await response.json();
const data = Object.keys(provinceData).map(key => {
return {
code: key,
name: provinceData[key][0],
pop: provinceData[key][2] * 1
};
});
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10
})
});
scene.on('loaded', () => {
new CityLayer(scene, {
data,
joinBy: [ 'adcode', 'code' ],
adcode: [ '330000', '330100' ],
depth: 3,
label: {
field: 'NAME_CHN',
textAllowOverlap: false
},
bubble: {
enable: true,
size: {
field: 'pop',
values: [ 3, 20 ]
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
}
initMap();

44
examples/district/bubble/demo/county.js Normal file
View File

@ -0,0 +1,44 @@
import { Scene } from '@antv/l7';
import { CountyLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10
})
});
scene.on('loaded', () => {
new CountyLayer(scene, {
data: [],
adcode: [ '110101', '110102', '110106' ],
depth: 3,
label: {
field: 'NAME_CHN'
},
bubble: {
enable: true,
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

33
examples/district/bubble/demo/meta.json Normal file
View File

@ -0,0 +1,33 @@
{
"title": {
"zh": "行政区划",
"en": "District"
},
"demos": [
{
"filename": "china_bubble.js",
"title": "中国地图气泡图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*U86gSZpLV54AAAAAAAAAAABkARQnAQ"
},
{
"filename": "world_map.js",
"title": "世界地图气泡",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*jljdRbDWNIgAAAAAAAAAAABkARQnAQ"
},
{
"filename": "province.js",
"title": "中国省级地图气泡",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*wS2QRa4kPTAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "city.js",
"title": "中国市地图气泡",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*usBDQ4cHxtsAAAAAAAAAAABkARQnAQ"
},
{
"filename": "county.js",
"title": "中国县地图气泡",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*0p7aSJ8AXoMAAAAAAAAAAABkARQnAQ"
}
]
}

62
examples/district/bubble/demo/province.js Normal file
View File

@ -0,0 +1,62 @@
import { Scene } from '@antv/l7';
import { ProvinceLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
async function initMap() {
const response = await fetch(
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json'
);
const provinceData = await response.json();
const data = Object.keys(provinceData).map(key => {
return {
code: key,
name: provinceData[key][0],
pop: provinceData[key][2] * 1
};
});
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10
})
});
scene.on('loaded', () => {
new ProvinceLayer(scene, {
data,
joinBy: [ 'adcode', 'code' ],
adcode: [ '330000' ],
depth: 3,
label: {
field: 'NAME_CHN',
textAllowOverlap: false
},
bubble: {
enable: true,
color: {
field: 'pop',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
}
initMap();

45
examples/district/bubble/demo/world_map.js Normal file
View File

@ -0,0 +1,45 @@
import { Scene } from '@antv/l7';
import { WorldLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 0,
minZoom: 0,
maxZoom: 10
})
});
scene.on('loaded', () => {
new WorldLayer(scene, {
data: [],
bubble: {
enable: true,
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
stroke: '#ccc',
label: {
enable: true,
textAllowOverlap: false,
field: 'NAME_CHN'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

4
examples/district/bubble/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: L7 District
order: 0
---

4
examples/district/bubble/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 气泡图
order: 2
---

0
examples/district/drill/API.en.md Normal file
View File

136
examples/district/drill/API.zh.md Normal file
View File

@ -0,0 +1,136 @@
## 钻取地图
钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。
钻取地图支持两种可视化类型
- 填充图：在地图上显示每个区域，根据区域值设置区块填充颜色
- 气泡图：每个区域用气泡显示，根据区域值设置气泡的颜色和大小
## 使用
```javascript
import { DrillDownLayer } from '@antv/l7-district';
```
DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。
### 构造函数
- scene L7 scene 对象
- option 行政区划配置项
- drillDepth `number` 下钻深度 `0 | 1 | 2 ` 1 市级 2，县级
- customTrigger 是否自定义下钻交互，默认 `false`
- drillDownTriggerEvent 向下钻取的触发事件 ⛔customTrigger为 true 时不生效
- drillUpTriggleEvent 向上钻取的触发事件 ⛔customTrigger为 true 时不生效
- provinceData 省级数据
- cityData 市级数据 可以是全量的数据，下钻时可以不需要重新设置数据
- countyData 县级数据 可以是全量的数据，下钻时可以不需要重新设置数据
- joinBy 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
- label 文本配置项 `labelOption`
- bubble 气泡配置项 `bubbleOption`
- fill 填充配置项 `fillOption`
- province `layerOption` 省级图层配置，如果不设置等同全局配置
- city `layerOption` 市级图层配置，如果不设置等同全局配置
- county `layerOption` 县级图层配置，如果不设置等同全局配置
#### layerOption
下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致
- joinBy: [string, string];
- label: Partial<ILabelOption>;
- bubble: Partial<IBubbleOption>;
- fill: Partial<IFillOptions>;
⛔中国地图视角设置，省界，海岸线，宽度通过以下属性
- chinaNationalStroke 中国国界线颜色
- chinaNationalWidth 中国国界线宽度
- coastlineStroke 海岸线颜色
- coastlineWidth 海岸线宽度
- nationalWidth 国界线
- nationalStroke 国界线
- provinceStroke 省界颜色
- provinceStrokeWidth 省界宽度
#### labelOption
文本标注配置项，目前只支持常量配置，不支持数据映射
- enable `boolean` 是否开启标注 `true`
- color `string` 标注颜色
- field `string` 标注字段名 默认 `NAME_CHN`
- size `number` 文本大小 默认 `8`
- stroke `string` 描边颜色 `#fff`
- strokeWidth `number` 描边宽度 `2`
- textAllowOverlap: `boolean` 文字是否允许压盖 `true`
- opacity `number` 透明度 `1`
#### bubbleOption
气泡图配置项
- enable `boolean` 是否显示气泡 `true`
- shape: AttributeType; 气泡形状支持数据映射
- size: AttributeType; 气泡大小支持数据映射
- color: AttributeType; 气泡颜色支持数据映射
- scale: { // 数字度量
field: string; 度量字段
type: ScaleTypeName; 度量字段
};
- style: {
opacity: number; 透明度
stroke: string; 填充色
strokeWidth: number; 填充宽度
};
#### fill
填充图样式
- scale: ScaleTypeName | null; 填充颜色度量类型
- color: AttributeType; 填充颜色支持数据映射
- style: any; 填充图样式
- activeColor: string; 填充图高亮颜色
## 属性
为了实现灵活相关图层的可视化样式，将内部图层通过属性对外透出
### provinceLayer
全国地图 CountyLayer
### cityLayer
省级地图 ProvinceLayer
### countyLayer
市级地图 CityLayer
## 方法
### drillDown
向下钻取 自定义钻取交互行为时使用
** 参数 **
- adcode 下钻层级的行政区划代码, 可以设置一个或者多个，多个使用
- data 下钻层级的数据，可选，如果不设置取全局配置
- joinBy 下钻关联字段 `Array` 可选 如果不设置取全局配置
```javascirpt
drillLayer.drillDown(['110100'])
```
### drillUp
向上钻取
```javascirpt
drillLayer.drillUp(['110100'])
```
### updateData
参数
- layer 更新图层名称 `province|city|county`
- data 数据
- joinBy 可选
### show
显示图形
### hide
隐藏图层
### destroy
移除并销毁图层

20
examples/district/basic/demo/drill_down.js → examples/district/drill/demo/drill_down.js
View File

@ -17,15 +17,17 @@ scene.on('loaded', () => {
data: [],
depth: 1,
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,

40
examples/district/drill/demo/drill_down_bubble.js Normal file
View File

@ -0,0 +1,40 @@
import { Scene } from '@antv/l7';
import { DrillDownLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10
})
});
scene.on('loaded', () => {
new DrillDownLayer(scene, {
data: [],
depth: 1,
bubble: {
enable: true,
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

18
examples/district/drill/demo/meta.json Normal file
View File

@ -0,0 +1,18 @@
{
"title": {
"zh": "行政区划",
"en": "District"
},
"demos": [
{
"filename": "drill_down.js",
"title": "中国地图钻取",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ"
},
{
"filename": "drill_down_bubble.js",
"title": "中国地图钻取气泡图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*opUFTqjO9YgAAAAAAAAAAABkARQnAQ"
}
]
}

4
examples/district/drill/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Drill Down
order: 0
---

4
examples/district/drill/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 钻取地图
order: 3
---

20
examples/district/react/demo/city.tsx
View File

@ -58,15 +58,17 @@ class City extends React.Component {
textAllowOverlap: false,
},
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603',
],
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603',
],
},
},
popup: {
enable: true,

22
examples/district/react/demo/county.tsx
View File

@ -44,15 +44,17 @@ export default class County extends React.Component {
field: 'NAME_CHN',
},
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603',
],
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,
@ -100,4 +102,4 @@ export default class County extends React.Component {
};
}
ReactDOM.render(<County />, document.getElementById('map'));
ReactDOM.render(<County />, document.getElementById('map'));

26
examples/district/react/demo/province.tsx
View File

@ -1,9 +1,9 @@
import { Scene } from '@antv/l7';
import { ProvinceLayer } from '@antv/l7-district';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import ReactDOM from 'react-dom';
import { Select } from 'antd';
import * as React from 'react';
import ReactDOM from 'react-dom';
const { Option } = Select;
const ProvinceData = [
@ -217,21 +217,23 @@ class Province extends React.Component {
const { province } = this.state;
this.provinceLayer = new ProvinceLayer(scene, {
adcode: ['230000'],
depth: 3,
depth: 1,
label: {
field: 'NAME_CHN',
textAllowOverlap: false,
},
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603',
],
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603',
],
},
},
popup: {
enable: true,
@ -287,4 +289,4 @@ class Province extends React.Component {
this.provinceLayer.updateDistrict([value]);
};
}
ReactDOM.render(<Province />, document.getElementById('map'))
ReactDOM.render(<Province />, document.getElementById('map'));

2
examples/district/react/index.zh.md
View File

@ -1,4 +1,4 @@
---
title: React 组件
order: 3
order: 4
---

68
examples/draw/UI/API.zh.md
View File

@ -90,75 +90,39 @@ scene.addControl(control);
scene.removeControl(control);
```
### Draw Type
## 方法
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
### getDraw(type)
#### DrawCircle
获取 draw 实例
绘制圆形
参数： type 绘制实例 `point|line|polygon|rect| circle`
```javascript
import { DrawCircle } from '@antv/l7-draw';
const drawCircle = new DrawCircle(scene);
drawCircle.enable();
const pointDraw = drawcontrol.get('point');
```
#### DrawRect
### getAllData()
绘制四边形
获取每个 Draw 实例绘制的结果数据
返回数据格式如下
```javascript
import { DrawRect } from '@antv/l7-draw';
const drawRect = new DrawRect(scene);
drawRect.enable();
{
point: []; // geojson数据格式
line: [];
}
```
#### DrawLine
### removeAllData()
绘制路径
移除绘制的的所有数据
```javascript
import { DrawLine } from '@antv/l7-draw';
const drawLine = new DrawLine(scene);
drawLine.enable();
drawcontrol.removeAllData();
```
#### DrawPoint
绘制点
```javascript
import { DrawPoint } from '@antv/l7-draw';
const drawPoint = new DrawPoint(scene);
drawPoint.enable();
```
#### DrawPolygon
绘制多边形
```javascript
import { DrawPolygon } from '@antv/l7-draw';
const drawPoint = new DrawPolygon(scene);
drawPoint.enable();
```
### 配置项 DrawOption
- editEnable boolean 是否允许编辑
- selectEnable boolean 是否允许选中
### 方法
#### enable
开始编辑，绘制完成之后会自动结束。
#### disable
结束编辑
### 事件
#### draw.create

272
examples/draw/basic/API.en.md Normal file
View File

@ -0,0 +1,272 @@
---
title: API
---
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
# 使用
**using modules**
```javascript
import { DrawControl } from '@antv/l7-draw';
```
**CDN 版本引用**
```html
<head>
<! --引入最新版的L7-Draw -->
<script src="https://unpkg.com/@antv/l7-draw"></script>
</head>
```
### 参数
```javascript
const control = new DrawControl(scene, option);
```
#### scene
scene 对象
#### options
control 配置项
| name | Type | Default | Description |
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 |
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 |
| style | | | 地图绘制样式 |
**controlOptions**
UI 组件配置项
- point `boolean | drawOption` 绘制点工具配置
- line `boolean | drawOption` 绘制线工具配置
- polygon `boolean | drawOption` 绘制面工具配置
- circle `boolean | drawOption` 绘制圆工具配置
- rect `boolean | drawOption` 绘制矩形工具配置
- delete `boolean | drawOption` 添加删除工具
默认配置
```
{
point: true,
line: true,
polygon: true,
rect: true,
circle: true,
delete: true
}
```
示例
```
{
point: false,
line: {
editEnable: false,
},
polygon: true,
rect: true,
circle: true,
delete: false
```
### 添加到地图
```javascript
scene.addControl(control);
```
### 从地图中移除
```javascript
scene.removeControl(control);
```
### Draw Type
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
#### DrawCircle
绘制圆形
```javascript
import { DrawCircle } from '@antv/l7-draw';
const drawCircle = new DrawCircle(scene);
drawCircle.enable();
```
#### DrawRect
绘制四边形
```javascript
import { DrawRect } from '@antv/l7-draw';
const drawRect = new DrawRect(scene);
drawRect.enable();
```
#### DrawLine
绘制路径
```javascript
import { DrawLine } from '@antv/l7-draw';
const drawLine = new DrawLine(scene);
drawLine.enable();
```
#### DrawPoint
绘制点
```javascript
import { DrawPoint } from '@antv/l7-draw';
const drawPoint = new DrawPoint(scene);
drawPoint.enable();
```
#### DrawPolygon
绘制多边形
```javascript
import { DrawPolygon } from '@antv/l7-draw';
const drawPoint = new DrawPolygon(scene);
drawPoint.enable();
```
### 配置项 DrawOption
- editEnable boolean 是否允许编辑
- selectEnable boolean 是否允许选中
### 方法
#### enable
开始编辑，绘制完成之后会自动结束。
#### disable
结束编辑
### 事件
#### draw.create
绘制完成时触发该事件
#### draw.delete
图形删除时触发该事件
#### draw.update
图形更新时触发该事件，图形的平移，顶点的编辑
### style
- active 绘制过程中高亮颜色
- normal 正常显示状态
```javascript
const style = {
active: {
point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 5,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
line: {
type: 'LineLayer',
shape: 'line',
color: '#fbb03b',
size: 1,
style: {
opacity: 1,
lineType: 'dash',
dashArray: [2, 2],
},
},
polygon: {
shape: 'fill',
color: '#fbb03b',
style: {
opacity: 0.1,
stroke: '#fbb03b',
strokeWidth: 1,
strokeOpacity: 1,
lineType: 'dash',
dashArray: [2, 2],
},
},
},
normal: {
polygon: {
type: 'PolygonLayer',
shape: 'fill',
color: '#3bb2d0',
style: {
opacity: 0.1,
stroke: '#3bb2d0',
strokeWidth: 1,
strokeOpacity: 1,
lineType: 'solid',
dashArray: [2, 2],
},
},
line: {
type: 'LineLayer',
shape: 'line',
size: 1,
color: '#3bb2d0',
style: {
opacity: 1,
},
},
point: {
type: 'PointLayer',
shape: 'circle',
color: '#3bb2d0',
size: 3,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
},
normal_point: {
type: 'PointLayer',
shape: 'circle',
color: '#3bb2d0',
size: 3,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
mid_point: {
point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 3,
style: {},
},
},
};
```

209
examples/draw/basic/API.zh.md Normal file
View File

@ -0,0 +1,209 @@
---
title: API
---
地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。
# 使用
**using modules**
```javascript
import { DrawControl } from '@antv/l7-draw';
```
**CDN 版本引用**
```html
<head>
<! --引入最新版的L7-Draw -->
<script src="https://unpkg.com/@antv/l7-draw"></script>
</head>
```
### DrawCircle
绘制圆形
```javascript
import { DrawCircle } from '@antv/l7-draw';
const drawCircle = new DrawCircle(scene);
drawCircle.enable();
```
### DrawRect
绘制矩形
```javascript
import { DrawRect } from '@antv/l7-draw';
const drawRect = new DrawRect(scene);
drawRect.enable();
```
### DrawLine
绘制路径
```javascript
import { DrawLine } from '@antv/l7-draw';
const drawLine = new DrawLine(scene);
drawLine.enable();
```
#### DrawPoint
绘制点
```javascript
import { DrawPoint } from '@antv/l7-draw';
const drawPoint = new DrawPoint(scene);
drawPoint.enable();
```
#### DrawPolygon
绘制多边形
```javascript
import { DrawPolygon } from '@antv/l7-draw';
const drawPoint = new DrawPolygon(scene);
drawPoint.enable();
```
### 配置项 DrawOption
- data `geojson' 初始化数据仅支持 Polygon, Line, Point, 不支持MultPolygon,Circle 可用编辑现有数据
- editEnable boolean 是否允许编辑
- selectEnable boolean 是否允许选中
- style 绘制样式
### 方法
#### enable
开始编辑，绘制完成之后会自动结束。
```javascript
draw.enable();
```
#### disable
结束绘制
```javascript
draw.disable();
```
结束编辑
### 事件
#### draw.create
绘制完成时触发该事件
#### draw.delete
图形删除时触发该事件
#### draw.update
图形更新时触发该事件，图形的平移，顶点的编辑
### style
- active 绘制过程中高亮颜色
- normal 正常显示状态
```javascript
const style = {
active: {
point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 5,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
line: {
type: 'LineLayer',
shape: 'line',
color: '#fbb03b',
size: 1,
style: {
opacity: 1,
lineType: 'dash',
dashArray: [2, 2],
},
},
polygon: {
shape: 'fill',
color: '#fbb03b',
style: {
opacity: 0.1,
stroke: '#fbb03b',
strokeWidth: 1,
strokeOpacity: 1,
lineType: 'dash',
dashArray: [2, 2],
},
},
},
normal: {
polygon: {
type: 'PolygonLayer',
shape: 'fill',
color: '#3bb2d0',
style: {
opacity: 0.1,
stroke: '#3bb2d0',
strokeWidth: 1,
strokeOpacity: 1,
lineType: 'solid',
dashArray: [2, 2],
},
},
line: {
type: 'LineLayer',
shape: 'line',
size: 1,
color: '#3bb2d0',
style: {
opacity: 1,
},
},
point: {
type: 'PointLayer',
shape: 'circle',
color: '#3bb2d0',
size: 3,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
},
normal_point: {
type: 'PointLayer',
shape: 'circle',
color: '#3bb2d0',
size: 3,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
mid_point: {
point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 3,
style: {},
},
},
};
```

4
examples/draw/basic/demo/meta.json
View File

@ -8,12 +8,12 @@
{
"filename": "draw_circle.js",
"title": "绘制圆",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nMVTRY3xCuoAAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*pawjTqbwM4gAAAAAAAAAAABkARQnAQ"
},
{
"filename": "draw_polygon.js",
"title": "绘制多边形",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nMVTRY3xCuoAAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*m1eqS4gwgz4AAAAAAAAAAABkARQnAQ"
}
]
}

3
examples/draw/basic/design.en.md Normal file
View File

@ -0,0 +1,3 @@
---
title: introduction
---

54
examples/draw/basic/design.zh.md Normal file
View File

@ -0,0 +1,54 @@
---
title: 如何使用
---
图形绘制包括4种状态
- 绘制 绘制图形
- 选中 平移图形
- 编辑 图形顶点编辑
- 完成态 绘制完成，点击进入选中太
### 绘制圆
#### 绘制态
1. 点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ)地图生成第一个点既圆心
2. 拖动，![l7-draw-move](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*eVVASaKz79UAAAAAAAAAAABkARQnAQ)拖动过程中根据当前点实时计算距离圆心的距离，生成当前圆
3. 拖动结束，绘制完成，进入选中状态
#### 选中态
鼠标点击图形进入编辑态，鼠标点击图形外部，取消选中
1. 鼠标 mouseenter 图形鼠标 move
2. 拖到鼠标即可实现图形的平移
3. 鼠标点击图形进入编辑态，鼠标点击图形外部
#### 编辑态
鼠标点击图形外部，完成编辑
1. 鼠标滑入顶点，鼠标变成 move
1. 拖动顶点即可改变圆的半径
### 绘制多边形
#### 绘制态
1. 点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ) 生成第一个点
2. 连续点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ) 依次生成多边形的点序列，点击过程中会始终显示第一个点和最后一个点
3. 结束，双击地图结束，或者点击第一个点或最后一个点结束 ![l7-draw-pointer](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*3siqTqg0oX4AAAAAAAAAAABkARQnAQ)
#### 选中态
鼠标点击图形进入选中态，选中态可对图形平移，鼠标点击图形外部，取消选中
#### 编辑态
鼠标点击图形进入编辑态，编辑态会标注多边形顶点，和各个顶点的中心点
鼠标点击图形外部，取消选中
1. 添加顶点，点击中心点![l7-draw-pointer](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*3siqTqg0oX4AAAAAAAAAAABkARQnAQ)，为多边形新增一个顶点
2. 移动顶点，拖动顶点可对顶点移动

40
examples/heatmap/grid/demo/grid_world.js Normal file
View File

@ -0,0 +1,40 @@
import { Scene, HeatmapLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'blank',
pitch: 0,
center: [ 110.097892, 33.853662 ],
zoom: 4.056
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/3dadb1f5-8f54-4449-8206-72db6e142c40.json'
)
.then(res => res.json())
.then(data => {
const layer = new HeatmapLayer({
autoFit: true
})
.source(data, {
transforms: [
{
type: 'hexagon',
size: 5 * 100000
}
]
})
.shape('circle')
.active(false)
.color('#aaa')
.style({
coverage: 0.7,
angle: 0,
opacity: 1.0
});
scene.addLayer(layer);
});
});

5
examples/heatmap/grid/demo/meta.json
View File

@ -4,6 +4,11 @@
"en": "heatmap"
},
"demos": [
{
"filename": "grid_world.js",
"title": "网格世界地图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*1PeGSboLGUUAAAAAAAAAAABkARQnAQ"
},
{
"filename": "china.js",
"title": "网格热力图",

4
examples/heatmap/heatmap/demo/heatmap3d.js
View File

@ -1,9 +1,9 @@
import { Scene, HeatmapLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new GaodeMap({
style: 'dark',
pitch: 58.5,
center: [ 111.8759, 30.6942 ],

2
examples/heatmap/hexagon/demo/china.js
View File

@ -26,7 +26,7 @@ scene.on('loaded', () => {
transforms: [
{
type: 'hexagon',
size: 17000,
size: 200000,
field: 'v',
method: 'sum'
}

2
examples/react/layer/demo/world.jsx
View File

@ -7,7 +7,7 @@ const World = React.memo(function Map() {
React.useEffect(() => {
const fetchData = async () => {
const response = await fetch(
'https://gw.alipayobjects.com/os/basement_prod/68dc6756-627b-4e9e-a5ba-e834f6ba48f8.json'
'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json'
);
const data = await response.json();
setData(data);

63
examples/tutorial/layer/demo/layer_highlight.js Normal file
View File

@ -0,0 +1,63 @@
import { PolygonLayer, LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
pitch: 0,
center: [ 118.7368, 32.0560 ],
zoom: 9
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/91247d10-585b-4406-b1e2-93b001e3a0e4.json'
)
.then(res => res.json())
.then(data => {
const filllayer = new PolygonLayer({
name: 'fill'
})
.source(data)
.shape('fill')
.color('unit_price', [ '#f0f9e8', '#ccebc5', '#a8ddb5', '#7bccc4', '#43a2ca', '#0868ac' ])
.style({
opacity: 1
});
const linelayer = new LineLayer({
zIndex: 1,
name: 'line'
})
.source(data)
.shape('line')
.size(0.5)
.color('#fff')
.style({
opacity: 0.5
});
const hightLayer = new LineLayer({
zIndex: 4, // 设置显示层级
name: 'hightlight'
})
.source({
type: 'FeatureCollection',
features: [ ]
})
.shape('line')
.size(2)
.color('red')
.style({
opacity: 1
});
scene.addLayer(filllayer);
scene.addLayer(linelayer);
scene.addLayer(hightLayer);
filllayer.on('click', feature => {
console.log(feature);
hightLayer.setData({
type: 'FeatureCollection',
features: [ feature.feature ]
});
});
});
});

17
examples/tutorial/layer/demo/mapbox.js Normal file
View File

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

18
examples/tutorial/layer/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*yXzQRYcGTyoAAAAAAAAAAABkARQnAQ"
},
{
"filename": "mapbox.js",
"title": "MapBox底图组件",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
}
]
}

5
examples/tutorial/layer/index.en.md Normal file
View File

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

5
examples/tutorial/layer/index.zh.md Normal file
View File

@ -0,0 +1,5 @@
---
title: 图层
order: 2
---
图层初始化与交互

2
gatsby-browser.js
View File

@ -1,7 +1,7 @@
require('./site/css/demo.css');
require('./packages/component/src/css/l7.css');
require('antd/dist/antd.css');
require('antd/dist/antd.less');
window.geotiff = require('geotiff');
window.g2 = require('@antv/g2');
window.l7 = require('@antv/l7');

8
gatsby-config.js
View File

@ -77,6 +77,14 @@ module.exports = {
},
order: 1
},
{
slug: 'api/district',
title: {
zh: '行政区划',
en: 'District'
},
order: 2
},
{
slug: 'api/draw',
title: {

2
gatsby-node.js
View File

@ -21,6 +21,6 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
'@antv/l7-react': path.resolve(__dirname, 'packages/react/src'),
'@antv/l7-draw': path.resolve(__dirname, 'packages/draw/src'),
'@antv/l7-district': path.resolve(__dirname, 'packages/district/src')
'@antv/l7-district': path.resolve(__dirname, 'packages/boundary/src')
};
};

2
jest.config.js
View File

@ -28,7 +28,7 @@ module.exports = {
moduleFileExtensions: [ 'ts', 'tsx', 'js' ],
modulePathIgnorePatterns: [ 'dist' ],
moduleNameMapper: {
'@antv/l7-(.+)$': '<rootDir>packages/$1/src',
'@antv/l7-(.+)$': '<rootDir>packages/$1/src'
},
notify: true,
notifyMode: 'always',

2
lerna.json
View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.2.5",
"version": "2.2.28",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

16
package.json
View File

@ -36,7 +36,9 @@
"@types/node": "13.11.1",
"@types/storybook__react": "^4.0.2",
"@types/supercluster": "^5.0.1",
"antd": "^4.2.4",
"awesome-typescript-loader": "^5.2.1",
"babel-eslint": "8.2.5",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-plugin-const-enum": "^0.0.2",
@ -55,7 +57,7 @@
"copy-webpack-plugin": "^5.1.1",
"core-js": "3",
"coveralls": "^3.0.7",
"cross-env": "^6.0.3",
"cross-env": "^7.0.2",
"css-loader": "^3.2.0",
"cz-conventional-changelog": "^3.0.2",
"dat.gui": "^0.7.2",
@ -116,7 +118,7 @@
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.15.0",
"tslint-plugin-prettier": "^1.3.0",
"tslint-react": "^4.1.0",
"tslint-react": "4.1.0",
"typescript": "^3.7.0-beta",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
@ -131,8 +133,8 @@
"site:clean": "gatsby clean",
"site:deploy": "yarn run site:build && gh-pages -d public",
"site:publish": "gh-pages -d public",
"lint:fix": "prettier --write docs/api/**/*.md docs/api/*.md packages/**/*.ts{,x} packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx *.md",
"lint:examples": "eslint examples/**/**/*.js --fix",
"lint:fix": "prettier --write docs/api/**/*.md docs/api/*.md stories/**/**/*.tsx *.md",
"lint:examples": "eslint examples --fix --ext .js",
"prebuild": "run-p tsc lint",
"build": "yarn clean && lerna run build",
"postbuild": "yarn build:declarations",
@ -159,7 +161,8 @@
"bundle-dev": "cross-env BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js --environment 'BUILD:production,MINIFY:false'",
"bundle:watch": "cross-env BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js --watch",
"glsl-minify": "node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag",
"clean": "lerna run clean"
"clean": "lerna run clean",
"sync": "lerna run sync"
},
"workspaces": [
"packages/*",
@ -185,6 +188,5 @@
},
"tnpm": {
"mode": "yarn"
},
"version": "0.0.0"
}
}

0
packages/district/README.md → packages/boundary/README.md
View File

34
packages/boundary/__tests__/layer.spec.ts Normal file
View File

@ -0,0 +1,34 @@
// import { WorldLayer } from '@antv/l7-district';
describe('baseLayer', () => {
it('set option', () => {
const option = {
adcode: [],
data: [
{
name: 1,
code: 2,
},
{
name: 2,
code: 3,
},
{
name: 3,
code: 4,
},
],
};
// @ts-ignore
// const layer = new WorldLayer(null, option);
// layer.setOption({
// data: [
// {
// name: 1,
// code: 4,
// },
// ],
// });
// // @ts-ignore
// expect(layer.options.data.length).toBe(1);
});
});

16
packages/district/package.json → packages/boundary/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-district",
"version": "2.2.5",
"version": "2.2.28",
"description": "L7 district moudules",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -31,10 +31,11 @@
"build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"build:cdn": "node_modules/.bin/rollup -c",
"test": "jest"
"test": "jest",
"sync": "tnpm sync"
},
"dependencies": {
"@antv/l7": "2.2.5",
"@antv/l7": "2.2.28",
"@babel/runtime": "^7.7.7",
"@turf/circle": "^6.0.1",
"@turf/distance": "^6.0.1",
@ -44,10 +45,8 @@
"eventemitter3": "^4.0.0",
"geobuf": "^3.0.1",
"lodash": "^4.6.2",
"pbf": "^3.2.1"
},
"peerDependencies": {
"@antv/l7": "^2.2.3"
"pbf": "^3.2.1",
"simplify-geojson": "^1.0.3"
},
"bugs": {
"url": "https://github.com/antvis/L7/issues"
@ -58,5 +57,6 @@
"postcss-url": "^8.0.0",
"rollup": "^2.3.3",
"rollup-plugin-less": "^1.1.2"
}
},
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0"
}

2
packages/district/rollup.config.js → packages/boundary/rollup.config.js
View File

@ -25,7 +25,7 @@ export default {
commonjs({
namedExports: {
eventemitter3: [ 'EventEmitter' ],
lodash: [ 'merge', 'clone' ]
lodash: [ 'merge', 'mergeWith', 'clone', 'isObject' ]
}
}),
buble({

263
packages/boundary/src/config.ts Normal file
View File

@ -0,0 +1,263 @@
// tslint:disable-next-line:no-submodule-imports
import merge from 'lodash/merge';
let DataLevel = 2; // d
const dataLevel2: { [key: string]: any } = {
world: {
fill: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/ad26cd25-96ea-40fd-935d-7e21a5c08893.bin',
},
line: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/62f61f5f-cca7-4137-845d-13c8f9969664.bin',
},
label: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/90c51eb3-04d7-402f-bd05-95e4bd27dd62.bin',
parser: {
type: 'geojson',
},
},
nationalBoundaries: {
type: 'json',
url:
'https://gw.alipayobjects.com/os/bmw-prod/ee493a41-0558-4c0e-bee6-520276c4f1a8.json',
},
},
country: {
CHN: {
1: {
fill: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/25228941-b2ac-4591-b07d-8261ac08d06f.bin',
},
line: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/70ec087e-c48a-4b76-8825-6452f17bae7a.bin',
},
provinceLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/0024caaf-86b2-4e75-a3d1-6d2146490b67.bin',
},
label: {
type: 'json',
url:
'https://gw.alipayobjects.com/os/bmw-prod/36832a45-68f8-4b51-b006-9dec71f92a23.json',
},
},
2: {
fill: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/522c6496-c711-4581-88db-c3741cd39abd.bin',
},
line: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/f6a4e2b1-359b-43a6-921c-39d2088d1dab.bin',
},
cityLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/f6a4e2b1-359b-43a6-921c-39d2088d1dab.bin',
},
provinceLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/0024caaf-86b2-4e75-a3d1-6d2146490b67.bin',
},
},
3: {
fill: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/516b2703-d692-44e6-80dd-b3f5df0186e7.bin',
},
line: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/bc97875a-90f2-42c0-a62c-43d2efd7460d.bin',
},
countryLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/bc97875a-90f2-42c0-a62c-43d2efd7460d.bin',
},
cityLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/8bfbfe7e-bd0e-4bbe-84d8-629f4dc7abc4.bin',
},
provinceLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/778ad7ba-5a3f-4ed6-a94a-b8ab8acae9d6.bin',
},
},
nationalBoundaries: {
type: 'json',
url:
'https://gw.alipayobjects.com/os/bmw-prod/ee493a41-0558-4c0e-bee6-520276c4f1a8.json',
},
nationalBoundaries2: {
type: 'json',
url:
'https://gw.alipayobjects.com/os/bmw-prod/f2189cc4-662b-4358-8573-36f0f918b7ca.json',
},
island: {
type: 'json',
url:
'https://gw.alipayobjects.com/os/bmw-prod/fe49b393-1147-4769-94ed-70471f4ff15d.json',
},
},
},
province: {
110000: '',
},
};
const dataLevel1: { [key: string]: any } = {
world: {
fill: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/35bb8365-1926-471c-b357-db2c02ff3a81.bin',
},
line: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/8ec671c3-a4f9-4fdf-8e88-85d2ab1d8930.bin',
},
label: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/90c51eb3-04d7-402f-bd05-95e4bd27dd62.bin',
parser: {
type: 'geojson',
},
},
nationalBoundaries: {
type: 'json',
url:
'https://gw.alipayobjects.com/os/bmw-prod/ee493a41-0558-4c0e-bee6-520276c4f1a8.json',
},
},
country: {
CHN: {
1: {
fill: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/380370e0-76aa-4240-8874-5732de77e71d.bin',
},
line: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/70ec087e-c48a-4b76-8825-6452f17bae7a.bin',
},
provinceLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/778ad7ba-5a3f-4ed6-a94a-b8ab8acae9d6.bin',
},
label: {
type: 'json',
url:
'https://gw.alipayobjects.com/os/bmw-prod/36832a45-68f8-4b51-b006-9dec71f92a23.json',
},
},
2: {
fill: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/feeb1f06-11c6-4495-84c9-f41ea6f77123.bin',
},
line: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/8bfbfe7e-bd0e-4bbe-84d8-629f4dc7abc4.bin',
},
cityLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/8bfbfe7e-bd0e-4bbe-84d8-629f4dc7abc4.bin',
},
provinceLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/778ad7ba-5a3f-4ed6-a94a-b8ab8acae9d6.bin',
},
},
3: {
fill: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/24a9ee83-2be1-4fc1-b187-769ac939269d.bin',
},
line: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/bc97875a-90f2-42c0-a62c-43d2efd7460d.bin',
},
countryLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/bc97875a-90f2-42c0-a62c-43d2efd7460d.bin',
},
cityLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/8bfbfe7e-bd0e-4bbe-84d8-629f4dc7abc4.bin',
},
provinceLine: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/778ad7ba-5a3f-4ed6-a94a-b8ab8acae9d6.bin',
},
},
nationalBoundaries: {
type: 'json',
url:
'https://gw.alipayobjects.com/os/bmw-prod/ee493a41-0558-4c0e-bee6-520276c4f1a8.json',
},
nationalBoundaries2: {
type: 'json',
url:
'https://gw.alipayobjects.com/os/bmw-prod/f2189cc4-662b-4358-8573-36f0f918b7ca.json',
},
island: {
type: 'json',
url:
'https://gw.alipayobjects.com/os/bmw-prod/fe49b393-1147-4769-94ed-70471f4ff15d.json',
},
},
},
province: {
110000: '',
},
};
const DataLevelMap: { [key: string]: any } = {
1: dataLevel1, // 高精度数据
2: dataLevel2,
};
function setDataConfig(config: any, level: number = DataLevel) {
merge(DataLevelMap[level], config);
}
function getDataConfig(level: number = DataLevel) {
return DataLevelMap[level];
}
function setDataLevel(level: number) {
DataLevel = level;
}
const DataConfig = DataLevelMap[DataLevel];
export { setDataConfig, setDataLevel, getDataConfig, DataConfig };

5
packages/district/src/index.ts → packages/boundary/src/index.ts
View File

@ -1,4 +1,4 @@
import { setDataConfig } from './config';
// import { DataConfig, setDataConfig } from './config_1';
import CityLayer from './layer/city';
import CountryLayer from './layer/country';
import CountyLayer from './layer/county';
@ -12,5 +12,6 @@ export {
CityLayer,
CountyLayer,
DrillDownLayer,
setDataConfig,
};
export * from './config';
export * from './layer/interface';

360
packages/boundary/src/layer/baseLayer.ts Normal file
View File

@ -0,0 +1,360 @@
import {
ILayer,
IPopup,
LineLayer,
PointLayer,
PolygonLayer,
Popup,
Scene,
StyleAttrField,
} from '@antv/l7';
import { EventEmitter } from 'eventemitter3';
// @ts-ignore
import geobuf from 'geobuf';
// tslint:disable-next-line: no-submodule-imports
import isObject from 'lodash/isObject';
// tslint:disable-next-line: no-submodule-imports
import mergeWith from 'lodash/mergeWith';
// @ts-ignore
import Pbf from 'pbf';
// @ts-ignore
import simplify from 'simplify-geojson';
import { setDataLevel } from '../config';
import { AttributeType, IDistrictLayerOption } from './interface';
function mergeCustomizer(objValue: any, srcValue: any) {
if (Array.isArray(srcValue)) {
return srcValue;
}
}
export default class BaseLayer extends EventEmitter {
public fillLayer: ILayer;
public lineLayer: ILayer;
public labelLayer: ILayer;
public bubbleLayer: ILayer;
protected scene: Scene;
protected options: IDistrictLayerOption;
protected layers: ILayer[] = [];
protected fillData: any;
private popup: IPopup;
constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
super();
this.scene = scene;
this.options = mergeWith(this.getDefaultOption(), option, mergeCustomizer);
setDataLevel(this.options.geoDataLevel);
}
public destroy() {
this.layers.forEach((layer) => this.scene.removeLayer(layer));
this.layers.length = 0;
}
public show() {
this.layers.forEach((layer) => layer.show());
}
public hide() {
this.layers.forEach((layer) => layer.hide());
}
public setOption(newOption: { [key: string]: any }) {
this.options = mergeWith(this.options, newOption, mergeCustomizer);
}
public getFillData() {
return this.fillData;
}
public updateData(
newData: Array<{ [key: string]: any }>,
joinByField?: [string, string],
) {
this.setOption({
data: newData,
joinBy: joinByField,
});
const { data = [], joinBy } = this.options;
this.fillLayer.setData(this.fillData, {
transforms:
data.length === 0
? []
: [
{
type: 'join',
sourceField: joinBy[1], // data1 对应字段名
targetField: joinBy[0], // data 对应字段名 绑定到的地理数据
data,
},
],
});
}
protected async fetchData(data: { url: any; type: string }) {
if (data.type === 'pbf') {
const buffer = await (await fetch(data.url)).arrayBuffer();
let geojson = geobuf.decode(new Pbf(buffer));
if (this.options.simplifyTolerance !== false) {
geojson = simplify(geojson, this.options.simplifyTolerance);
}
return geojson;
} else {
return isObject(data.url) ? data.url : (await fetch(data.url)).json();
}
}
protected getDefaultOption(): IDistrictLayerOption {
return {
zIndex: 0,
visible: true,
geoDataLevel: 2,
depth: 1,
adcode: [],
joinBy: ['name', 'name'],
simplifyTolerance: false,
label: {
enable: true,
color: '#000',
field: 'name',
size: 10,
stroke: '#fff',
strokeWidth: 2,
textAllowOverlap: true,
opacity: 1,
textOffset: [0, 0],
padding: [5, 5],
},
bubble: {
enable: false,
shape: 'circle',
color: '#1AA9FF',
size: 15,
style: {
opacity: 1,
stroke: '#fff',
strokeWidth: 1,
},
},
fill: {
scale: null,
color: '#ddd',
style: {
opacity: 1.0,
},
activeColor: false,
},
autoFit: true,
showBorder: true,
stroke: '#bdbdbd',
strokeVisible: true,
strokeWidth: 0.6,
cityStroke: '#636363',
cityStrokeWidth: 0.6,
countyStrokeWidth: 0.6,
provinceStrokeWidth: 0.6,
provinceStroke: '#f0f0f0',
provinceStrokeVisible: true,
countyStroke: '#525252',
coastlineStroke: '#4190da',
coastlineWidth: 0.6,
nationalStroke: '#c994c7',
nationalWidth: 0.5,
chinaNationalStroke: 'gray',
chinaNationalWidth: 1,
popup: {
enable: true,
openTriggerEvent: 'mousemove',
closeTriggerEvent: 'mouseout',
option: {},
Html: (properties: any) => {
return `${properties.name}`;
},
},
};
}
protected addFillLayer(fillCountry: any) {
// 添加省份填充
const { popup, data = [], fill, autoFit, joinBy, visible } = this.options;
this.fillData = fillCountry;
const fillLayer = new PolygonLayer({
autoFit,
visible,
}).source(fillCountry, {
transforms:
data.length === 0
? []
: [
{
type: 'join',
sourceField: joinBy[1], // data1 对应字段名
targetField: joinBy[0], // data 对应字段名 绑定到的地理数据
data,
},
],
});
this.setLayerAttribute(fillLayer, 'color', fill.color as AttributeType);
this.setLayerAttribute(fillLayer, 'filter', fill.filter as AttributeType);
if (fill.scale && isObject(fill.color)) {
fillLayer.scale('color', {
type: fill.scale,
field: fill.color.field as string,
});
}
fillLayer.shape('fill').style(fill.style);
if (fill.activeColor) {
fillLayer.active({
color: fill.activeColor as string,
});
}
this.fillLayer = fillLayer;
this.layers.push(fillLayer);
this.scene.addLayer(fillLayer);
if (this.options.bubble && this.options.bubble?.enable !== false) {
const labeldata = fillCountry.features.map((feature: any) => {
return {
...feature.properties,
center: [feature.properties.x, feature.properties.y],
};
});
this.addBubbleLayer(labeldata);
}
if (popup.enable) {
this.addPopup();
}
this.emit('loaded');
}
protected addFillLine(provinceLine: any) {
const { stroke, strokeWidth, zIndex, visible } = this.options;
const layer2 = new LineLayer({
zIndex: zIndex + 0.1,
visible,
})
.source(provinceLine)
.color(stroke)
.size(strokeWidth)
.style({
opacity: 1,
});
this.scene.addLayer(layer2);
this.layers.push(layer2);
this.lineLayer = layer2;
}
protected addLabelLayer(labelData: any, type: string = 'json') {
const labelLayer = this.addLabel(labelData, type);
this.scene.addLayer(labelLayer);
this.layers.push(labelLayer);
this.labelLayer = labelLayer;
}
protected addBubbleLayer(labelData: any, type: string = 'json') {
const { bubble, zIndex, data = [], joinBy, visible } = this.options;
const bubbleLayer = new PointLayer({
zIndex: zIndex + 0.3,
visible,
}).source(labelData, {
parser: {
type,
coordinates: 'center',
},
transforms:
data.length === 0
? []
: [
{
type: 'join',
sourceField: joinBy[1], // data1 对应字段名
targetField: joinBy[0], // data 对应字段名 绑定到的地理数据
data,
},
],
});
this.setLayerAttribute(bubbleLayer, 'color', bubble.color as AttributeType);
this.setLayerAttribute(bubbleLayer, 'size', bubble.size as AttributeType);
this.setLayerAttribute(bubbleLayer, 'shape', bubble.shape as AttributeType);
this.setLayerAttribute(
bubbleLayer,
'filter',
bubble.filter as AttributeType,
);
if (bubble.scale) {
bubbleLayer.scale(bubble.scale.field, {
type: bubble.scale.type,
});
}
bubbleLayer.style(bubble.style);
this.scene.addLayer(bubbleLayer);
this.layers.push(bubbleLayer);
this.bubbleLayer = bubbleLayer;
return bubbleLayer;
}
protected addLabel(labelData: any, type: string = 'json') {
const { label, zIndex, visible } = this.options;
const labelLayer = new PointLayer({
zIndex: zIndex + 5,
visible,
})
.source(labelData, {
parser: {
type,
coordinates: 'center',
},
})
.shape(label.field as StyleAttrField, 'text')
.style(label);
this.setLayerAttribute(labelLayer, 'color', label.color as AttributeType);
this.setLayerAttribute(labelLayer, 'size', label.size as AttributeType);
this.setLayerAttribute(labelLayer, 'filter', label.filter);
return labelLayer;
}
protected addPopup() {
const { popup } = this.options;
let popupLayer;
if (popup.triggerLayer) {
popupLayer =
popup.triggerLayer === 'bubble' ? this.bubbleLayer : this.fillLayer;
} else {
popupLayer = this.options.bubble.enable
? this.bubbleLayer
: this.fillLayer;
}
popupLayer.on(popup.openTriggerEvent as string, (e) => {
const html = popup.Html
? popup.Html(e.feature.properties ? e.feature.properties : e.feature)
: '';
this.popup = new Popup({
closeButton: false,
...popup.option,
})
.setLnglat(e.lngLat)
.setHTML(html);
this.scene.addPopup(this.popup);
});
popupLayer.on(popup.closeTriggerEvent as string, (e) => {
if (this.popup) {
this.popup.remove();
}
});
}
private setLayerAttribute(
layer: ILayer,
type: 'color' | 'size' | 'shape' | 'filter',
attr: AttributeType | undefined,
) {
if (!attr) {
return;
}
if (isObject(attr)) {
// @ts-ignore
layer[type](attr.field, attr.values);
} else {
// @ts-ignore
layer[type](attr);
}
}
}

8
packages/district/src/layer/city.ts → packages/boundary/src/layer/city.ts
View File

@ -1,11 +1,3 @@
import {
ILayer,
LineLayer,
PointLayer,
PolygonLayer,
Scene,
StyleAttrField,
} from '@antv/l7';
// tslint:disable-next-line: no-submodule-imports
import merge from 'lodash/merge';

192
packages/district/src/layer/country.ts → packages/boundary/src/layer/country.ts
View File

@ -1,45 +1,50 @@
import {
ILayer,
LineLayer,
PointLayer,
PolygonLayer,
Scene,
StyleAttrField,
} from '@antv/l7';
import { DataConfig } from '../config';
import { AttributeType, LineLayer, PointLayer, Scene } from '@antv/l7';
import { getDataConfig } from '../index';
import BaseLayer from './baseLayer';
import { IDistrictLayerOption } from './interface';
export default class CountryLayer extends BaseLayer {
constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
super(scene, option);
const { depth } = this.options;
this.loadData().then(([fillData, fillLabel]) => {
this.addFillLayer(fillData);
// const labeldata = fillData.features.map((feature: any) => {
// return {
// ...feature.properties,
// center: [feature.properties.x, feature.properties.y],
// };
// });
if (fillLabel && this.options.label?.enable) {
this.addLabelLayer(
fillLabel.filter((v: any) => {
return v.name !== '澳门';
}),
);
this.addMCLabel();
const { depth, showBorder } = this.options;
this.addProvinceFill();
this.addProvinceLabel();
const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
depth
];
if (showBorder) {
this.addProvinceLine(countryConfig.provinceLine);
if (depth === 2 * 1) {
this.addCityBorder(countryConfig.fill);
}
if (depth === 3 * 1) {
this.addCountyBorder(countryConfig.fill);
}
});
const countryConfig = DataConfig.country.CHN[depth];
this.addProvinceLine(countryConfig.provinceLine);
if (depth === 2 * 1) {
this.addCityBorder(countryConfig.cityLine);
}
if (depth === 3 * 1) {
this.addCountyBorder(countryConfig.countryLine);
}
protected async addProvinceFill() {
const { depth } = this.options;
const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
depth
];
const fillData = await this.fetchData(countryConfig.fill);
this.addFillLayer(fillData);
}
protected async addProvinceLabel() {
const { depth } = this.options;
const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
depth
];
const fillLabel = countryConfig.label
? await this.fetchData(countryConfig.label)
: null;
if (fillLabel && this.options.label?.enable) {
this.addLabelLayer(
fillLabel.filter((v: any) => {
return v.name !== '澳门';
}),
);
this.addMCLabel();
}
}
// 国界,省界
@ -47,12 +52,23 @@ export default class CountryLayer extends BaseLayer {
const lineData = await this.fetchData(cfg);
const border1 = lineData.features.filter((feature: any) => {
const type = feature.properties.type;
return type === '1' || type === '4';
return type === '1';
});
// 香港 澳门
const border2 = lineData.features.filter((feature: any) => {
const type = feature.properties.type;
return type === '4';
});
const borderFc = {
type: 'FeatureCollection',
features: border1,
};
const borderFc2 = {
type: 'FeatureCollection',
features: border2,
};
const nationalBorder = lineData.features.filter((feature: any) => {
const type = feature.properties.type;
return type !== '1' && type !== '4';
@ -61,33 +77,35 @@ export default class CountryLayer extends BaseLayer {
type: 'FeatureCollection',
features: nationalBorder,
};
this.addNationBorder(nationalFc, borderFc);
this.addNationBorder(nationalFc, borderFc, borderFc2);
}
// 国界,省界
protected addFillLine(lineData: any) {
const border1 = lineData.features.filter((feature: any) => {
const type = feature.properties.type;
return type === '1' || type === '4';
});
const borderFc = {
type: 'FeatureCollection',
features: border1,
};
const nationalBorder = lineData.features.filter((feature: any) => {
const type = feature.properties.type;
return type !== '1' && type !== '4';
});
const nationalFc = {
type: 'FeatureCollection',
features: nationalBorder,
};
this.addNationBorder(nationalFc, borderFc);
}
// protected addFillLine(lineData: any) {
// const border1 = lineData.features.filter((feature: any) => {
// const type = feature.properties.type;
// return type === '1' || type === '4';
// });
// const borderFc = {
// type: 'FeatureCollection',
// features: border1,
// };
// const nationalBorder = lineData.features.filter((feature: any) => {
// const type = feature.properties.type;
// return type !== '1' && type !== '4';
// });
// const nationalFc = {
// type: 'FeatureCollection',
// features: nationalBorder,
// };
// this.addNationBorder(nationalFc, borderFc);
// }
private async loadData() {
const { depth } = this.options;
const countryConfig = DataConfig.country.CHN[depth];
const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
depth
];
const fillData = await this.fetchData(countryConfig.fill);
const fillLabel = countryConfig.label
? await this.fetchData(countryConfig.label)
@ -95,7 +113,11 @@ export default class CountryLayer extends BaseLayer {
return [fillData, fillLabel];
}
// 省级行政区划
private async addNationBorder(boundaries: any, boundaries2: any) {
private async addNationBorder(
boundaries: any,
boundaries2: any,
boundaries3: any,
) {
const {
nationalStroke,
provinceStroke,
@ -105,13 +127,16 @@ export default class CountryLayer extends BaseLayer {
chinaNationalWidth,
coastlineStroke,
coastlineWidth,
showBorder,
stroke,
strokeWidth,
visible,
zIndex,
} = this.options;
// 添加国界线
const lineLayer = new LineLayer({
zIndex: zIndex + 1,
zIndex: zIndex + 0.1,
visible: visible && showBorder,
})
.source(boundaries)
.size('type', (v: string) => {
@ -128,38 +153,55 @@ export default class CountryLayer extends BaseLayer {
.shape('line')
.color('type', (v: string) => {
if (v === '3') {
return provinceStroke;
return provinceStroke; // 省界
} else if (v === '2') {
return coastlineStroke;
return coastlineStroke; // 海岸线
} else if (v === '0') {
return chinaNationalStroke;
return chinaNationalStroke; // 中国国界线
} else {
return '#fff';
}
});
// 添加未定国界
const lineLayer2 = new LineLayer({
zIndex: zIndex + 1,
zIndex: zIndex + 0.1,
visible: visible && showBorder,
})
.source(boundaries2)
.size(nationalWidth)
.size(chinaNationalWidth)
.shape('line')
.color('gray')
.color(chinaNationalStroke)
.style({
lineType: 'dash',
dashArray: [2, 2],
});
// 添加澳门香港界限
const lineLayer3 = new LineLayer({
zIndex: zIndex + 0.1,
visible: visible && showBorder,
})
.source(boundaries3)
.size(provinceStrokeWidth)
.shape('line')
.color(provinceStroke)
.style({
lineType: 'dash',
dashArray: [4, 2, 2, 2],
});
this.scene.addLayer(lineLayer);
this.scene.addLayer(lineLayer2);
this.layers.push(lineLayer, lineLayer2);
this.scene.addLayer(lineLayer3);
this.layers.push(lineLayer, lineLayer2, lineLayer3);
}
// 市边界
private async addCityBorder(cfg: any) {
const border1 = await this.fetchData(cfg);
const { cityStroke, cityStrokeWidth } = this.options;
const { cityStroke, cityStrokeWidth, visible } = this.options;
const cityline = new LineLayer({
zIndex: 2,
visible,
})
.source(border1)
.color(cityStroke)
@ -174,9 +216,10 @@ export default class CountryLayer extends BaseLayer {
// 县级边界
private async addCountyBorder(cfg: any) {
const border1 = await this.fetchData(cfg);
const { countyStrokeWidth, countyStroke } = this.options;
const { countyStrokeWidth, countyStroke, visible } = this.options;
const cityline = new LineLayer({
zIndex: 2,
visible,
})
.source(border1)
.color(countyStroke)
@ -195,12 +238,12 @@ export default class CountryLayer extends BaseLayer {
center: [113.537747, 22.187009],
},
];
const labelLayer1 = this.addText(data, { maxZoom: 3 }, [-45, -10]);
const labelLayer1 = this.addText(data, { maxZoom: 2.9 }, [-45, -10]);
const labelLayer2 = this.addText(data, { minZoom: 3, maxZoom: 4 }, [
-35,
-10,
]);
const labelLayer = this.addText(data, { minZoom: 4 }, [0, 0]);
const labelLayer = this.addText(data, { minZoom: 4.1 }, [0, 0]);
this.scene.addLayer(labelLayer);
this.scene.addLayer(labelLayer1);
this.scene.addLayer(labelLayer2);
@ -208,9 +251,10 @@ export default class CountryLayer extends BaseLayer {
}
private addText(labelData: any, option: any, offset: [number, number]) {
const { label, zIndex } = this.options;
const { label, zIndex, visible } = this.options;
const labelLayer = new PointLayer({
zIndex: zIndex + 2,
zIndex: zIndex + 0.4,
visible,
...option,
})
.source(labelData, {
@ -219,9 +263,9 @@ export default class CountryLayer extends BaseLayer {
coordinates: 'center',
},
})
.color(label.color as StyleAttrField)
.shape(label.field as StyleAttrField, 'text')
.size(10)
.color(label.color as AttributeType)
.shape('name', 'text')
.size(label.size as AttributeType)
.style({
opacity: label.opacity,
stroke: label.stroke,

0
packages/district/src/layer/county.ts → packages/boundary/src/layer/county.ts
View File

203
packages/boundary/src/layer/drillDown.ts Normal file
View File

@ -0,0 +1,203 @@
import { Scene } from '@antv/l7';
// tslint:disable-next-line: no-submodule-imports
import mergeWith from 'lodash/mergeWith';
import CityLayer from './city';
import CountryLayer from './country';
import { adcodeType, IDrillDownOption } from './interface';
import ProvinceLayer from './province';
function mergeCustomizer(objValue: any, srcValue: any) {
if (Array.isArray(srcValue)) {
return srcValue;
}
}
export default class DrillDownLayer {
private options: Partial<IDrillDownOption>;
private cityLayer: ProvinceLayer;
private countyLayer: CityLayer;
private provinceLayer: CountryLayer;
private scene: Scene;
private drillState: 0 | 1 | 2 = 0;
private layers: any = [];
constructor(scene: Scene, option: Partial<IDrillDownOption>) {
this.options = mergeWith(this.getDefaultOption(), option, mergeCustomizer);
this.scene = scene;
this.provinceLayer = new CountryLayer(
scene,
this.getLayerOption('province'),
);
this.cityLayer = new ProvinceLayer(scene, this.getLayerOption('city'));
this.countyLayer = new CityLayer(scene, this.getLayerOption('county'));
this.scene.setMapStatus({ doubleClickZoom: false });
if (!this.options.customTrigger) {
this.provinceLayer.on('loaded', () => {
this.addCountryEvent();
this.layers.push(this.provinceLayer);
});
this.cityLayer.on('loaded', () => {
this.addProvinceEvent();
this.layers.push(this.cityLayer);
});
this.countyLayer.on('loaded', () => {
this.addCityEvent();
this.layers.push(this.cityLayer);
});
}
}
public getDefaultOption() {
return {
drillDepth: 2,
customTrigger: false,
drillDownTriggerEvent: 'click',
drillUpTriggerEvent: 'undblclick',
provinceData: [],
cityData: [],
countyData: [],
city: {
adcode: [],
},
county: {
adcode: [],
},
};
}
public addCountryEvent() {
const { drillDownTriggerEvent } = this.options;
this.provinceLayer.fillLayer.on(
drillDownTriggerEvent as string,
(e: any) => {
this.provinceLayer.hide();
this.drillDown(e.feature.properties.adcode);
},
);
}
public addProvinceEvent() {
const { drillDownTriggerEvent, drillUpTriggerEvent } = this.options;
this.cityLayer.fillLayer.on(drillUpTriggerEvent as string, () => {
this.drillUp();
});
this.cityLayer.fillLayer.on(drillDownTriggerEvent as string, (e: any) => {
this.drillDown(e.feature.properties.adcode);
});
}
public addCityEvent() {
const { drillDownTriggerEvent, drillUpTriggerEvent } = this.options;
this.countyLayer.fillLayer.on(drillUpTriggerEvent as string, () => {
this.drillUp();
});
}
public show() {
this.layers.forEach((layer: any) => layer.show());
}
public hide() {
this.layers.forEach((layer: any) => layer.hide());
}
public destroy() {
this.layers.forEach((layer: any) => layer.destroy());
}
public showProvinceView(
adcode: adcodeType,
newData: Array<{ [key: string]: any }> = [],
joinByField?: [string, string],
) {
this.cityLayer.show();
this.cityLayer.updateDistrict(adcode, newData, joinByField);
this.cityLayer.fillLayer.fitBounds();
this.countyLayer.hide();
this.drillState = 1;
}
public showCityView(
code: adcodeType,
newData: Array<{ [key: string]: any }> = [],
joinByField?: [string, string],
) {
this.countyLayer.show();
let adcode = `${code}`;
if (adcode.substr(2, 2) === '00') {
adcode = adcode.substr(0, 2) + '0100';
}
// 更新县级行政区划
this.countyLayer.updateDistrict(adcode, newData, joinByField);
this.countyLayer.fillLayer.fitBounds();
this.cityLayer.hide();
this.drillState = 2;
}
/**
* 向上
*/
public drillUp() {
switch (this.drillState) {
case 2:
this.cityLayer.show();
this.cityLayer.fillLayer.fitBounds();
this.countyLayer.hide();
this.drillState = 1;
break;
case 1:
this.provinceLayer.show();
this.provinceLayer.fillLayer.fitBounds();
this.cityLayer.hide();
this.drillState = 0;
break;
}
}
public drillDown(
adcode: adcodeType,
newData: Array<{ [key: string]: any }> = [],
joinByField?: [string, string],
) {
const { drillDepth } = this.options;
if (this.drillState === drillDepth) {
return;
}
switch (this.drillState) {
case 0:
this.showProvinceView(adcode, newData, joinByField);
break;
case 1:
this.showCityView(adcode, newData, joinByField);
break;
}
}
public updateData(
layer: 'province' | 'city' | 'county',
newData: Array<{ [key: string]: any }>,
joinByField?: [string, string],
) {
switch (layer) {
case 'province':
this.provinceLayer.updateData(newData, joinByField);
break;
case 'city':
this.cityLayer.updateData(newData, joinByField);
break;
case 'county':
this.countyLayer.updateData(newData, joinByField);
}
}
private getLayerOption(type: 'province' | 'city' | 'county') {
const { joinBy, label, bubble, fill, popup, geoDataLevel } = this.options;
const datatype = (type + 'Data') as
| 'provinceData'
| 'cityData'
| 'countyData';
return {
data: this.options[datatype],
joinBy,
label,
bubble,
fill,
popup,
geoDataLevel,
...this.options[type],
};
}
}

153
packages/boundary/src/layer/interface.ts Normal file
View File

@ -0,0 +1,153 @@
import {
IPopupOption,
ScaleTypeName,
StyleAttributeField,
StyleAttributeOption,
} from '@antv/l7';
export type anchorType =
| 'right'
| 'top-right'
| 'left'
| 'bottom-right'
| 'left'
| 'top-left'
| 'bottom-left'
| 'bottom'
| 'bottom-right'
| 'bottom-left'
| 'top'
| 'top-right'
| 'top-left'
| 'center';
export interface ILabelOption {
enable: boolean;
color: AttributeType;
field: string;
size: AttributeType;
stroke: string;
strokeWidth: number;
textAllowOverlap: boolean;
padding: [number, number];
strokeOpacity: number;
fontWeight: number;
spacing: number;
textAnchor: anchorType;
textOffset: [number, number];
opacity: number;
filter: AttributeType;
}
export interface IAttributeOption {
field: StyleAttributeField;
values: StyleAttributeOption;
}
export type AttributeType = IAttributeOption | string | number;
export interface IPopupOptions {
enable: boolean;
openTriggerEvent: TriggeEventType;
closeTriggerEvent: TriggeEventType;
triggerLayer: 'fill' | 'bubble';
option?: Partial<IPopupOption>;
Html: (properties: any) => string;
}
export interface IFillOptions {
scale: ScaleTypeName | null;
// field: string | null;
color: AttributeType;
values: StyleAttributeOption;
style: any;
activeColor: string | boolean;
filter: AttributeType;
}
export type TriggeEventType =
| 'mousemove'
| 'click'
| 'mousedown'
| 'mouseenter'
| 'mouseout'
| 'dblclick'
| 'contextmenu'
| 'mouseup';
export type DrillUpTriggeEventType =
| 'mousemove'
| 'unclick'
| 'unmousedown'
| 'undblclick'
| 'uncontextmenu'
| 'unmouseup';
export interface IBubbleOption {
enable: boolean;
shape: AttributeType;
size: AttributeType;
color: AttributeType;
filter: AttributeType;
scale: {
field: string;
type: ScaleTypeName;
};
style: {
opacity: number;
stroke: string;
strokeWidth: number;
};
}
export type adcodeType = string[] | string | number | number[];
export interface IDistrictLayerOption {
zIndex: number;
visible: boolean;
geoDataLevel: 1 | 2;
data?: Array<{ [key: string]: any }>;
joinBy: [string, string];
adcode: adcodeType;
simplifyTolerance: number | boolean;
depth: 0 | 1 | 2 | 3;
label: Partial<ILabelOption>;
bubble: Partial<IBubbleOption>;
fill: Partial<IFillOptions>;
showBorder: boolean;
autoFit: boolean;
stroke: string;
strokeVisible: boolean;
strokeWidth: number;
provinceStroke: string;
provinceStrokeVisible: boolean;
cityStroke: string;
provinceStrokeWidth: number;
cityStrokeWidth: number;
countyStroke: string;
countyStrokeWidth: number;
coastlineStroke: string;
coastlineWidth: number;
nationalStroke: string;
nationalWidth: number;
chinaNationalStroke: string;
chinaNationalWidth: number;
popup: Partial<IPopupOptions>;
}
interface IDrawOption {
joinBy: [string, string];
label: Partial<ILabelOption>;
bubble: Partial<IBubbleOption>;
fill: Partial<IFillOptions>;
}
export interface IDrillDownOption {
drillDepth: 0 | 1 | 2;
geoDataLevel: 1 | 2;
customTrigger: boolean;
drillDownTriggerEvent: TriggeEventType;
drillUpTriggerEvent: TriggeEventType & DrillUpTriggeEventType;
provinceData?: Array<{ [key: string]: any }>;
cityData?: Array<{ [key: string]: any }>;
countyData?: Array<{ [key: string]: any }>;
joinBy: [string, string];
label: Partial<ILabelOption>;
bubble: Partial<IBubbleOption>;
fill: Partial<IFillOptions>;
popup: Partial<IPopupOptions>;
province: Partial<IDrawOption>;
city: Partial<IDrawOption>;
county: Partial<IDrawOption>;
}

54
packages/district/src/layer/province.ts → packages/boundary/src/layer/province.ts
View File

@ -8,7 +8,7 @@ import {
} from '@antv/l7';
// tslint:disable-next-line: no-submodule-imports
import merge from 'lodash/merge';
import { DataConfig } from '../config';
import { getDataConfig } from '../';
import BaseLayer from './baseLayer';
import { adcodeType, IDistrictLayerOption } from './interface';
@ -22,7 +22,7 @@ export default class ProvinceLayer extends BaseLayer {
constructor(scene: Scene, option: Partial<IProvinceLayerOption> = {}) {
super(scene, option);
this.addProvinceFillLayer();
this.addProvinceLineLayer();
// this.addProvinceLineLayer();
}
// 通过adcode 更新
public updateDistrict(
@ -34,14 +34,29 @@ export default class ProvinceLayer extends BaseLayer {
this.hide();
return;
}
const { label, showBorder } = this.options;
this.setOption({ adcode });
const fillData = this.filterData(this.fillRawData, adcode);
const lineData = this.filterData(this.lineRawData, adcode);
const labelData = this.filterLabelData(this.labelRawData, adcode);
if (this.options.bubble && this.options.bubble?.enable !== false) {
const bubbleData = fillData.features.map((feature: any) => {
return {
...feature.properties,
center: [feature.properties.x, feature.properties.y],
};
});
this.bubbleLayer.setData(bubbleData);
}
this.fillData = fillData;
this.updateData(newData, joinByField);
this.lineLayer.setData(lineData);
this.labelLayer.setData(labelData);
if (showBorder) {
this.lineLayer.setData(lineData);
}
if (label.enable) {
this.labelLayer.setData(labelData);
}
this.show();
}
@ -54,17 +69,6 @@ export default class ProvinceLayer extends BaseLayer {
field: 'NAME_CHN',
textAllowOverlap: false,
},
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603',
],
},
popup: {
enable: true,
Html: (props: any) => {
@ -98,8 +102,11 @@ export default class ProvinceLayer extends BaseLayer {
return features;
}
private async addProvinceFillLayer() {
const { depth, adcode } = this.options as IProvinceLayerOption;
const countryConfig = DataConfig.country.CHN[depth];
const { depth, adcode, label, showBorder } = this
.options as IProvinceLayerOption;
const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
depth
];
const fillData = await this.fetchData(countryConfig.fill);
this.labelRawData = fillData.features.map((feature: any) => {
@ -109,15 +116,24 @@ export default class ProvinceLayer extends BaseLayer {
};
});
const data = this.filterData(fillData, adcode);
this.fillData = data;
const labelData = this.filterLabelData(this.labelRawData, adcode);
this.fillRawData = fillData;
this.addFillLayer(data);
this.addLabelLayer(labelData);
if (label.enable) {
this.addLabelLayer(labelData);
}
this.lineRawData = fillData;
if (showBorder) {
this.addFillLine(data);
}
}
private async addProvinceLineLayer() {
const { depth, adcode } = this.options as IProvinceLayerOption;
const countryConfig = DataConfig.country.CHN[depth];
const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
depth
];
const fillData = await this.fetchData(countryConfig.line);
const data = this.filterData(fillData, adcode);
this.lineRawData = fillData;

25
packages/district/src/layer/world.ts → packages/boundary/src/layer/world.ts
View File

@ -6,7 +6,7 @@ import {
Scene,
StyleAttrField,
} from '@antv/l7';
import { DataConfig } from '../config';
import { getDataConfig } from '../';
import BaseLayer from './baseLayer';
import { IDistrictLayerOption } from './interface';
export default class WorldLayer extends BaseLayer {
@ -14,9 +14,11 @@ export default class WorldLayer extends BaseLayer {
super(scene, option);
this.loadData().then(([fillData, lineData, fillLabel]) => {
this.addFillLayer(fillData);
this.addFillLine(lineData);
if (this.options.showBorder) {
this.addFillLine(lineData);
}
if (this.options.label?.enable) {
this.addLabelLayer(fillLabel, 'geojson');
this.addLabelLayer(fillLabel, 'json');
}
});
}
@ -52,11 +54,17 @@ export default class WorldLayer extends BaseLayer {
}
private async loadData() {
const countryConfig = DataConfig.world;
const countryConfig = getDataConfig(this.options.geoDataLevel).world;
const fillData = await this.fetchData(countryConfig.fill);
const lineData = await this.fetchData(countryConfig.line);
const fillLabel = await this.fetchData(countryConfig.label);
// const fillLabel = await this.fetchData(countryConfig.label);
const fillLabel = fillData.features.map((feature: any) => {
return {
...feature.properties,
center: [feature.properties.x, feature.properties.y],
};
});
return [fillData, lineData, fillLabel];
}
private addNationBorder(boundaries: any, boundaries2: any) {
@ -67,11 +75,13 @@ export default class WorldLayer extends BaseLayer {
chinaNationalStroke,
chinaNationalWidth,
coastlineWidth,
visible,
zIndex,
} = this.options;
// 添加国界线
const lineLayer = new LineLayer({
zIndex: zIndex + 1,
zIndex: zIndex + 0.1,
visible,
})
.source(boundaries)
// .size(0.6)
@ -99,7 +109,8 @@ export default class WorldLayer extends BaseLayer {
});
// 添加未定国界
const lineLayer2 = new LineLayer({
zIndex: zIndex + 1,
zIndex: zIndex + 0.1,
visible,
})
.source(boundaries2)
.size('type', (v: string) => {

0
packages/district/tsconfig.build.json → packages/boundary/tsconfig.build.json
View File

11
packages/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.2.5",
"version": "2.2.28",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -19,19 +19,20 @@
"build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"lint:ts": "run-p -c lint:ts-*",
"test": "jest"
"test": "jest",
"sync": "tnpm sync"
},
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "2.2.5",
"@antv/l7-utils": "2.2.5",
"@antv/l7-core": "2.2.28",
"@antv/l7-utils": "2.2.28",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",
"load-styles": "^2.0.0"
},
"gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
"publishConfig": {
"access": "public"
}

4
packages/component/src/markerlayer.ts
View File

@ -112,8 +112,12 @@ export default class MarkerLayer extends EventEmitter {
this.markers.forEach((marker: IMarker) => {
marker.remove();
});
this.clusterMarkers.forEach((clusterMarker: IMarker) => {
clusterMarker.remove();
});
this.mapsService.off('camerachange', this.update);
this.markers = [];
this.clusterMarkers = [];
}
public destroy() {

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

@ -4,6 +4,7 @@ import {
IPoint,
IPopup,
IPopupOption,
ISceneService,
TYPES,
} from '@antv/l7-core';
import {
@ -21,6 +22,7 @@ import { Container } from 'inversify';
export default class Popup extends EventEmitter implements IPopup {
private popupOption: IPopupOption;
private mapsService: IMapService<unknown>;
private sceneSerive: ISceneService;
private lngLat: ILngLat;
private content: HTMLElement;
private closeButton: HTMLElement;
@ -40,6 +42,7 @@ export default class Popup extends EventEmitter implements IPopup {
public addTo(scene: Container) {
this.mapsService = scene.get<IMapService>(TYPES.IMapService);
this.sceneSerive = scene.get<ISceneService>(TYPES.ISceneService);
this.mapsService.on('camerachange', this.update);
this.scene = scene;
this.update();
@ -177,6 +180,7 @@ export default class Popup extends EventEmitter implements IPopup {
offsets: [0, 0],
anchor: anchorType.BOTTOM,
className: '',
stopPropagation: true,
};
}
@ -193,12 +197,12 @@ export default class Popup extends EventEmitter implements IPopup {
if (!this.mapsService || !hasPosition || !this.content) {
return;
}
const markerContainer = this.mapsService.getMarkerContainer();
if (!this.container && markerContainer) {
const popupContainer = this.sceneSerive.getSceneContainer();
if (!this.container && popupContainer) {
this.container = this.creatDom(
'div',
'l7-popup',
markerContainer.parentNode as HTMLElement,
popupContainer as HTMLElement,
);
this.tip = this.creatDom('div', 'l7-popup-tip', this.container);
@ -208,12 +212,12 @@ export default class Popup extends EventEmitter implements IPopup {
.split(' ')
.forEach((name) => this.container.classList.add(name));
}
this.container.addEventListener('mousedown', (e) => {
e.stopPropagation();
});
this.container.addEventListener('click', (e) => {
e.stopPropagation();
});
// ['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => {
// this.container.addEventListener(type, (e) => {
// e.stopPropagation();
// });
// });
}
if (maxWidth && this.container.style.maxWidth !== maxWidth) {
this.container.style.maxWidth = maxWidth;

9
packages/core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.2.5",
"version": "2.2.28",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -17,13 +17,14 @@
"build": "run-p build:*",
"build:cjs": "cross-env BABEL_ENV=cjs NODE_ENV=production babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"build:esm": "cross-env BABEL_ENV=esm NODE_ENV=production babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"watch": "cross-env BABEL_ENV=cjs NODE_ENV=production babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
"watch": "cross-env BABEL_ENV=cjs NODE_ENV=production babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
"sync": "tnpm sync"
},
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "2.2.5",
"@antv/l7-utils": "2.2.28",
"@babel/runtime": "^7.7.7",
"@mapbox/tiny-sdf": "^1.1.1",
"ajv": "^6.10.2",
@ -46,7 +47,7 @@
"@types/lodash": "^4.14.138",
"@types/viewport-mercator-project": "^6.1.0"
},
"gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
"publishConfig": {
"access": "public"
}

1
packages/core/src/services/asset/IIconService.ts
View File

@ -19,6 +19,7 @@ export interface IICONMap {
export interface IIconService {
canvasHeight: number;
on(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
off(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
init(): void;
addImage(id: string, image: IImage): void;
hasImage(id: string): boolean;

1
packages/core/src/services/component/IPopupService.ts
View File

@ -9,6 +9,7 @@ export interface IPopupOption {
anchor: anchorType[any];
className: string;
offsets: number[];
stopPropagation: boolean;
}
export interface IPopup {
addTo(scene: Container): this;

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

@ -33,9 +33,12 @@ export default class InteractionService extends EventEmitter
private clickTimer: number;
private $containter: HTMLElement;
public init() {
// 注册事件在地图底图上
this.addEventListenerOnMap();
this.$containter = this.mapService.getMapContainer() as HTMLElement;
}
public destroy() {
@ -147,7 +150,10 @@ export default class InteractionService extends EventEmitter
const lngLat = this.mapService.containerToLngLat([clientX, clientY]);
return { x: clientX, y: clientY, lngLat, type };
}
private onHover = ({ x, y, type }: MouseEvent) => {
private onHover = (event: MouseEvent) => {
let { x, y } = event;
const type = event.type;
const $containter = this.mapService.getMapContainer();
if ($containter) {
const { top, left } = $containter.getBoundingClientRect();

32
packages/core/src/services/interaction/PickingService.ts
View File

@ -46,8 +46,14 @@ export default class PickingService implements IPickingService {
createTexture2D,
createFramebuffer,
getViewportSize,
getContainer,
} = this.rendererService;
const { width, height } = getViewportSize();
let {
width,
height,
} = (getContainer() as HTMLElement).getBoundingClientRect();
width *= window.devicePixelRatio;
height *= window.devicePixelRatio;
this.pickBufferScale =
this.configService.getSceneConfig(id).pickBufferScale || 1;
// 创建 picking framebuffer，后续实时 resize
@ -76,9 +82,18 @@ export default class PickingService implements IPickingService {
this.alreadyInPicking = false;
}
private async pickingLayers(target: IInteractionTarget) {
const { getViewportSize, useFramebuffer, clear } = this.rendererService;
const { width, height } = getViewportSize();
const {
getViewportSize,
useFramebuffer,
clear,
getContainer,
} = this.rendererService;
let {
width,
height,
} = (getContainer() as HTMLElement).getBoundingClientRect();
width *= window.devicePixelRatio;
height *= window.devicePixelRatio;
if (this.width !== width || this.height !== height) {
this.pickingFBO.resize({
width: Math.round(width / this.pickBufferScale),
@ -113,8 +128,13 @@ export default class PickingService implements IPickingService {
{ x, y, lngLat, type }: IInteractionTarget,
) => {
let isPicked = false;
const { getViewportSize, readPixels } = this.rendererService;
const { width, height } = getViewportSize();
const { getViewportSize, readPixels, getContainer } = this.rendererService;
let {
width,
height,
} = (getContainer() as HTMLElement).getBoundingClientRect();
width *= window.devicePixelRatio;
height *= window.devicePixelRatio;
const { enableHighlight, enableSelect } = layer.getLayerConfig();
const xInDevicePixel = x * window.devicePixelRatio;

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