Merge pull request #399 from antvis/district

District
2020-06-10 20:24:49 +08:00 · 2020-06-10 20:24:49 +08:00 · 4c3b9897f8
parent b55052afa1 e972728bd4
commit 4c3b9897f8
17 changed files with 372 additions and 59 deletions
--- a/docs/api/district/baselayer.en.md
+++ b/docs/api/district/baselayer.en.md
@ -0,0 +1,114 @@
+---
+title: 标准地图
+order: 2
+---
+
+## 五种地图类型
+
+- WorldLayer 世界地图
+- CountryLayer 国家地图，目前只支持中国
+- ProvinceLayer 省级地图
+- CityLayer 市级地图
+- CountyLayer 县级地图
+
+## 构造函数
+
+参数：
+
+- 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 填充描边颜色 `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 关联字段 可选，如果不设置保持和初始化一致。
+
+#### show
+
+显示图层
+
+#### hide
+
+图层隐藏不显示
+
+#### destroy
+
+移除并销毁图层
--- a/docs/api/district/baselayer.zh.md
+++ b/docs/api/district/baselayer.zh.md
@ -3,6 +3,14 @@ title: 标准地图
 order: 2
 ---

+## 五种地图类型
+
+- WorldLayer 世界地图
+- CountryLayer 国家地图，目前只支持中国
+- ProvinceLayer 省级地图
+- CityLayer 市级地图
+- CountyLayer 县级地图
+
 ## 构造函数

 参数：
@ -16,6 +24,7 @@ order: 2
    对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
  - depth 数据显示层级 0：国家级，1:省级，2: 市级，3：线级
  - label 标注配置项 支持常量，不支持数据映射
+
    - enable `boolean` 是否显示标注
    - color 标注字体颜色 常量
    - field 标注字段 常量
@ -24,6 +33,7 @@ order: 2
    - strokeWidth 文字描边宽度
    - textAllowOverlap 是否允许文字压盖
    - opacity 标注透明度
+
  - fill 填充配置项 支持数据映射
    - color 图层填充颜色，支持常量和数据映射
      常量：统一设置成一样的颜色
@ -38,8 +48,8 @@ order: 2
    - size 气泡大小 支持常量、数据映射
    - shape 气泡形状 支持常量、数据映射
    - style 气泡图样式 同 PointLayer
-  - stroke 填充描边颜色
-  - strokeWidth 填充描边宽度
+  - stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
+  - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
  - autoFit 是否自动缩放到图层范围 `boolean`
  - popup 信息窗口

@ -47,18 +57,20 @@ order: 2
    - triggerEvent 触发事件 例如 'mousemove' | 'click';
    - Html popup html 字符串，支持回调函数 (properties: any) => string;

-  - chinaNationalStroke 中国国界线颜色
-  - chinaNationalWidth 中国国界线宽度
-  - coastlineStroke 海岸线颜色
+  - chinaNationalStroke 中国国界线颜色 `CountryLayer`
+  - chinaNationalWidth 中国国界线宽度 `CountryLayer`
+  - coastlineStroke 海岸线颜色 `CountryLayer`
  - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
  - nationalWidth 国界线 `WorldLayer` `CountryLayer`
  - nationalStroke 国界线 `WorldLayer` `CountryLayer`
-  - provinceStroke 省界颜色 `CountryLayer`
-  - provinceStrokeWidth 省界宽度 `CountryLayer`
-  - cityStroke 市级边界颜色 `CountryLayer`
-  - cityStrokeWidth 市级边界宽度 `CountryLayer`
-  - countyStroke 县级边界颜色 `CountryLayer`
-  - countyStrokeWidth 县级边界宽度 `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 配置。

 ### 数据

--- a/docs/api/district/drilldown.en.md
+++ b/docs/api/district/drilldown.en.md
@ -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
+
+移除并销毁图层
--- a/docs/api/district/drilldown.zh.md
+++ b/docs/api/district/drilldown.zh.md
@ -47,6 +47,17 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
 - bubble: `Partial<IBubbleOption>`;
 - fill: `Partial<IFillOptions>`;

+⛔ 中国地图视角设置，省界，海岸线，宽度通过以下属性
+
+- chinaNationalStroke 中国国界线颜色
+- chinaNationalWidth 中国国界线宽度
+- coastlineStroke 海岸线颜色
+- coastlineWidth 海岸线宽度
+- nationalWidth 国界线
+- nationalStroke 国界线
+- provinceStroke 省界颜色
+- provinceStrokeWidth 省界宽度
+
 #### labelOption

 文本标注配置项，目前只支持常量配置，不支持数据映射
--- a/docs/api/layer/layer.en.md
+++ b/docs/api/layer/layer.en.md
@ -10,12 +10,7 @@ L7 Layer 接口设计遵循图形语法，所有图层都继承于该基类。
 语法示例

 ```javascript
-const layer = new Layer(option)
-  .source()
-  .color()
-  .size()
-  .shape()
-  .style();
+const layer = new Layer(option).source().color().size().shape().style();

 scene.addLayer(layer);
 ```
@ -83,7 +78,7 @@ layer.source(data, {
  transforms: [
    {
      type: 'map',
-      callback: function(item) {
+      callback: function (item) {
        const [x, y] = item.coordinates;
        item.lat = item.lat * 1;
        item.lng = item.lng * 1;
--- a/docs/api/layer/layer.zh.md
+++ b/docs/api/layer/layer.zh.md
@ -10,12 +10,7 @@ L7 Layer 接口设计遵循图形语法，所有图层都继承于该基类。
 语法示例

 ```javascript
-const layer = new Layer(option)
-  .source()
-  .color()
-  .size()
-  .shape()
-  .style();
+const layer = new Layer(option).source().color().size().shape().style();

 scene.addLayer(layer);
 ```
@ -87,7 +82,7 @@ layer.source(data, {
  transforms: [
    {
      type: 'map',
-      callback: function(item) {
+      callback: function (item) {
        const [x, y] = item.coordinates;
        item.lat = item.lat * 1;
        item.lng = item.lng * 1;
--- a/examples/district/basic/API.zh.md
+++ b/examples/district/basic/API.zh.md
@ -64,26 +64,28 @@ District 支持下面几种图
    - size 气泡大小 支持常量、数据映射
    - shape 气泡形状 支持常量、数据映射
    - style 气泡图样式 同 PointLayer
-  - stroke 填充描边颜色 
-  - strokeWidth 填充描边宽度
+  - stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
+  - strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
  - autoFit 是否自动缩放到图层范围 `boolean`
  - popup 信息窗口
      - enable 是否开启 `boolean`
      - triggerEvent 触发事件 例如 'mousemove' | 'click';
      - Html popup html字符串，支持回调函数  (properties: any) => string;

-  - chinaNationalStroke 中国国界线颜色
-  - chinaNationalWidth 中国国界线宽度
-  - coastlineStroke 海岸线颜色
+  - chinaNationalStroke 中国国界线颜色 `CountryLayer`
+  - chinaNationalWidth 中国国界线宽度 `CountryLayer`
+  - coastlineStroke 海岸线颜色  `CountryLayer`
  - coastlineWidth 海岸线宽度 `WorldLayer` `CountryLayer`
  - nationalWidth 国界线 `WorldLayer` `CountryLayer`
  - nationalStroke 国界线 `WorldLayer` `CountryLayer`
-  - provinceStroke 省界颜色 `CountryLayer`
-  - provinceStrokeWidth 省界宽度 `CountryLayer`
-  - cityStroke 市级边界颜色 `CountryLayer`
-  - cityStrokeWidth 市级边界宽度 `CountryLayer`
-  - countyStroke 县级边界颜色 `CountryLayer`
-  - countyStrokeWidth 县级边界宽度  `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数据需要跟用户的属性数据，通过关系字段进行连接
--- a/examples/district/drill/API.zh.md
+++ b/examples/district/drill/API.zh.md
@ -38,6 +38,15 @@ DrillDownLayer 提供默认提供通过Layer的交互事件，实现上钻下钻
  - label: Partial<ILabelOption>;
  - bubble: Partial<IBubbleOption>;
  - fill: Partial<IFillOptions>;
+   ⛔中国地图视角设置，省界，海岸线，宽度通过以下属性
+  - chinaNationalStroke 中国国界线颜色 
+  - chinaNationalWidth 中国国界线宽度 
+  - coastlineStroke 海岸线颜色 
+  - coastlineWidth 海岸线宽度 
+  - nationalWidth 国界线 
+  - nationalStroke 国界线 
+  - provinceStroke 省界颜色 
+  - provinceStrokeWidth 省界宽度 

 #### labelOption
  文本标注配置项，目前只支持常量配置，不支持数据映射
--- a/packages/boundry/src/layer/baseLayer.ts
+++ b/packages/boundry/src/layer/baseLayer.ts
@ -94,6 +94,7 @@ export default class BaseLayer extends EventEmitter {
  protected getDefaultOption(): IDistrictLayerOption {
    return {
      zIndex: 0,
+      visible: true,
      geoDataLevel: 2,
      depth: 1,
      adcode: [],
@ -156,10 +157,11 @@ export default class BaseLayer extends EventEmitter {

  protected addFillLayer(fillCountry: any) {
    // 添加省份填充
-    const { popup, data = [], fill, autoFit, joinBy } = this.options;
+    const { popup, data = [], fill, autoFit, joinBy, visible } = this.options;
    this.fillData = fillCountry;
    const fillLayer = new PolygonLayer({
      autoFit,
+      visible,
    }).source(fillCountry, {
      transforms:
        data.length === 0
@ -206,9 +208,10 @@ export default class BaseLayer extends EventEmitter {
  }

  protected addFillLine(provinceLine: any) {
-    const { stroke, strokeWidth, zIndex } = this.options;
+    const { stroke, strokeWidth, zIndex, visible } = this.options;
    const layer2 = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(provinceLine)
      .color(stroke)
@ -229,9 +232,10 @@ export default class BaseLayer extends EventEmitter {
  }

  protected addBubbleLayer(labelData: any, type: string = 'json') {
-    const { bubble, zIndex, data = [], joinBy } = this.options;
+    const { bubble, zIndex, data = [], joinBy, visible } = this.options;
    const bubbleLayer = new PointLayer({
      zIndex: zIndex + 0.3,
+      visible,
    }).source(labelData, {
      parser: {
        type,
@ -265,9 +269,10 @@ export default class BaseLayer extends EventEmitter {
  }

  protected addLabel(labelData: any, type: string = 'json') {
-    const { label, zIndex } = this.options;
+    const { label, zIndex, visible } = this.options;
    const labelLayer = new PointLayer({
      zIndex: zIndex + 0.4,
+      visible,
    })
      .source(labelData, {
        parser: {
--- a/packages/boundry/src/layer/country.ts
+++ b/packages/boundry/src/layer/country.ts
@ -129,11 +129,13 @@ export default class CountryLayer extends BaseLayer {
      coastlineWidth,
      stroke,
      strokeWidth,
+      visible,
      zIndex,
    } = this.options;
    // 添加国界线
    const lineLayer = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(boundaries)
      .size('type', (v: string) => {
@ -162,6 +164,7 @@ export default class CountryLayer extends BaseLayer {
    // 添加未定国界
    const lineLayer2 = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(boundaries2)
      .size(chinaNationalWidth)
@ -175,6 +178,7 @@ export default class CountryLayer extends BaseLayer {
    // 添加澳门香港界限
    const lineLayer3 = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(boundaries3)
      .size(provinceStrokeWidth)
@ -193,9 +197,10 @@ export default class CountryLayer extends BaseLayer {
  // 市边界
  private async addCityBorder(cfg: any) {
    const border1 = await this.fetchData(cfg);
-    const { cityStroke, cityStrokeWidth } = this.options;
+    const { cityStroke, cityStrokeWidth, visible } = this.options;
    const cityline = new LineLayer({
      zIndex: 2,
+      visible,
    })
      .source(border1)
      .color(cityStroke)
@ -210,9 +215,10 @@ export default class CountryLayer extends BaseLayer {
  // 县级边界
  private async addCountyBorder(cfg: any) {
    const border1 = await this.fetchData(cfg);
-    const { countyStrokeWidth, countyStroke } = this.options;
+    const { countyStrokeWidth, countyStroke, visible } = this.options;
    const cityline = new LineLayer({
      zIndex: 2,
+      visible,
    })
      .source(border1)
      .color(countyStroke)
@ -244,9 +250,10 @@ export default class CountryLayer extends BaseLayer {
  }

  private addText(labelData: any, option: any, offset: [number, number]) {
-    const { label, zIndex } = this.options;
+    const { label, zIndex, visible } = this.options;
    const labelLayer = new PointLayer({
      zIndex: zIndex + 0.4,
+      visible,
      ...option,
    })
      .source(labelData, {
--- a/packages/boundry/src/layer/interface.ts
+++ b/packages/boundry/src/layer/interface.ts
@ -73,6 +73,7 @@ export interface IBubbleOption {
 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];
--- a/packages/boundry/src/layer/world.ts
+++ b/packages/boundry/src/layer/world.ts
@ -73,11 +73,13 @@ export default class WorldLayer extends BaseLayer {
      chinaNationalStroke,
      chinaNationalWidth,
      coastlineWidth,
+      visible,
      zIndex,
    } = this.options;
    // 添加国界线
    const lineLayer = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(boundaries)
      // .size(0.6)
@ -106,6 +108,7 @@ export default class WorldLayer extends BaseLayer {
    // 添加未定国界
    const lineLayer2 = new LineLayer({
      zIndex: zIndex + 0.1,
+      visible,
    })
      .source(boundaries2)
      .size('type', (v: string) => {
--- a/packages/layers/src/line/shaders/line_arc_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc_vert.glsl
@ -48,7 +48,7 @@ vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {
  vec2 dir_screenspace = normalize(line_clipspace);
  // rotate by 90 degrees
   dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
-  vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0;
+  vec2 offset = dir_screenspace * offset_direction * setPickingSize(a_Size) / 2.0;
  return offset;
 }
 vec2 getNormal(vec2 line_clipspace, float offset_direction) {
--- a/stories/Components/components/Zoom.tsx
+++ b/stories/Components/components/Zoom.tsx
@ -30,14 +30,9 @@ export default class ZoomComponent extends React.Component {
    this.scene = scene;
    const layer = new PolygonLayer({});

-    layer
-      .source(data)
-      .color('#fff')
-      .shape('name', 'text')
-      .size(16)
-      .style({
-        opacity: 1.0,
-      });
+    layer.source(data).color('#fff').shape('name', 'text').size(16).style({
+      opacity: 1.0,
+    });
    scene.addLayer(layer);
    const zoomControl = new Zoom({
      position: 'bottomright',
--- a/stories/District/Layer/Country.tsx
+++ b/stories/District/Layer/Country.tsx
@ -197,6 +197,7 @@ export default class Country extends React.Component {
    ];
    scene.on('loaded', () => {
      const Layer = new CountryLayer(scene, {
+        visible: false,
        data: ProvinceData,
        joinBy: ['NAME_CHN', 'name'],
        // label: {
--- a/stories/District/Layer/drillDown.tsx
+++ b/stories/District/Layer/drillDown.tsx
@ -35,12 +35,15 @@ export default class Country extends React.Component {
          color: {
            field: 'NAME_CHN',
            values: [
-              '#feedde',
-              '#fdd0a2',
-              '#fdae6b',
-              '#fd8d3c',
-              '#e6550d',
-              '#a63603',
+              '#f7fbff',
+              '#deebf7',
+              '#c6dbef',
+              '#9ecae1',
+              '#6baed6',
+              '#4292c6',
+              '#2171b5',
+              '#08519c',
+              '#08306b',
            ],
          },
        },
--- a/stories/Layers/components/Arc2DLine.tsx
+++ b/stories/Layers/components/Arc2DLine.tsx
@ -25,6 +25,7 @@ export default class Arc2DLineDemo extends React.Component {
    });
    const lineLayer = new LineLayer({
      blend: 'normal',
+      pickingBuffer: 10,
    })
      .source(
        [
@ -48,7 +49,7 @@ export default class Arc2DLineDemo extends React.Component {
      .size(2)
      .shape('arc')
      .animate({
-        enable: true,
+        enable: false,
        interval: 0.1,
        trailLength: 0.5,
        duration: 0.5,