mirror of https://gitee.com/antv-l7/antv-l7
yanyu510
GitHub
commit
bd31ae7f88
14
.eslintrc
14
.eslintrc
|
|
@ -18,15 +18,6 @@
|
||||||
"html"
|
"html"
|
||||||
],
|
],
|
||||||
"rules": {
|
"rules": {
|
||||||
"no-console": [
|
|
||||||
"warn",
|
|
||||||
{
|
|
||||||
"allow": [
|
|
||||||
"warn",
|
|
||||||
"error"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"no-bitwise": [
|
"no-bitwise": [
|
||||||
0
|
0
|
||||||
],
|
],
|
||||||
|
|
@ -40,6 +31,9 @@
|
||||||
"jsdoc/require-param": 0,
|
"jsdoc/require-param": 0,
|
||||||
"linebreak-style": [
|
"linebreak-style": [
|
||||||
0
|
0
|
||||||
]
|
],
|
||||||
|
"indent": ["error", 2, {
|
||||||
|
"ignoredNodes": ["TemplateLiteral"]
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
@ -80,4 +80,4 @@ packages/l7/package_bak.json
|
||||||
|
|
||||||
stories/Test
|
stories/Test
|
||||||
packages/draw/node_modules/@turf
|
packages/draw/node_modules/@turf
|
||||||
packages/district/src/data
|
packages/district/src/data
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,9 @@ module.exports = ({ config }) => {
|
||||||
loader: 'svg-inline-loader'
|
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');
|
config.resolve.extensions.push('.ts', '.tsx', 'css', '.js', '.glsl');
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,8 @@ scene.addMarkerLayer(markerLayer);
|
||||||
- field `string` 聚合统计字段
|
- field `string` 聚合统计字段
|
||||||
- method `sum| max| min| mean`
|
- method `sum| max| min| mean`
|
||||||
- element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
|
- element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
|
||||||
参数：feature
|
|
||||||
|
回调函数包含以下参数
|
||||||
point_count 默认 聚合元素个数
|
point_count 默认 聚合元素个数
|
||||||
clusterData `Array` 聚合节点的原始数据
|
clusterData `Array` 聚合节点的原始数据
|
||||||
point_sum 聚合求和 根据 field 和 method 计算
|
point_sum 聚合求和 根据 field 和 method 计算
|
||||||
|
|
|
||||||
|
|
@ -41,9 +41,7 @@ scene.addMarkerLayer(markerLayer);
|
||||||
- field `string` 聚合统计字段
|
- field `string` 聚合统计字段
|
||||||
- method `sum| max| min| mean`
|
- method `sum| max| min| mean`
|
||||||
- element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
|
- element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
|
||||||
|
回调函数包含以下参数
|
||||||
参数：feature
|
|
||||||
|
|
||||||
- point_count 默认 聚合元素个数
|
- point_count 默认 聚合元素个数
|
||||||
- clusterData `Array` 聚合节点的原始数据
|
- clusterData `Array` 聚合节点的原始数据
|
||||||
- point_sum 聚合求和 根据 field 和 method 计算
|
- point_sum 聚合求和 根据 field 和 method 计算
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
移除并销毁图层
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
移除并销毁图层
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
移除并销毁图层
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
移除并销毁图层
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
移除并销毁图层
|
||||||
|
|
@ -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)
|
||||||
|
|
@ -27,7 +27,21 @@ layer.shape('name','text')
|
||||||
### style
|
### style
|
||||||
|
|
||||||
- opacity `number`
|
- 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 [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||||
- stroke: `string`; 描边颜色
|
- stroke: `string`; 描边颜色
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,30 @@ title: Layer Component
|
||||||
order: 2
|
order: 2
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Layer 类型
|
||||||
|
|
||||||
|
React 各个组件名称和 L7 名称保持一致
|
||||||
|
|
||||||
|
- PointLayer
|
||||||
|
- PolygonLayer
|
||||||
|
- LineLayer
|
||||||
|
- HeatmapLayer
|
||||||
|
- RasterLayer
|
||||||
|
- ImageLayer
|
||||||
|
- CityBuildingLayer
|
||||||
|
|
||||||
|
### 使用方式
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { PointLayer } '@antv/l7-react';
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
## Layer Props
|
## Layer Props
|
||||||
|
|
||||||
| prop name | Type | Default | Description |
|
| prop name | Type | Default | Description |
|
||||||
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
|
| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
|
||||||
| option | `layer option` | | layer 配置项 |
|
| options | `layer options` | | layer 配置项 |
|
||||||
| source | `sourceOption` | | 数据源配置项 |
|
| source | `sourceOption` | | 数据源配置项 |
|
||||||
| color | `attributeOption` | | 颜色通道 |
|
| color | `attributeOption` | | 颜色通道 |
|
||||||
| shape | `attributeOption` | | 图层形状属性 |
|
| shape | `attributeOption` | | 图层形状属性 |
|
||||||
|
|
@ -17,17 +36,21 @@ order: 2
|
||||||
| filter | `Function` | | 图层数据过滤方法 |
|
| filter | `Function` | | 图层数据过滤方法 |
|
||||||
| select | `boolean` `interaction option` | | 图层选中高亮 |
|
| select | `boolean` `interaction option` | | 图层选中高亮 |
|
||||||
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
|
| active | `boolean` `interaction option` | `false` | 图层 hover 高亮 |
|
||||||
|
| animate | `animate Option` | `null` | 图层动画配置 |
|
||||||
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
|
| onLayerLoaded | `Function` | | 图层添加完成后回调，用于获取 layer 对象 |
|
||||||
|
|
||||||
### layer option
|
### layer options
|
||||||
|
|
||||||
| prop name | Type | Default | Description |
|
| prop name | Type | Default | Description |
|
||||||
| --------- | --------- | ----------------------- | ---------------------------------------- |
|
| ------------- | --------- | ----------------------- | -------------------------------------------------------------------------------------------------------- |
|
||||||
| name | `string` | | 图层名字，可根据名称获取 layer |
|
| name | `string` | | 图层名字，可根据名称获取 layer |
|
||||||
| visible | `boolean` | `true` | 图层是否可见 |
|
| visible | `boolean` | `true` | 图层是否可见 |
|
||||||
| zIndex | `number` | 0 | 图层绘制顺序， |
|
| zIndex | `number` | 0 | 图层绘制顺序， |
|
||||||
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
|
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
|
||||||
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
|
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
|
||||||
|
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
|
||||||
|
| blend | 'string' | 'normal' | 图层元素混合效果 [详情](../layer/layer/#blend) |
|
||||||
|
| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 |
|
||||||
|
|
||||||
### attribute Option
|
### attribute Option
|
||||||
|
|
||||||
|
|
@ -71,19 +94,25 @@ const scales = {
|
||||||
|
|
||||||
### interaction option
|
### interaction option
|
||||||
|
|
||||||
|
active，select 配置项
|
||||||
|
|
||||||
**option**
|
**option**
|
||||||
|
|
||||||
- color 设置交互的颜色，指滑过或者选中的
|
- color 设置交互的颜色，指滑过或者选中的
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<>
|
||||||
|
```
|
||||||
|
|
||||||
### 获取 layer 对象
|
### 获取 layer 对象
|
||||||
|
|
||||||
#### onLayerLoaded
|
#### onLayerLoaded
|
||||||
|
|
||||||
回调函数获取 layer, scene 对象
|
回调函数获取 layer, scene 对象
|
||||||
|
|
||||||
onLayerLoaded=(layer, scene) =>{
|
```javascript
|
||||||
|
onLayerLoaded = (layer, scene) => {};
|
||||||
}
|
```
|
||||||
|
|
||||||
#### Context API
|
#### Context API
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@ import { PointLayer } '@antv/l7-react';
|
||||||
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
|
| minZoom | `number` | 0 | 设置 layer 最小可见等级，小于则不显示 |
|
||||||
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
|
| maxZoom | `number` | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示 |
|
||||||
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
|
| aotoFit | `boolean` | `false` | 是否缩放到图层范围 |
|
||||||
| blend | 'string' | 'normal' | 图层元素混合效果 [详情]('../layer/layer/#blend') |
|
| blend | 'string' | 'normal' | 图层元素混合效果 [详情](../layer/layer/#blend) |
|
||||||
| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 |
|
| pickingBuffer | 'number' | '0' | 图层拾取缓存机制，如 1px 宽度的线鼠标很难拾取(点击)到, 通过设置该参数可扩大拾取的范围 {number} default 0 |
|
||||||
|
|
||||||
### attribute Option
|
### attribute Option
|
||||||
|
|
|
||||||
|
|
@ -3,15 +3,23 @@ title: Scene
|
||||||
order: 1
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 使用
|
||||||
|
|
||||||
|
在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { MapboxScene, AmapScene } from '@antv/l7-react';
|
||||||
|
```
|
||||||
|
|
||||||
## Scene Props
|
## Scene Props
|
||||||
|
|
||||||
| prop name | Type | Default | Description |
|
| prop name | Type | Default | Description |
|
||||||
| ------------- | ---------- | ---------- | -------------------------------------- |
|
| ------------- | -------------- | ---------- | ----------------------------------------- |
|
||||||
| style | `Object` | `null` | scene css 样式 |
|
| style | `Object` | `null` | scene css 样式 |
|
||||||
| className | `string` | `null` | 样式名称 |
|
| className | `string` | `null` | 样式名称 |
|
||||||
| map | `Object` | `Required` | map option [地图配置项]() |
|
| map | `map option` | `Required` | map option [地图配置项](#map-option) |
|
||||||
| option | `Object` | `void` | scene option 配置项 [详情](#map-props) |
|
| option | `scene option` | `void` | scene option 配置项 [详情](#scene-option) |
|
||||||
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
|
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
|
||||||
|
|
||||||
### 高德地图场景
|
### 高德地图场景
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,13 +13,13 @@ import { MapboxScene, AmapScene } from '@antv/l7-react';
|
||||||
|
|
||||||
## Scene Props
|
## Scene Props
|
||||||
|
|
||||||
| prop name | Type | Default | Description |
|
| prop name | Type | Default | Description |
|
||||||
| ------------- | -------------- | ---------- | -------------------------------------- |
|
| ------------- | -------------- | ---------- | ----------------------------------------- |
|
||||||
| style | `Object` | `null` | scene css 样式 |
|
| style | `Object` | `null` | scene css 样式 |
|
||||||
| className | `string` | `null` | 样式名称 |
|
| className | `string` | `null` | 样式名称 |
|
||||||
| map | `map option` | `Required` | map option [地图配置项]() |
|
| map | `map option` | `Required` | map option [地图配置项](#map-option) |
|
||||||
| option | `scene option` | `void` | scene option 配置项 [详情](#map-props) |
|
| option | `scene option` | `void` | scene option 配置项 [详情](#scene-option) |
|
||||||
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
|
| onSceneLoaded | `Function` | `void` | scene 加载回调函数 |
|
||||||
|
|
||||||
### 高德地图场景
|
### 高德地图场景
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -317,10 +317,13 @@ scene.setPitch(pitch);
|
||||||
|
|
||||||
参数 :
|
参数 :
|
||||||
|
|
||||||
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
- `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]]
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
scene.fitBounds([112, 32, 114, 35]);
|
scene.fitBounds([
|
||||||
|
[112, 32],
|
||||||
|
[114, 35],
|
||||||
|
]);
|
||||||
```
|
```
|
||||||
|
|
||||||
### getContainer
|
### getContainer
|
||||||
|
|
|
||||||
|
|
@ -351,10 +351,13 @@ scene.setPitch(pitch);
|
||||||
|
|
||||||
参数 :
|
参数 :
|
||||||
|
|
||||||
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
- `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]]
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
scene.fitBounds([112, 32, 114, 35]);
|
scene.fitBounds([
|
||||||
|
[112, 32],
|
||||||
|
[114, 35],
|
||||||
|
]);
|
||||||
```
|
```
|
||||||
|
|
||||||
### removeLayer
|
### removeLayer
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
[d离线，无token使用mapbox demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)<br />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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你可以预览，也可以下载到本地
|
不同项目模板在CodeSandbox你可以预览，也可以下载到本地
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
移除并销毁图层
|
||||||
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
移除并销毁图层
|
||||||
|
|
||||||
## 方法
|
|
||||||
|
|
|
||||||
|
|
@ -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'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -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>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -37,15 +37,16 @@ async function initMap() {
|
||||||
textAllowOverlap: false
|
textAllowOverlap: false
|
||||||
},
|
},
|
||||||
fill: {
|
fill: {
|
||||||
field: 'pop',
|
color: { field: 'pop',
|
||||||
values: [
|
values: [
|
||||||
'#feedde',
|
'#feedde',
|
||||||
'#fdd0a2',
|
'#fdd0a2',
|
||||||
'#fdae6b',
|
'#fdae6b',
|
||||||
'#fd8d3c',
|
'#fd8d3c',
|
||||||
'#e6550d',
|
'#e6550d',
|
||||||
'#a63603'
|
'#a63603'
|
||||||
]
|
]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
popup: {
|
popup: {
|
||||||
enable: true,
|
enable: true,
|
||||||
|
|
|
||||||
|
|
@ -21,15 +21,17 @@ scene.on('loaded', () => {
|
||||||
field: 'NAME_CHN'
|
field: 'NAME_CHN'
|
||||||
},
|
},
|
||||||
fill: {
|
fill: {
|
||||||
field: 'NAME_CHN',
|
color: {
|
||||||
values: [
|
field: 'NAME_CHN',
|
||||||
'#feedde',
|
values: [
|
||||||
'#fdd0a2',
|
'#feedde',
|
||||||
'#fdae6b',
|
'#fdd0a2',
|
||||||
'#fd8d3c',
|
'#fdae6b',
|
||||||
'#e6550d',
|
'#fd8d3c',
|
||||||
'#a63603'
|
'#e6550d',
|
||||||
]
|
'#a63603'
|
||||||
|
]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
popup: {
|
popup: {
|
||||||
enable: true,
|
enable: true,
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
@ -4,9 +4,8 @@
|
||||||
"en": "District"
|
"en": "District"
|
||||||
},
|
},
|
||||||
"demos": [
|
"demos": [
|
||||||
|
|
||||||
{
|
{
|
||||||
"filename": "china_map.js",
|
"filename": "china_map_2.js",
|
||||||
"title": "中国地图",
|
"title": "中国地图",
|
||||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*tClNQoAo5isAAAAAAAAAAABkARQnAQ"
|
"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"
|
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*iVwLSpIf_ckAAAAAAAAAAABkARQnAQ"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"filename": "drill_down.js",
|
"filename": "attach_map.js",
|
||||||
"title": "中国地图上钻下取",
|
"title": "中国地图附图",
|
||||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ"
|
"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"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,15 +37,17 @@ async function initMap() {
|
||||||
textAllowOverlap: false
|
textAllowOverlap: false
|
||||||
},
|
},
|
||||||
fill: {
|
fill: {
|
||||||
field: 'pop',
|
color: {
|
||||||
values: [
|
field: 'pop',
|
||||||
'#feedde',
|
values: [
|
||||||
'#fdd0a2',
|
'#feedde',
|
||||||
'#fdae6b',
|
'#fdd0a2',
|
||||||
'#fd8d3c',
|
'#fdae6b',
|
||||||
'#e6550d',
|
'#fd8d3c',
|
||||||
'#a63603'
|
'#e6550d',
|
||||||
]
|
'#a63603'
|
||||||
|
]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
popup: {
|
popup: {
|
||||||
enable: true,
|
enable: true,
|
||||||
|
|
|
||||||
|
|
@ -9,33 +9,35 @@ const scene = new Scene({
|
||||||
style: 'blank',
|
style: 'blank',
|
||||||
zoom: 0,
|
zoom: 0,
|
||||||
minZoom: 0,
|
minZoom: 0,
|
||||||
maxZoom: 10
|
maxZoom: 5
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
scene.on('loaded', () => {
|
scene.on('loaded', () => {
|
||||||
new WorldLayer(scene, {
|
new WorldLayer(scene, {
|
||||||
data: [],
|
data: [],
|
||||||
fill: {
|
fill: {
|
||||||
field: 'NAME_CHN',
|
color: {
|
||||||
values: [
|
field: 'NAME_CHN',
|
||||||
'#feedde',
|
values: [
|
||||||
'#fdd0a2',
|
'#feedde',
|
||||||
'#fdae6b',
|
'#fdd0a2',
|
||||||
'#fd8d3c',
|
'#fdae6b',
|
||||||
'#e6550d',
|
'#fd8d3c',
|
||||||
'#a63603'
|
'#e6550d',
|
||||||
]
|
'#a63603'
|
||||||
|
]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
stroke: '#ccc',
|
stroke: '#ccc',
|
||||||
label: {
|
label: {
|
||||||
enable: true,
|
enable: true,
|
||||||
textAllowOverlap: false,
|
textAllowOverlap: false,
|
||||||
field: 'Short_Name_ZH'
|
field: 'NAME_CHN'
|
||||||
},
|
},
|
||||||
popup: {
|
popup: {
|
||||||
enable: false,
|
enable: false,
|
||||||
Html: props => {
|
Html: props => {
|
||||||
return `<span>${props.Short_Name_ZH}</span>`;
|
return `<span>${props.NAME_CHN}</span>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
---
|
---
|
||||||
title: L7 District
|
title: L7 District
|
||||||
order: 3
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
---
|
---
|
||||||
title: 基础组件
|
title: 填充图
|
||||||
order: 3
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
移除并销毁图层
|
||||||
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
移除并销毁图层
|
||||||
|
|
||||||
|
|
@ -189,21 +189,16 @@ scene.on('loaded', () => {
|
||||||
new CountryLayer(scene, {
|
new CountryLayer(scene, {
|
||||||
data: ProvinceData,
|
data: ProvinceData,
|
||||||
joinBy: [ 'NAME_CHN', 'name' ],
|
joinBy: [ 'NAME_CHN', 'name' ],
|
||||||
// label: {
|
|
||||||
// field: 'NAME_CHN',
|
|
||||||
// textAllowOverlap: true,
|
|
||||||
// },
|
|
||||||
depth: 1,
|
depth: 1,
|
||||||
fill: {
|
fill: {
|
||||||
field: 'value',
|
color: '#ccc'
|
||||||
values: [
|
},
|
||||||
'#feedde',
|
bubble: {
|
||||||
'#fdd0a2',
|
enable: true,
|
||||||
'#fdae6b',
|
size: {
|
||||||
'#fd8d3c',
|
field: 'value',
|
||||||
'#e6550d',
|
values: [ 3, 20 ]
|
||||||
'#a63603'
|
}
|
||||||
]
|
|
||||||
},
|
},
|
||||||
popup: {
|
popup: {
|
||||||
enable: true,
|
enable: true,
|
||||||
|
|
@ -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();
|
||||||
|
|
@ -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>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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();
|
||||||
|
|
@ -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>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: L7 District
|
||||||
|
order: 0
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: 气泡图
|
||||||
|
order: 2
|
||||||
|
---
|
||||||
|
|
@ -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
|
||||||
|
移除并销毁图层
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -17,15 +17,17 @@ scene.on('loaded', () => {
|
||||||
data: [],
|
data: [],
|
||||||
depth: 1,
|
depth: 1,
|
||||||
fill: {
|
fill: {
|
||||||
field: 'NAME_CHN',
|
color: {
|
||||||
values: [
|
field: 'NAME_CHN',
|
||||||
'#feedde',
|
values: [
|
||||||
'#fdd0a2',
|
'#feedde',
|
||||||
'#fdae6b',
|
'#fdd0a2',
|
||||||
'#fd8d3c',
|
'#fdae6b',
|
||||||
'#e6550d',
|
'#fd8d3c',
|
||||||
'#a63603'
|
'#e6550d',
|
||||||
]
|
'#a63603'
|
||||||
|
]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
popup: {
|
popup: {
|
||||||
enable: true,
|
enable: true,
|
||||||
|
|
@ -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>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Drill Down
|
||||||
|
order: 0
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: 钻取地图
|
||||||
|
order: 3
|
||||||
|
---
|
||||||
|
|
@ -58,15 +58,17 @@ class City extends React.Component {
|
||||||
textAllowOverlap: false,
|
textAllowOverlap: false,
|
||||||
},
|
},
|
||||||
fill: {
|
fill: {
|
||||||
field: 'NAME_CHN',
|
color: {
|
||||||
values: [
|
field: 'NAME_CHN',
|
||||||
'#feedde',
|
values: [
|
||||||
'#fdd0a2',
|
'#feedde',
|
||||||
'#fdae6b',
|
'#fdd0a2',
|
||||||
'#fd8d3c',
|
'#fdae6b',
|
||||||
'#e6550d',
|
'#fd8d3c',
|
||||||
'#a63603',
|
'#e6550d',
|
||||||
],
|
'#a63603',
|
||||||
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
popup: {
|
popup: {
|
||||||
enable: true,
|
enable: true,
|
||||||
|
|
|
||||||
|
|
@ -44,15 +44,17 @@ export default class County extends React.Component {
|
||||||
field: 'NAME_CHN',
|
field: 'NAME_CHN',
|
||||||
},
|
},
|
||||||
fill: {
|
fill: {
|
||||||
field: 'NAME_CHN',
|
color: {
|
||||||
values: [
|
field: 'NAME_CHN',
|
||||||
'#feedde',
|
values: [
|
||||||
'#fdd0a2',
|
'#feedde',
|
||||||
'#fdae6b',
|
'#fdd0a2',
|
||||||
'#fd8d3c',
|
'#fdae6b',
|
||||||
'#e6550d',
|
'#fd8d3c',
|
||||||
'#a63603',
|
'#e6550d',
|
||||||
],
|
'#a63603'
|
||||||
|
]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
popup: {
|
popup: {
|
||||||
enable: true,
|
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'));
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import { Scene } from '@antv/l7';
|
import { Scene } from '@antv/l7';
|
||||||
import { ProvinceLayer } from '@antv/l7-district';
|
import { ProvinceLayer } from '@antv/l7-district';
|
||||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import { Select } from 'antd';
|
import { Select } from 'antd';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
const { Option } = Select;
|
const { Option } = Select;
|
||||||
|
|
||||||
const ProvinceData = [
|
const ProvinceData = [
|
||||||
|
|
@ -217,21 +217,23 @@ class Province extends React.Component {
|
||||||
const { province } = this.state;
|
const { province } = this.state;
|
||||||
this.provinceLayer = new ProvinceLayer(scene, {
|
this.provinceLayer = new ProvinceLayer(scene, {
|
||||||
adcode: ['230000'],
|
adcode: ['230000'],
|
||||||
depth: 3,
|
depth: 1,
|
||||||
label: {
|
label: {
|
||||||
field: 'NAME_CHN',
|
field: 'NAME_CHN',
|
||||||
textAllowOverlap: false,
|
textAllowOverlap: false,
|
||||||
},
|
},
|
||||||
fill: {
|
fill: {
|
||||||
field: 'NAME_CHN',
|
color: {
|
||||||
values: [
|
field: 'NAME_CHN',
|
||||||
'#feedde',
|
values: [
|
||||||
'#fdd0a2',
|
'#feedde',
|
||||||
'#fdae6b',
|
'#fdd0a2',
|
||||||
'#fd8d3c',
|
'#fdae6b',
|
||||||
'#e6550d',
|
'#fd8d3c',
|
||||||
'#a63603',
|
'#e6550d',
|
||||||
],
|
'#a63603',
|
||||||
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
popup: {
|
popup: {
|
||||||
enable: true,
|
enable: true,
|
||||||
|
|
@ -287,4 +289,4 @@ class Province extends React.Component {
|
||||||
this.provinceLayer.updateDistrict([value]);
|
this.provinceLayer.updateDistrict([value]);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
ReactDOM.render(<Province />, document.getElementById('map'))
|
ReactDOM.render(<Province />, document.getElementById('map'));
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
---
|
---
|
||||||
title: React 组件
|
title: React 组件
|
||||||
order: 3
|
order: 4
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -90,75 +90,39 @@ scene.addControl(control);
|
||||||
scene.removeControl(control);
|
scene.removeControl(control);
|
||||||
```
|
```
|
||||||
|
|
||||||
### Draw Type
|
## 方法
|
||||||
|
|
||||||
可以不依赖 Draw UI 组件，独立的使用每一个 Draw
|
### getDraw(type)
|
||||||
|
|
||||||
#### DrawCircle
|
获取 draw 实例
|
||||||
|
|
||||||
绘制圆形
|
参数： type 绘制实例 `point|line|polygon|rect| circle`
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { DrawCircle } from '@antv/l7-draw';
|
const pointDraw = drawcontrol.get('point');
|
||||||
const drawCircle = new DrawCircle(scene);
|
|
||||||
drawCircle.enable();
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### DrawRect
|
### getAllData()
|
||||||
|
|
||||||
绘制四边形
|
获取每个 Draw 实例绘制的结果数据
|
||||||
|
|
||||||
|
返回数据格式如下
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { DrawRect } from '@antv/l7-draw';
|
{
|
||||||
const drawRect = new DrawRect(scene);
|
point: []; // geojson数据格式
|
||||||
drawRect.enable();
|
line: [];
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### DrawLine
|
### removeAllData()
|
||||||
|
|
||||||
绘制路径
|
移除绘制的的所有数据
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { DrawLine } from '@antv/l7-draw';
|
drawcontrol.removeAllData();
|
||||||
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.create
|
||||||
|
|
|
||||||
|
|
@ -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: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
@ -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: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
@ -8,12 +8,12 @@
|
||||||
{
|
{
|
||||||
"filename": "draw_circle.js",
|
"filename": "draw_circle.js",
|
||||||
"title": "绘制圆",
|
"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",
|
"filename": "draw_polygon.js",
|
||||||
"title": "绘制多边形",
|
"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"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
---
|
||||||
|
title: introduction
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
---
|
||||||
|
title: 如何使用
|
||||||
|
---
|
||||||
|
图形绘制包括4种状态
|
||||||
|
|
||||||
|
- 绘制 绘制图形
|
||||||
|
- 选中 平移图形
|
||||||
|
- 编辑 图形顶点编辑
|
||||||
|
- 完成态 绘制完成，点击进入选中太
|
||||||
|
|
||||||
|
|
||||||
|
### 绘制圆
|
||||||
|
|
||||||
|
#### 绘制态
|
||||||
|
|
||||||
|
1. 点击，地图生成第一个点既圆心
|
||||||
|
2. 拖动，拖动过程中根据当前点实时计算距离圆心的距离，生成当前圆
|
||||||
|
3. 拖动结束，绘制完成，进入选中状态
|
||||||
|
|
||||||
|
#### 选中态
|
||||||
|
|
||||||
|
鼠标点击图形进入编辑态，鼠标点击图形外部，取消选中
|
||||||
|
|
||||||
|
1. 鼠标 mouseenter 图形鼠标 move
|
||||||
|
2. 拖到鼠标即可实现图形的平移
|
||||||
|
3. 鼠标点击图形进入编辑态，鼠标点击图形外部
|
||||||
|
|
||||||
|
#### 编辑态
|
||||||
|
|
||||||
|
鼠标点击图形外部，完成编辑
|
||||||
|
|
||||||
|
1. 鼠标滑入顶点，鼠标变成 move
|
||||||
|
1. 拖动顶点即可改变圆的半径
|
||||||
|
|
||||||
|
### 绘制多边形
|
||||||
|
|
||||||
|
#### 绘制态
|
||||||
|
1. 点击， 生成第一个点
|
||||||
|
2. 连续点击， 依次生成多边形的点序列，点击过程中会始终显示第一个点和最后一个点
|
||||||
|
3. 结束，双击地图结束，或者点击第一个点或最后一个点结束 
|
||||||
|
|
||||||
|
#### 选中态
|
||||||
|
|
||||||
|
鼠标点击图形进入选中态，选中态可对图形平移，鼠标点击图形外部，取消选中
|
||||||
|
|
||||||
|
#### 编辑态
|
||||||
|
|
||||||
|
鼠标点击图形进入编辑态，编辑态会标注多边形顶点，和各个顶点的中心点
|
||||||
|
鼠标点击图形外部，取消选中
|
||||||
|
|
||||||
|
1. 添加顶点，点击中心点，为多边形新增一个顶点
|
||||||
|
2. 移动顶点，拖动顶点可对顶点移动
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -4,6 +4,11 @@
|
||||||
"en": "heatmap"
|
"en": "heatmap"
|
||||||
},
|
},
|
||||||
"demos": [
|
"demos": [
|
||||||
|
{
|
||||||
|
"filename": "grid_world.js",
|
||||||
|
"title": "网格世界地图",
|
||||||
|
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*1PeGSboLGUUAAAAAAAAAAABkARQnAQ"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"filename": "china.js",
|
"filename": "china.js",
|
||||||
"title": "网格热力图",
|
"title": "网格热力图",
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import { Scene, HeatmapLayer } from '@antv/l7';
|
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||||
import { Mapbox } from '@antv/l7-maps';
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
const scene = new Scene({
|
const scene = new Scene({
|
||||||
id: 'map',
|
id: 'map',
|
||||||
map: new Mapbox({
|
map: new GaodeMap({
|
||||||
style: 'dark',
|
style: 'dark',
|
||||||
pitch: 58.5,
|
pitch: 58.5,
|
||||||
center: [ 111.8759, 30.6942 ],
|
center: [ 111.8759, 30.6942 ],
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ scene.on('loaded', () => {
|
||||||
transforms: [
|
transforms: [
|
||||||
{
|
{
|
||||||
type: 'hexagon',
|
type: 'hexagon',
|
||||||
size: 17000,
|
size: 200000,
|
||||||
field: 'v',
|
field: 'v',
|
||||||
method: 'sum'
|
method: 'sum'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ const World = React.memo(function Map() {
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
const response = await fetch(
|
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();
|
const data = await response.json();
|
||||||
setData(data);
|
setData(data);
|
||||||
|
|
|
||||||
|
|
@ -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 ]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Layer
|
||||||
|
order: 2
|
||||||
|
---
|
||||||
|
How to use the map control
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: 图层
|
||||||
|
order: 2
|
||||||
|
---
|
||||||
|
图层初始化与交互
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
|
|
||||||
require('./site/css/demo.css');
|
require('./site/css/demo.css');
|
||||||
require('./packages/component/src/css/l7.css');
|
require('./packages/component/src/css/l7.css');
|
||||||
require('antd/dist/antd.css');
|
require('antd/dist/antd.less');
|
||||||
window.geotiff = require('geotiff');
|
window.geotiff = require('geotiff');
|
||||||
window.g2 = require('@antv/g2');
|
window.g2 = require('@antv/g2');
|
||||||
window.l7 = require('@antv/l7');
|
window.l7 = require('@antv/l7');
|
||||||
|
|
|
||||||
|
|
@ -77,6 +77,14 @@ module.exports = {
|
||||||
},
|
},
|
||||||
order: 1
|
order: 1
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
slug: 'api/district',
|
||||||
|
title: {
|
||||||
|
zh: '行政区划',
|
||||||
|
en: 'District'
|
||||||
|
},
|
||||||
|
order: 2
|
||||||
|
},
|
||||||
{
|
{
|
||||||
slug: 'api/draw',
|
slug: 'api/draw',
|
||||||
title: {
|
title: {
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,6 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
|
||||||
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
|
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
|
||||||
'@antv/l7-react': path.resolve(__dirname, 'packages/react/src'),
|
'@antv/l7-react': path.resolve(__dirname, 'packages/react/src'),
|
||||||
'@antv/l7-draw': path.resolve(__dirname, 'packages/draw/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')
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ module.exports = {
|
||||||
moduleFileExtensions: [ 'ts', 'tsx', 'js' ],
|
moduleFileExtensions: [ 'ts', 'tsx', 'js' ],
|
||||||
modulePathIgnorePatterns: [ 'dist' ],
|
modulePathIgnorePatterns: [ 'dist' ],
|
||||||
moduleNameMapper: {
|
moduleNameMapper: {
|
||||||
'@antv/l7-(.+)$': '<rootDir>packages/$1/src',
|
'@antv/l7-(.+)$': '<rootDir>packages/$1/src'
|
||||||
},
|
},
|
||||||
notify: true,
|
notify: true,
|
||||||
notifyMode: 'always',
|
notifyMode: 'always',
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
"message": "chore: publish"
|
"message": "chore: publish"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"version": "2.2.5",
|
"version": "2.2.28",
|
||||||
"npmClient": "yarn",
|
"npmClient": "yarn",
|
||||||
"useWorkspaces": true,
|
"useWorkspaces": true,
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
|
|
|
||||||
16
package.json
16
package.json
|
|
@ -36,7 +36,9 @@
|
||||||
"@types/node": "13.11.1",
|
"@types/node": "13.11.1",
|
||||||
"@types/storybook__react": "^4.0.2",
|
"@types/storybook__react": "^4.0.2",
|
||||||
"@types/supercluster": "^5.0.1",
|
"@types/supercluster": "^5.0.1",
|
||||||
|
"antd": "^4.2.4",
|
||||||
"awesome-typescript-loader": "^5.2.1",
|
"awesome-typescript-loader": "^5.2.1",
|
||||||
|
"babel-eslint": "8.2.5",
|
||||||
"babel-jest": "^24.9.0",
|
"babel-jest": "^24.9.0",
|
||||||
"babel-loader": "^8.0.6",
|
"babel-loader": "^8.0.6",
|
||||||
"babel-plugin-const-enum": "^0.0.2",
|
"babel-plugin-const-enum": "^0.0.2",
|
||||||
|
|
@ -55,7 +57,7 @@
|
||||||
"copy-webpack-plugin": "^5.1.1",
|
"copy-webpack-plugin": "^5.1.1",
|
||||||
"core-js": "3",
|
"core-js": "3",
|
||||||
"coveralls": "^3.0.7",
|
"coveralls": "^3.0.7",
|
||||||
"cross-env": "^6.0.3",
|
"cross-env": "^7.0.2",
|
||||||
"css-loader": "^3.2.0",
|
"css-loader": "^3.2.0",
|
||||||
"cz-conventional-changelog": "^3.0.2",
|
"cz-conventional-changelog": "^3.0.2",
|
||||||
"dat.gui": "^0.7.2",
|
"dat.gui": "^0.7.2",
|
||||||
|
|
@ -116,7 +118,7 @@
|
||||||
"tslint": "^5.11.0",
|
"tslint": "^5.11.0",
|
||||||
"tslint-config-prettier": "^1.15.0",
|
"tslint-config-prettier": "^1.15.0",
|
||||||
"tslint-plugin-prettier": "^1.3.0",
|
"tslint-plugin-prettier": "^1.3.0",
|
||||||
"tslint-react": "^4.1.0",
|
"tslint-react": "4.1.0",
|
||||||
"typescript": "^3.7.0-beta",
|
"typescript": "^3.7.0-beta",
|
||||||
"webpack": "^4.17.1",
|
"webpack": "^4.17.1",
|
||||||
"webpack-cli": "^3.1.0",
|
"webpack-cli": "^3.1.0",
|
||||||
|
|
@ -131,8 +133,8 @@
|
||||||
"site:clean": "gatsby clean",
|
"site:clean": "gatsby clean",
|
||||||
"site:deploy": "yarn run site:build && gh-pages -d public",
|
"site:deploy": "yarn run site:build && gh-pages -d public",
|
||||||
"site:publish": "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:fix": "prettier --write docs/api/**/*.md docs/api/*.md stories/**/**/*.tsx *.md",
|
||||||
"lint:examples": "eslint examples/**/**/*.js --fix",
|
"lint:examples": "eslint examples --fix --ext .js",
|
||||||
"prebuild": "run-p tsc lint",
|
"prebuild": "run-p tsc lint",
|
||||||
"build": "yarn clean && lerna run build",
|
"build": "yarn clean && lerna run build",
|
||||||
"postbuild": "yarn build:declarations",
|
"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-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",
|
"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",
|
"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": [
|
"workspaces": [
|
||||||
"packages/*",
|
"packages/*",
|
||||||
|
|
@ -185,6 +188,5 @@
|
||||||
},
|
},
|
||||||
"tnpm": {
|
"tnpm": {
|
||||||
"mode": "yarn"
|
"mode": "yarn"
|
||||||
},
|
}
|
||||||
"version": "0.0.0"
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@antv/l7-district",
|
"name": "@antv/l7-district",
|
||||||
"version": "2.2.5",
|
"version": "2.2.28",
|
||||||
"description": "L7 district moudules",
|
"description": "L7 district moudules",
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "thinkinggis <lzx199065@gmail.com>",
|
"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",
|
"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",
|
"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",
|
"build:cdn": "node_modules/.bin/rollup -c",
|
||||||
"test": "jest"
|
"test": "jest",
|
||||||
|
"sync": "tnpm sync"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7": "2.2.5",
|
"@antv/l7": "2.2.28",
|
||||||
"@babel/runtime": "^7.7.7",
|
"@babel/runtime": "^7.7.7",
|
||||||
"@turf/circle": "^6.0.1",
|
"@turf/circle": "^6.0.1",
|
||||||
"@turf/distance": "^6.0.1",
|
"@turf/distance": "^6.0.1",
|
||||||
|
|
@ -44,10 +45,8 @@
|
||||||
"eventemitter3": "^4.0.0",
|
"eventemitter3": "^4.0.0",
|
||||||
"geobuf": "^3.0.1",
|
"geobuf": "^3.0.1",
|
||||||
"lodash": "^4.6.2",
|
"lodash": "^4.6.2",
|
||||||
"pbf": "^3.2.1"
|
"pbf": "^3.2.1",
|
||||||
},
|
"simplify-geojson": "^1.0.3"
|
||||||
"peerDependencies": {
|
|
||||||
"@antv/l7": "^2.2.3"
|
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/antvis/L7/issues"
|
"url": "https://github.com/antvis/L7/issues"
|
||||||
|
|
@ -58,5 +57,6 @@
|
||||||
"postcss-url": "^8.0.0",
|
"postcss-url": "^8.0.0",
|
||||||
"rollup": "^2.3.3",
|
"rollup": "^2.3.3",
|
||||||
"rollup-plugin-less": "^1.1.2"
|
"rollup-plugin-less": "^1.1.2"
|
||||||
}
|
},
|
||||||
|
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0"
|
||||||
}
|
}
|
||||||
|
|
@ -25,7 +25,7 @@ export default {
|
||||||
commonjs({
|
commonjs({
|
||||||
namedExports: {
|
namedExports: {
|
||||||
eventemitter3: [ 'EventEmitter' ],
|
eventemitter3: [ 'EventEmitter' ],
|
||||||
lodash: [ 'merge', 'clone' ]
|
lodash: [ 'merge', 'mergeWith', 'clone', 'isObject' ]
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
buble({
|
buble({
|
||||||
|
|
@ -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 };
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { setDataConfig } from './config';
|
// import { DataConfig, setDataConfig } from './config_1';
|
||||||
import CityLayer from './layer/city';
|
import CityLayer from './layer/city';
|
||||||
import CountryLayer from './layer/country';
|
import CountryLayer from './layer/country';
|
||||||
import CountyLayer from './layer/county';
|
import CountyLayer from './layer/county';
|
||||||
|
|
@ -12,5 +12,6 @@ export {
|
||||||
CityLayer,
|
CityLayer,
|
||||||
CountyLayer,
|
CountyLayer,
|
||||||
DrillDownLayer,
|
DrillDownLayer,
|
||||||
setDataConfig,
|
|
||||||
};
|
};
|
||||||
|
export * from './config';
|
||||||
|
export * from './layer/interface';
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,3 @@
|
||||||
import {
|
|
||||||
ILayer,
|
|
||||||
LineLayer,
|
|
||||||
PointLayer,
|
|
||||||
PolygonLayer,
|
|
||||||
Scene,
|
|
||||||
StyleAttrField,
|
|
||||||
} from '@antv/l7';
|
|
||||||
// tslint:disable-next-line: no-submodule-imports
|
// tslint:disable-next-line: no-submodule-imports
|
||||||
import merge from 'lodash/merge';
|
import merge from 'lodash/merge';
|
||||||
|
|
||||||
|
|
@ -1,45 +1,50 @@
|
||||||
import {
|
import { AttributeType, LineLayer, PointLayer, Scene } from '@antv/l7';
|
||||||
ILayer,
|
import { getDataConfig } from '../index';
|
||||||
LineLayer,
|
|
||||||
PointLayer,
|
|
||||||
PolygonLayer,
|
|
||||||
Scene,
|
|
||||||
StyleAttrField,
|
|
||||||
} from '@antv/l7';
|
|
||||||
import { DataConfig } from '../config';
|
|
||||||
import BaseLayer from './baseLayer';
|
import BaseLayer from './baseLayer';
|
||||||
import { IDistrictLayerOption } from './interface';
|
import { IDistrictLayerOption } from './interface';
|
||||||
|
|
||||||
export default class CountryLayer extends BaseLayer {
|
export default class CountryLayer extends BaseLayer {
|
||||||
constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
|
constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
|
||||||
super(scene, option);
|
super(scene, option);
|
||||||
const { depth } = this.options;
|
const { depth, showBorder } = this.options;
|
||||||
this.loadData().then(([fillData, fillLabel]) => {
|
this.addProvinceFill();
|
||||||
this.addFillLayer(fillData);
|
this.addProvinceLabel();
|
||||||
// const labeldata = fillData.features.map((feature: any) => {
|
const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
|
||||||
// return {
|
depth
|
||||||
// ...feature.properties,
|
];
|
||||||
// center: [feature.properties.x, feature.properties.y],
|
if (showBorder) {
|
||||||
// };
|
this.addProvinceLine(countryConfig.provinceLine);
|
||||||
// });
|
if (depth === 2 * 1) {
|
||||||
if (fillLabel && this.options.label?.enable) {
|
this.addCityBorder(countryConfig.fill);
|
||||||
this.addLabelLayer(
|
}
|
||||||
fillLabel.filter((v: any) => {
|
if (depth === 3 * 1) {
|
||||||
return v.name !== '澳门';
|
this.addCountyBorder(countryConfig.fill);
|
||||||
}),
|
|
||||||
);
|
|
||||||
this.addMCLabel();
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
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 lineData = await this.fetchData(cfg);
|
||||||
const border1 = lineData.features.filter((feature: any) => {
|
const border1 = lineData.features.filter((feature: any) => {
|
||||||
const type = feature.properties.type;
|
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 = {
|
const borderFc = {
|
||||||
type: 'FeatureCollection',
|
type: 'FeatureCollection',
|
||||||
features: border1,
|
features: border1,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const borderFc2 = {
|
||||||
|
type: 'FeatureCollection',
|
||||||
|
features: border2,
|
||||||
|
};
|
||||||
|
|
||||||
const nationalBorder = lineData.features.filter((feature: any) => {
|
const nationalBorder = lineData.features.filter((feature: any) => {
|
||||||
const type = feature.properties.type;
|
const type = feature.properties.type;
|
||||||
return type !== '1' && type !== '4';
|
return type !== '1' && type !== '4';
|
||||||
|
|
@ -61,33 +77,35 @@ export default class CountryLayer extends BaseLayer {
|
||||||
type: 'FeatureCollection',
|
type: 'FeatureCollection',
|
||||||
features: nationalBorder,
|
features: nationalBorder,
|
||||||
};
|
};
|
||||||
this.addNationBorder(nationalFc, borderFc);
|
this.addNationBorder(nationalFc, borderFc, borderFc2);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 国界,省界
|
// 国界,省界
|
||||||
protected addFillLine(lineData: any) {
|
// protected addFillLine(lineData: any) {
|
||||||
const border1 = lineData.features.filter((feature: any) => {
|
// const border1 = lineData.features.filter((feature: any) => {
|
||||||
const type = feature.properties.type;
|
// const type = feature.properties.type;
|
||||||
return type === '1' || type === '4';
|
// return type === '1' || type === '4';
|
||||||
});
|
// });
|
||||||
const borderFc = {
|
// const borderFc = {
|
||||||
type: 'FeatureCollection',
|
// type: 'FeatureCollection',
|
||||||
features: border1,
|
// features: border1,
|
||||||
};
|
// };
|
||||||
const nationalBorder = lineData.features.filter((feature: any) => {
|
// const nationalBorder = lineData.features.filter((feature: any) => {
|
||||||
const type = feature.properties.type;
|
// const type = feature.properties.type;
|
||||||
return type !== '1' && type !== '4';
|
// return type !== '1' && type !== '4';
|
||||||
});
|
// });
|
||||||
const nationalFc = {
|
// const nationalFc = {
|
||||||
type: 'FeatureCollection',
|
// type: 'FeatureCollection',
|
||||||
features: nationalBorder,
|
// features: nationalBorder,
|
||||||
};
|
// };
|
||||||
this.addNationBorder(nationalFc, borderFc);
|
// this.addNationBorder(nationalFc, borderFc);
|
||||||
}
|
// }
|
||||||
|
|
||||||
private async loadData() {
|
private async loadData() {
|
||||||
const { depth } = this.options;
|
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 fillData = await this.fetchData(countryConfig.fill);
|
||||||
const fillLabel = countryConfig.label
|
const fillLabel = countryConfig.label
|
||||||
? await this.fetchData(countryConfig.label)
|
? await this.fetchData(countryConfig.label)
|
||||||
|
|
@ -95,7 +113,11 @@ export default class CountryLayer extends BaseLayer {
|
||||||
return [fillData, fillLabel];
|
return [fillData, fillLabel];
|
||||||
}
|
}
|
||||||
// 省级行政区划
|
// 省级行政区划
|
||||||
private async addNationBorder(boundaries: any, boundaries2: any) {
|
private async addNationBorder(
|
||||||
|
boundaries: any,
|
||||||
|
boundaries2: any,
|
||||||
|
boundaries3: any,
|
||||||
|
) {
|
||||||
const {
|
const {
|
||||||
nationalStroke,
|
nationalStroke,
|
||||||
provinceStroke,
|
provinceStroke,
|
||||||
|
|
@ -105,13 +127,16 @@ export default class CountryLayer extends BaseLayer {
|
||||||
chinaNationalWidth,
|
chinaNationalWidth,
|
||||||
coastlineStroke,
|
coastlineStroke,
|
||||||
coastlineWidth,
|
coastlineWidth,
|
||||||
|
showBorder,
|
||||||
stroke,
|
stroke,
|
||||||
strokeWidth,
|
strokeWidth,
|
||||||
|
visible,
|
||||||
zIndex,
|
zIndex,
|
||||||
} = this.options;
|
} = this.options;
|
||||||
// 添加国界线
|
// 添加国界线
|
||||||
const lineLayer = new LineLayer({
|
const lineLayer = new LineLayer({
|
||||||
zIndex: zIndex + 1,
|
zIndex: zIndex + 0.1,
|
||||||
|
visible: visible && showBorder,
|
||||||
})
|
})
|
||||||
.source(boundaries)
|
.source(boundaries)
|
||||||
.size('type', (v: string) => {
|
.size('type', (v: string) => {
|
||||||
|
|
@ -128,38 +153,55 @@ export default class CountryLayer extends BaseLayer {
|
||||||
.shape('line')
|
.shape('line')
|
||||||
.color('type', (v: string) => {
|
.color('type', (v: string) => {
|
||||||
if (v === '3') {
|
if (v === '3') {
|
||||||
return provinceStroke;
|
return provinceStroke; // 省界
|
||||||
} else if (v === '2') {
|
} else if (v === '2') {
|
||||||
return coastlineStroke;
|
return coastlineStroke; // 海岸线
|
||||||
} else if (v === '0') {
|
} else if (v === '0') {
|
||||||
return chinaNationalStroke;
|
return chinaNationalStroke; // 中国国界线
|
||||||
} else {
|
} else {
|
||||||
return '#fff';
|
return '#fff';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 添加未定国界
|
// 添加未定国界
|
||||||
const lineLayer2 = new LineLayer({
|
const lineLayer2 = new LineLayer({
|
||||||
zIndex: zIndex + 1,
|
zIndex: zIndex + 0.1,
|
||||||
|
visible: visible && showBorder,
|
||||||
})
|
})
|
||||||
.source(boundaries2)
|
.source(boundaries2)
|
||||||
.size(nationalWidth)
|
.size(chinaNationalWidth)
|
||||||
.shape('line')
|
.shape('line')
|
||||||
.color('gray')
|
.color(chinaNationalStroke)
|
||||||
.style({
|
.style({
|
||||||
lineType: 'dash',
|
lineType: 'dash',
|
||||||
dashArray: [2, 2],
|
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(lineLayer);
|
||||||
this.scene.addLayer(lineLayer2);
|
this.scene.addLayer(lineLayer2);
|
||||||
this.layers.push(lineLayer, lineLayer2);
|
this.scene.addLayer(lineLayer3);
|
||||||
|
this.layers.push(lineLayer, lineLayer2, lineLayer3);
|
||||||
}
|
}
|
||||||
// 市边界
|
// 市边界
|
||||||
private async addCityBorder(cfg: any) {
|
private async addCityBorder(cfg: any) {
|
||||||
const border1 = await this.fetchData(cfg);
|
const border1 = await this.fetchData(cfg);
|
||||||
const { cityStroke, cityStrokeWidth } = this.options;
|
const { cityStroke, cityStrokeWidth, visible } = this.options;
|
||||||
const cityline = new LineLayer({
|
const cityline = new LineLayer({
|
||||||
zIndex: 2,
|
zIndex: 2,
|
||||||
|
visible,
|
||||||
})
|
})
|
||||||
.source(border1)
|
.source(border1)
|
||||||
.color(cityStroke)
|
.color(cityStroke)
|
||||||
|
|
@ -174,9 +216,10 @@ export default class CountryLayer extends BaseLayer {
|
||||||
// 县级边界
|
// 县级边界
|
||||||
private async addCountyBorder(cfg: any) {
|
private async addCountyBorder(cfg: any) {
|
||||||
const border1 = await this.fetchData(cfg);
|
const border1 = await this.fetchData(cfg);
|
||||||
const { countyStrokeWidth, countyStroke } = this.options;
|
const { countyStrokeWidth, countyStroke, visible } = this.options;
|
||||||
const cityline = new LineLayer({
|
const cityline = new LineLayer({
|
||||||
zIndex: 2,
|
zIndex: 2,
|
||||||
|
visible,
|
||||||
})
|
})
|
||||||
.source(border1)
|
.source(border1)
|
||||||
.color(countyStroke)
|
.color(countyStroke)
|
||||||
|
|
@ -195,12 +238,12 @@ export default class CountryLayer extends BaseLayer {
|
||||||
center: [113.537747, 22.187009],
|
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 }, [
|
const labelLayer2 = this.addText(data, { minZoom: 3, maxZoom: 4 }, [
|
||||||
-35,
|
-35,
|
||||||
-10,
|
-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(labelLayer);
|
||||||
this.scene.addLayer(labelLayer1);
|
this.scene.addLayer(labelLayer1);
|
||||||
this.scene.addLayer(labelLayer2);
|
this.scene.addLayer(labelLayer2);
|
||||||
|
|
@ -208,9 +251,10 @@ export default class CountryLayer extends BaseLayer {
|
||||||
}
|
}
|
||||||
|
|
||||||
private addText(labelData: any, option: any, offset: [number, number]) {
|
private addText(labelData: any, option: any, offset: [number, number]) {
|
||||||
const { label, zIndex } = this.options;
|
const { label, zIndex, visible } = this.options;
|
||||||
const labelLayer = new PointLayer({
|
const labelLayer = new PointLayer({
|
||||||
zIndex: zIndex + 2,
|
zIndex: zIndex + 0.4,
|
||||||
|
visible,
|
||||||
...option,
|
...option,
|
||||||
})
|
})
|
||||||
.source(labelData, {
|
.source(labelData, {
|
||||||
|
|
@ -219,9 +263,9 @@ export default class CountryLayer extends BaseLayer {
|
||||||
coordinates: 'center',
|
coordinates: 'center',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.color(label.color as StyleAttrField)
|
.color(label.color as AttributeType)
|
||||||
.shape(label.field as StyleAttrField, 'text')
|
.shape('name', 'text')
|
||||||
.size(10)
|
.size(label.size as AttributeType)
|
||||||
.style({
|
.style({
|
||||||
opacity: label.opacity,
|
opacity: label.opacity,
|
||||||
stroke: label.stroke,
|
stroke: label.stroke,
|
||||||
|
|
@ -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],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>;
|
||||||
|
}
|
||||||
|
|
@ -8,7 +8,7 @@ import {
|
||||||
} from '@antv/l7';
|
} from '@antv/l7';
|
||||||
// tslint:disable-next-line: no-submodule-imports
|
// tslint:disable-next-line: no-submodule-imports
|
||||||
import merge from 'lodash/merge';
|
import merge from 'lodash/merge';
|
||||||
import { DataConfig } from '../config';
|
import { getDataConfig } from '../';
|
||||||
import BaseLayer from './baseLayer';
|
import BaseLayer from './baseLayer';
|
||||||
import { adcodeType, IDistrictLayerOption } from './interface';
|
import { adcodeType, IDistrictLayerOption } from './interface';
|
||||||
|
|
||||||
|
|
@ -22,7 +22,7 @@ export default class ProvinceLayer extends BaseLayer {
|
||||||
constructor(scene: Scene, option: Partial<IProvinceLayerOption> = {}) {
|
constructor(scene: Scene, option: Partial<IProvinceLayerOption> = {}) {
|
||||||
super(scene, option);
|
super(scene, option);
|
||||||
this.addProvinceFillLayer();
|
this.addProvinceFillLayer();
|
||||||
this.addProvinceLineLayer();
|
// this.addProvinceLineLayer();
|
||||||
}
|
}
|
||||||
// 通过adcode 更新
|
// 通过adcode 更新
|
||||||
public updateDistrict(
|
public updateDistrict(
|
||||||
|
|
@ -34,14 +34,29 @@ export default class ProvinceLayer extends BaseLayer {
|
||||||
this.hide();
|
this.hide();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
const { label, showBorder } = this.options;
|
||||||
this.setOption({ adcode });
|
this.setOption({ adcode });
|
||||||
const fillData = this.filterData(this.fillRawData, adcode);
|
const fillData = this.filterData(this.fillRawData, adcode);
|
||||||
const lineData = this.filterData(this.lineRawData, adcode);
|
const lineData = this.filterData(this.lineRawData, adcode);
|
||||||
const labelData = this.filterLabelData(this.labelRawData, 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.fillData = fillData;
|
||||||
this.updateData(newData, joinByField);
|
this.updateData(newData, joinByField);
|
||||||
this.lineLayer.setData(lineData);
|
if (showBorder) {
|
||||||
this.labelLayer.setData(labelData);
|
this.lineLayer.setData(lineData);
|
||||||
|
}
|
||||||
|
if (label.enable) {
|
||||||
|
this.labelLayer.setData(labelData);
|
||||||
|
}
|
||||||
|
|
||||||
this.show();
|
this.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -54,17 +69,6 @@ export default class ProvinceLayer extends BaseLayer {
|
||||||
field: 'NAME_CHN',
|
field: 'NAME_CHN',
|
||||||
textAllowOverlap: false,
|
textAllowOverlap: false,
|
||||||
},
|
},
|
||||||
fill: {
|
|
||||||
field: 'NAME_CHN',
|
|
||||||
values: [
|
|
||||||
'#feedde',
|
|
||||||
'#fdd0a2',
|
|
||||||
'#fdae6b',
|
|
||||||
'#fd8d3c',
|
|
||||||
'#e6550d',
|
|
||||||
'#a63603',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
popup: {
|
popup: {
|
||||||
enable: true,
|
enable: true,
|
||||||
Html: (props: any) => {
|
Html: (props: any) => {
|
||||||
|
|
@ -98,8 +102,11 @@ export default class ProvinceLayer extends BaseLayer {
|
||||||
return features;
|
return features;
|
||||||
}
|
}
|
||||||
private async addProvinceFillLayer() {
|
private async addProvinceFillLayer() {
|
||||||
const { depth, adcode } = this.options as IProvinceLayerOption;
|
const { depth, adcode, label, showBorder } = this
|
||||||
const countryConfig = DataConfig.country.CHN[depth];
|
.options as IProvinceLayerOption;
|
||||||
|
const countryConfig = getDataConfig(this.options.geoDataLevel).country.CHN[
|
||||||
|
depth
|
||||||
|
];
|
||||||
const fillData = await this.fetchData(countryConfig.fill);
|
const fillData = await this.fetchData(countryConfig.fill);
|
||||||
|
|
||||||
this.labelRawData = fillData.features.map((feature: any) => {
|
this.labelRawData = fillData.features.map((feature: any) => {
|
||||||
|
|
@ -109,15 +116,24 @@ export default class ProvinceLayer extends BaseLayer {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
const data = this.filterData(fillData, adcode);
|
const data = this.filterData(fillData, adcode);
|
||||||
|
this.fillData = data;
|
||||||
const labelData = this.filterLabelData(this.labelRawData, adcode);
|
const labelData = this.filterLabelData(this.labelRawData, adcode);
|
||||||
this.fillRawData = fillData;
|
this.fillRawData = fillData;
|
||||||
this.addFillLayer(data);
|
this.addFillLayer(data);
|
||||||
this.addLabelLayer(labelData);
|
if (label.enable) {
|
||||||
|
this.addLabelLayer(labelData);
|
||||||
|
}
|
||||||
|
this.lineRawData = fillData;
|
||||||
|
if (showBorder) {
|
||||||
|
this.addFillLine(data);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private async addProvinceLineLayer() {
|
private async addProvinceLineLayer() {
|
||||||
const { depth, adcode } = this.options as IProvinceLayerOption;
|
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 fillData = await this.fetchData(countryConfig.line);
|
||||||
const data = this.filterData(fillData, adcode);
|
const data = this.filterData(fillData, adcode);
|
||||||
this.lineRawData = fillData;
|
this.lineRawData = fillData;
|
||||||
|
|
@ -6,7 +6,7 @@ import {
|
||||||
Scene,
|
Scene,
|
||||||
StyleAttrField,
|
StyleAttrField,
|
||||||
} from '@antv/l7';
|
} from '@antv/l7';
|
||||||
import { DataConfig } from '../config';
|
import { getDataConfig } from '../';
|
||||||
import BaseLayer from './baseLayer';
|
import BaseLayer from './baseLayer';
|
||||||
import { IDistrictLayerOption } from './interface';
|
import { IDistrictLayerOption } from './interface';
|
||||||
export default class WorldLayer extends BaseLayer {
|
export default class WorldLayer extends BaseLayer {
|
||||||
|
|
@ -14,9 +14,11 @@ export default class WorldLayer extends BaseLayer {
|
||||||
super(scene, option);
|
super(scene, option);
|
||||||
this.loadData().then(([fillData, lineData, fillLabel]) => {
|
this.loadData().then(([fillData, lineData, fillLabel]) => {
|
||||||
this.addFillLayer(fillData);
|
this.addFillLayer(fillData);
|
||||||
this.addFillLine(lineData);
|
if (this.options.showBorder) {
|
||||||
|
this.addFillLine(lineData);
|
||||||
|
}
|
||||||
if (this.options.label?.enable) {
|
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() {
|
private async loadData() {
|
||||||
const countryConfig = DataConfig.world;
|
const countryConfig = getDataConfig(this.options.geoDataLevel).world;
|
||||||
|
|
||||||
const fillData = await this.fetchData(countryConfig.fill);
|
const fillData = await this.fetchData(countryConfig.fill);
|
||||||
const lineData = await this.fetchData(countryConfig.line);
|
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];
|
return [fillData, lineData, fillLabel];
|
||||||
}
|
}
|
||||||
private addNationBorder(boundaries: any, boundaries2: any) {
|
private addNationBorder(boundaries: any, boundaries2: any) {
|
||||||
|
|
@ -67,11 +75,13 @@ export default class WorldLayer extends BaseLayer {
|
||||||
chinaNationalStroke,
|
chinaNationalStroke,
|
||||||
chinaNationalWidth,
|
chinaNationalWidth,
|
||||||
coastlineWidth,
|
coastlineWidth,
|
||||||
|
visible,
|
||||||
zIndex,
|
zIndex,
|
||||||
} = this.options;
|
} = this.options;
|
||||||
// 添加国界线
|
// 添加国界线
|
||||||
const lineLayer = new LineLayer({
|
const lineLayer = new LineLayer({
|
||||||
zIndex: zIndex + 1,
|
zIndex: zIndex + 0.1,
|
||||||
|
visible,
|
||||||
})
|
})
|
||||||
.source(boundaries)
|
.source(boundaries)
|
||||||
// .size(0.6)
|
// .size(0.6)
|
||||||
|
|
@ -99,7 +109,8 @@ export default class WorldLayer extends BaseLayer {
|
||||||
});
|
});
|
||||||
// 添加未定国界
|
// 添加未定国界
|
||||||
const lineLayer2 = new LineLayer({
|
const lineLayer2 = new LineLayer({
|
||||||
zIndex: zIndex + 1,
|
zIndex: zIndex + 0.1,
|
||||||
|
visible,
|
||||||
})
|
})
|
||||||
.source(boundaries2)
|
.source(boundaries2)
|
||||||
.size('type', (v: string) => {
|
.size('type', (v: string) => {
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@antv/l7-component",
|
"name": "@antv/l7-component",
|
||||||
"version": "2.2.5",
|
"version": "2.2.28",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"module": "es/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",
|
"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",
|
"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-*",
|
"lint:ts": "run-p -c lint:ts-*",
|
||||||
"test": "jest"
|
"test": "jest",
|
||||||
|
"sync": "tnpm sync"
|
||||||
},
|
},
|
||||||
"author": "lzxue",
|
"author": "lzxue",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7-core": "2.2.5",
|
"@antv/l7-core": "2.2.28",
|
||||||
"@antv/l7-utils": "2.2.5",
|
"@antv/l7-utils": "2.2.28",
|
||||||
"@babel/runtime": "^7.7.7",
|
"@babel/runtime": "^7.7.7",
|
||||||
"eventemitter3": "^4.0.0",
|
"eventemitter3": "^4.0.0",
|
||||||
"inversify": "^5.0.1",
|
"inversify": "^5.0.1",
|
||||||
"load-styles": "^2.0.0"
|
"load-styles": "^2.0.0"
|
||||||
},
|
},
|
||||||
"gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
|
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -112,8 +112,12 @@ export default class MarkerLayer extends EventEmitter {
|
||||||
this.markers.forEach((marker: IMarker) => {
|
this.markers.forEach((marker: IMarker) => {
|
||||||
marker.remove();
|
marker.remove();
|
||||||
});
|
});
|
||||||
|
this.clusterMarkers.forEach((clusterMarker: IMarker) => {
|
||||||
|
clusterMarker.remove();
|
||||||
|
});
|
||||||
this.mapsService.off('camerachange', this.update);
|
this.mapsService.off('camerachange', this.update);
|
||||||
this.markers = [];
|
this.markers = [];
|
||||||
|
this.clusterMarkers = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
public destroy() {
|
public destroy() {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import {
|
||||||
IPoint,
|
IPoint,
|
||||||
IPopup,
|
IPopup,
|
||||||
IPopupOption,
|
IPopupOption,
|
||||||
|
ISceneService,
|
||||||
TYPES,
|
TYPES,
|
||||||
} from '@antv/l7-core';
|
} from '@antv/l7-core';
|
||||||
import {
|
import {
|
||||||
|
|
@ -21,6 +22,7 @@ import { Container } from 'inversify';
|
||||||
export default class Popup extends EventEmitter implements IPopup {
|
export default class Popup extends EventEmitter implements IPopup {
|
||||||
private popupOption: IPopupOption;
|
private popupOption: IPopupOption;
|
||||||
private mapsService: IMapService<unknown>;
|
private mapsService: IMapService<unknown>;
|
||||||
|
private sceneSerive: ISceneService;
|
||||||
private lngLat: ILngLat;
|
private lngLat: ILngLat;
|
||||||
private content: HTMLElement;
|
private content: HTMLElement;
|
||||||
private closeButton: HTMLElement;
|
private closeButton: HTMLElement;
|
||||||
|
|
@ -40,6 +42,7 @@ export default class Popup extends EventEmitter implements IPopup {
|
||||||
|
|
||||||
public addTo(scene: Container) {
|
public addTo(scene: Container) {
|
||||||
this.mapsService = scene.get<IMapService>(TYPES.IMapService);
|
this.mapsService = scene.get<IMapService>(TYPES.IMapService);
|
||||||
|
this.sceneSerive = scene.get<ISceneService>(TYPES.ISceneService);
|
||||||
this.mapsService.on('camerachange', this.update);
|
this.mapsService.on('camerachange', this.update);
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
this.update();
|
this.update();
|
||||||
|
|
@ -177,6 +180,7 @@ export default class Popup extends EventEmitter implements IPopup {
|
||||||
offsets: [0, 0],
|
offsets: [0, 0],
|
||||||
anchor: anchorType.BOTTOM,
|
anchor: anchorType.BOTTOM,
|
||||||
className: '',
|
className: '',
|
||||||
|
stopPropagation: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -193,12 +197,12 @@ export default class Popup extends EventEmitter implements IPopup {
|
||||||
if (!this.mapsService || !hasPosition || !this.content) {
|
if (!this.mapsService || !hasPosition || !this.content) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const markerContainer = this.mapsService.getMarkerContainer();
|
const popupContainer = this.sceneSerive.getSceneContainer();
|
||||||
if (!this.container && markerContainer) {
|
if (!this.container && popupContainer) {
|
||||||
this.container = this.creatDom(
|
this.container = this.creatDom(
|
||||||
'div',
|
'div',
|
||||||
'l7-popup',
|
'l7-popup',
|
||||||
markerContainer.parentNode as HTMLElement,
|
popupContainer as HTMLElement,
|
||||||
);
|
);
|
||||||
|
|
||||||
this.tip = this.creatDom('div', 'l7-popup-tip', this.container);
|
this.tip = this.creatDom('div', 'l7-popup-tip', this.container);
|
||||||
|
|
@ -208,12 +212,12 @@ export default class Popup extends EventEmitter implements IPopup {
|
||||||
.split(' ')
|
.split(' ')
|
||||||
.forEach((name) => this.container.classList.add(name));
|
.forEach((name) => this.container.classList.add(name));
|
||||||
}
|
}
|
||||||
this.container.addEventListener('mousedown', (e) => {
|
|
||||||
e.stopPropagation();
|
// ['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => {
|
||||||
});
|
// this.container.addEventListener(type, (e) => {
|
||||||
this.container.addEventListener('click', (e) => {
|
// e.stopPropagation();
|
||||||
e.stopPropagation();
|
// });
|
||||||
});
|
// });
|
||||||
}
|
}
|
||||||
if (maxWidth && this.container.style.maxWidth !== maxWidth) {
|
if (maxWidth && this.container.style.maxWidth !== maxWidth) {
|
||||||
this.container.style.maxWidth = maxWidth;
|
this.container.style.maxWidth = maxWidth;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@antv/l7-core",
|
"name": "@antv/l7-core",
|
||||||
"version": "2.2.5",
|
"version": "2.2.28",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"module": "es/index.js",
|
"module": "es/index.js",
|
||||||
|
|
@ -17,13 +17,14 @@
|
||||||
"build": "run-p build:*",
|
"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: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",
|
"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",
|
"author": "xiaoiver",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/async-hook": "^2.1.0",
|
"@antv/async-hook": "^2.1.0",
|
||||||
"@antv/l7-utils": "2.2.5",
|
"@antv/l7-utils": "2.2.28",
|
||||||
"@babel/runtime": "^7.7.7",
|
"@babel/runtime": "^7.7.7",
|
||||||
"@mapbox/tiny-sdf": "^1.1.1",
|
"@mapbox/tiny-sdf": "^1.1.1",
|
||||||
"ajv": "^6.10.2",
|
"ajv": "^6.10.2",
|
||||||
|
|
@ -46,7 +47,7 @@
|
||||||
"@types/lodash": "^4.14.138",
|
"@types/lodash": "^4.14.138",
|
||||||
"@types/viewport-mercator-project": "^6.1.0"
|
"@types/viewport-mercator-project": "^6.1.0"
|
||||||
},
|
},
|
||||||
"gitHead": "532ade40831b35b04a677b351d092e54c00613d8",
|
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ export interface IICONMap {
|
||||||
export interface IIconService {
|
export interface IIconService {
|
||||||
canvasHeight: number;
|
canvasHeight: number;
|
||||||
on(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
|
on(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
|
||||||
|
off(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
|
||||||
init(): void;
|
init(): void;
|
||||||
addImage(id: string, image: IImage): void;
|
addImage(id: string, image: IImage): void;
|
||||||
hasImage(id: string): boolean;
|
hasImage(id: string): boolean;
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ export interface IPopupOption {
|
||||||
anchor: anchorType[any];
|
anchor: anchorType[any];
|
||||||
className: string;
|
className: string;
|
||||||
offsets: number[];
|
offsets: number[];
|
||||||
|
stopPropagation: boolean;
|
||||||
}
|
}
|
||||||
export interface IPopup {
|
export interface IPopup {
|
||||||
addTo(scene: Container): this;
|
addTo(scene: Container): this;
|
||||||
|
|
|
||||||
|
|
@ -33,9 +33,12 @@ export default class InteractionService extends EventEmitter
|
||||||
|
|
||||||
private clickTimer: number;
|
private clickTimer: number;
|
||||||
|
|
||||||
|
private $containter: HTMLElement;
|
||||||
|
|
||||||
public init() {
|
public init() {
|
||||||
// 注册事件在地图底图上
|
// 注册事件在地图底图上
|
||||||
this.addEventListenerOnMap();
|
this.addEventListenerOnMap();
|
||||||
|
this.$containter = this.mapService.getMapContainer() as HTMLElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
public destroy() {
|
public destroy() {
|
||||||
|
|
@ -147,7 +150,10 @@ export default class InteractionService extends EventEmitter
|
||||||
const lngLat = this.mapService.containerToLngLat([clientX, clientY]);
|
const lngLat = this.mapService.containerToLngLat([clientX, clientY]);
|
||||||
return { x: clientX, y: clientY, lngLat, type };
|
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();
|
const $containter = this.mapService.getMapContainer();
|
||||||
if ($containter) {
|
if ($containter) {
|
||||||
const { top, left } = $containter.getBoundingClientRect();
|
const { top, left } = $containter.getBoundingClientRect();
|
||||||
|
|
|
||||||
|
|
@ -46,8 +46,14 @@ export default class PickingService implements IPickingService {
|
||||||
createTexture2D,
|
createTexture2D,
|
||||||
createFramebuffer,
|
createFramebuffer,
|
||||||
getViewportSize,
|
getViewportSize,
|
||||||
|
getContainer,
|
||||||
} = this.rendererService;
|
} = this.rendererService;
|
||||||
const { width, height } = getViewportSize();
|
let {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
} = (getContainer() as HTMLElement).getBoundingClientRect();
|
||||||
|
width *= window.devicePixelRatio;
|
||||||
|
height *= window.devicePixelRatio;
|
||||||
this.pickBufferScale =
|
this.pickBufferScale =
|
||||||
this.configService.getSceneConfig(id).pickBufferScale || 1;
|
this.configService.getSceneConfig(id).pickBufferScale || 1;
|
||||||
// 创建 picking framebuffer，后续实时 resize
|
// 创建 picking framebuffer，后续实时 resize
|
||||||
|
|
@ -76,9 +82,18 @@ export default class PickingService implements IPickingService {
|
||||||
this.alreadyInPicking = false;
|
this.alreadyInPicking = false;
|
||||||
}
|
}
|
||||||
private async pickingLayers(target: IInteractionTarget) {
|
private async pickingLayers(target: IInteractionTarget) {
|
||||||
const { getViewportSize, useFramebuffer, clear } = this.rendererService;
|
const {
|
||||||
const { width, height } = getViewportSize();
|
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) {
|
if (this.width !== width || this.height !== height) {
|
||||||
this.pickingFBO.resize({
|
this.pickingFBO.resize({
|
||||||
width: Math.round(width / this.pickBufferScale),
|
width: Math.round(width / this.pickBufferScale),
|
||||||
|
|
@ -113,8 +128,13 @@ export default class PickingService implements IPickingService {
|
||||||
{ x, y, lngLat, type }: IInteractionTarget,
|
{ x, y, lngLat, type }: IInteractionTarget,
|
||||||
) => {
|
) => {
|
||||||
let isPicked = false;
|
let isPicked = false;
|
||||||
const { getViewportSize, readPixels } = this.rendererService;
|
const { getViewportSize, readPixels, getContainer } = this.rendererService;
|
||||||
const { width, height } = getViewportSize();
|
let {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
} = (getContainer() as HTMLElement).getBoundingClientRect();
|
||||||
|
width *= window.devicePixelRatio;
|
||||||
|
height *= window.devicePixelRatio;
|
||||||
const { enableHighlight, enableSelect } = layer.getLayerConfig();
|
const { enableHighlight, enableSelect } = layer.getLayerConfig();
|
||||||
|
|
||||||
const xInDevicePixel = x * window.devicePixelRatio;
|
const xInDevicePixel = x * window.devicePixelRatio;
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue