diff --git a/docs/api/district/baselayer.zh.md b/docs/api/district/baselayer.zh.md new file mode 100644 index 0000000000..4a3c491614 --- /dev/null +++ b/docs/api/district/baselayer.zh.md @@ -0,0 +1,102 @@ +--- +title: 标准地图 +order: 2 +--- + +## 构造函数 + +参数： + +- 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 + +移除并销毁图层 diff --git a/docs/api/district/drilldown.zh.md b/docs/api/district/drilldown.zh.md index ae0ebfc946..aae604bc54 100644 --- a/docs/api/district/drilldown.zh.md +++ b/docs/api/district/drilldown.zh.md @@ -43,9 +43,9 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下 下钻各个层级的配置项，可以独立配置，每一层级的样式，不设置和上一层就保持一致 - joinBy: [string, string]; -- label: Partial; -- bubble: Partial; -- fill: Partial; +- label: `Partial`; +- bubble: `Partial`; +- fill: `Partial`; #### labelOption diff --git a/docs/api/district/province.zh.md b/docs/api/district/province.zh.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/api/district/start.en.md b/docs/api/district/start.en.md new file mode 100644 index 0000000000..4135346876 --- /dev/null +++ b/docs/api/district/start.en.md @@ -0,0 +1,171 @@ +--- +title: 快速开始 +order: 0 +--- + +地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 + +## 使用 + +**using modules** + +```javascript +import { WorldLayer } from '@antv/l7-district'; +``` + +**CDN 版本引用** + +CDN 引用所有的方法都在 L7.District 命名空间下。 + +```html + + + + +``` + +```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 `${props.Short_Name_ZH}`; + }, + }, +}); +``` + +⚠️⚠️⚠️ 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 + +移除并销毁图层 diff --git a/docs/api/district/start.zh.md b/docs/api/district/start.zh.md index f4c0c1f5a2..e7ca3aa303 100644 --- a/docs/api/district/start.zh.md +++ b/docs/api/district/start.zh.md @@ -24,74 +24,6 @@ import { WorldLayer } from '@antv/l7-district'; ⚠️⚠️⚠️ 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 数据需要跟用户的属性数据，通过关系字段进行连接 @@ -103,32 +35,3 @@ District 提供 polygon 数据需要跟用户的属性数据，通过关系字 - [市级行政区划及编码](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 - -移除并销毁图层 diff --git a/docs/api/district/world b/docs/api/district/world deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/package.json b/package.json index 8397effe25..ba53ec9f47 100644 --- a/package.json +++ b/package.json @@ -187,8 +187,5 @@ "tnpm": { "mode": "yarn" }, - "version": "0.0.0", - "dependencies": { - "babel-eslint": "7.2.3" - } + "version": "0.0.0" } diff --git a/packages/district/src/layer/drillDown.ts b/packages/district/src/layer/drillDown.ts index d7f246deba..dc42ae863f 100644 --- a/packages/district/src/layer/drillDown.ts +++ b/packages/district/src/layer/drillDown.ts @@ -48,7 +48,7 @@ export default class DrillDownLayer { drillDepth: 2, customTrigger: false, drillDownTriggerEvent: 'click', - drillUpTriggerEvent: 'unclick', + drillUpTriggerEvent: 'undblclick', provinceData: [], cityData: [], countyData: [], @@ -61,7 +61,7 @@ export default class DrillDownLayer { }; } public addCountryEvent() { - const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options; + const { drillDownTriggerEvent } = this.options; this.provinceLayer.fillLayer.on( drillDownTriggerEvent as string, (e: any) => { @@ -72,8 +72,8 @@ export default class DrillDownLayer { } public addProvinceEvent() { - const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options; - this.cityLayer.fillLayer.on(drillUpTriggleEvent as string, () => { + const { drillDownTriggerEvent, drillUpTriggerEvent } = this.options; + this.cityLayer.fillLayer.on(drillUpTriggerEvent as string, () => { this.drillUp(); }); this.cityLayer.fillLayer.on(drillDownTriggerEvent as string, (e: any) => { @@ -82,8 +82,8 @@ export default class DrillDownLayer { } public addCityEvent() { - const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options; - this.countyLayer.fillLayer.on(drillUpTriggleEvent as string, () => { + const { drillDownTriggerEvent, drillUpTriggerEvent } = this.options; + this.countyLayer.fillLayer.on(drillUpTriggerEvent as string, () => { this.drillUp(); }); } diff --git a/packages/district/src/layer/interface.ts b/packages/district/src/layer/interface.ts index d6c758edb2..ff9bc56841 100644 --- a/packages/district/src/layer/interface.ts +++ b/packages/district/src/layer/interface.ts @@ -107,7 +107,7 @@ export interface IDrillDownOption { drillDepth: 0 | 1 | 2; customTrigger: boolean; drillDownTriggerEvent: TriggeEventType; - drillUpTriggleEvent: TriggeEventType & DrillUpTriggeEventType; + drillUpTriggerEvent: TriggeEventType & DrillUpTriggeEventType; provinceData?: Array<{ [key: string]: any }>; cityData?: Array<{ [key: string]: any }>; countyData?: Array<{ [key: string]: any }>;