From cc4292ff2f148b0736886e9e71beeb9792476ef3 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 15 May 2020 21:07:04 +0800 Subject: [PATCH] feat(distict): add bubble map --- docs/api/district/drilldown.zh.md | 148 ++++++++++ docs/api/district/province.zh.md | 0 docs/api/district/start.zh.md | 134 +++++++++ docs/api/district/world | 0 examples/district/basic/API.zh.md | 119 +++++++- examples/district/basic/demo/china_map.js | 20 +- examples/district/basic/demo/city.js | 19 +- examples/district/basic/demo/county.js | 20 +- examples/district/basic/demo/meta.json | 6 - examples/district/basic/demo/province.js | 20 +- examples/district/basic/demo/world_map.js | 20 +- examples/district/basic/index.en.md | 2 +- examples/district/basic/index.zh.md | 4 +- examples/district/bubble/API.en.md | 0 examples/district/bubble/API.zh.md | 117 ++++++++ examples/district/bubble/demo/china_bubble.js | 210 ++++++++++++++ examples/district/bubble/demo/city.js | 57 ++++ examples/district/bubble/demo/county.js | 44 +++ examples/district/bubble/demo/meta.json | 33 +++ examples/district/bubble/demo/province.js | 62 ++++ examples/district/bubble/demo/world_map.js | 45 +++ examples/district/bubble/index.en.md | 4 + examples/district/bubble/index.zh.md | 4 + examples/district/drill/API.en.md | 0 examples/district/drill/API.zh.md | 127 ++++++++ .../{basic => drill}/demo/drill_down.js | 20 +- .../district/drill/demo/drill_down_bubble.js | 40 +++ examples/district/drill/demo/meta.json | 18 ++ examples/district/drill/index.en.md | 4 + examples/district/drill/index.zh.md | 4 + examples/district/react/demo/city.tsx | 20 +- examples/district/react/demo/county.tsx | 22 +- examples/district/react/demo/province.tsx | 24 +- examples/district/react/index.zh.md | 2 +- examples/draw/UI/API.zh.md | 68 ++--- examples/draw/basic/API.en.md | 272 ++++++++++++++++++ examples/draw/basic/API.zh.md | 209 ++++++++++++++ examples/draw/basic/demo/meta.json | 4 +- examples/draw/basic/design.en.md | 3 + examples/draw/basic/design.zh.md | 54 ++++ gatsby-config.js | 8 + packages/district/rollup.config.js | 2 +- packages/district/src/config.ts | 2 +- packages/district/src/layer/baseLayer.ts | 123 ++++++-- packages/district/src/layer/country.ts | 14 +- packages/district/src/layer/drillDown.ts | 190 +++++++----- packages/district/src/layer/interface.ts | 102 ++++++- packages/district/src/layer/province.ts | 20 +- packages/district/src/layer/world.ts | 4 +- packages/draw/src/draw_control.ts | 11 +- stories/District/Layer/Country.tsx | 20 +- stories/District/Layer/Country2.tsx | 40 +-- stories/District/Layer/city.tsx | 24 +- stories/District/Layer/country_bubble.tsx | 235 +++++++++++++++ stories/District/Layer/country_city.tsx | 21 +- stories/District/Layer/country_county.tsx | 21 +- stories/District/Layer/county.tsx | 20 +- stories/District/Layer/drillDown.tsx | 23 +- stories/District/Layer/province.tsx | 23 +- stories/District/Layer/world.tsx | 23 +- stories/District/district.stories.tsx | 2 + stories/Layers/components/PointImage.tsx | 45 +-- 62 files changed, 2559 insertions(+), 393 deletions(-) create mode 100644 docs/api/district/drilldown.zh.md create mode 100644 docs/api/district/province.zh.md create mode 100644 docs/api/district/start.zh.md create mode 100644 docs/api/district/world create mode 100644 examples/district/bubble/API.en.md create mode 100644 examples/district/bubble/API.zh.md create mode 100644 examples/district/bubble/demo/china_bubble.js create mode 100644 examples/district/bubble/demo/city.js create mode 100644 examples/district/bubble/demo/county.js create mode 100644 examples/district/bubble/demo/meta.json create mode 100644 examples/district/bubble/demo/province.js create mode 100644 examples/district/bubble/demo/world_map.js create mode 100644 examples/district/bubble/index.en.md create mode 100644 examples/district/bubble/index.zh.md create mode 100644 examples/district/drill/API.en.md create mode 100644 examples/district/drill/API.zh.md rename examples/district/{basic => drill}/demo/drill_down.js (72%) create mode 100644 examples/district/drill/demo/drill_down_bubble.js create mode 100644 examples/district/drill/demo/meta.json create mode 100644 examples/district/drill/index.en.md create mode 100644 examples/district/drill/index.zh.md create mode 100644 examples/draw/basic/API.en.md create mode 100644 examples/draw/basic/API.zh.md create mode 100644 examples/draw/basic/design.en.md create mode 100644 examples/draw/basic/design.zh.md create mode 100644 stories/District/Layer/country_bubble.tsx diff --git a/docs/api/district/drilldown.zh.md b/docs/api/district/drilldown.zh.md new file mode 100644 index 0000000000..ae0ebfc946 --- /dev/null +++ b/docs/api/district/drilldown.zh.md @@ -0,0 +1,148 @@ +--- +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; +- bubble: Partial; +- fill: Partial; + +#### 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 + +移除并销毁图层 diff --git a/docs/api/district/province.zh.md b/docs/api/district/province.zh.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/docs/api/district/start.zh.md b/docs/api/district/start.zh.md new file mode 100644 index 0000000000..f4c0c1f5a2 --- /dev/null +++ b/docs/api/district/start.zh.md @@ -0,0 +1,134 @@ +--- +title: 快速开始 +order: 0 +--- + +地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 + +## 使用 + +**using modules** + +```javascript +import { WorldLayer } from '@antv/l7-district'; +``` + +**CDN 版本引用** + +```html + + + + +``` + +⚠️⚠️⚠️ 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/world b/docs/api/district/world new file mode 100644 index 0000000000..e69de29bb2 diff --git a/examples/district/basic/API.zh.md b/examples/district/basic/API.zh.md index d1da667202..e43e583c33 100644 --- a/examples/district/basic/API.zh.md +++ b/examples/district/basic/API.zh.md @@ -3,6 +3,121 @@ title: API --- 地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 -## 配置项 +## 使用 + +**using modules** + +```javascript +import { WorldLayer } from '@antv/l7-district'; +``` + +**CDN 版本引用** + +```html + + + + +``` +⚠️⚠️⚠️ 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/examples/district/basic/demo/china_map.js b/examples/district/basic/demo/china_map.js index 0c14e62874..dd39e32f19 100644 --- a/examples/district/basic/demo/china_map.js +++ b/examples/district/basic/demo/china_map.js @@ -195,15 +195,17 @@ scene.on('loaded', () => { // }, depth: 1, fill: { - field: 'value', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + color: { + field: 'value', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603' + ] + } }, popup: { enable: true, diff --git a/examples/district/basic/demo/city.js b/examples/district/basic/demo/city.js index 9ddffa8f9e..21a132c2e7 100644 --- a/examples/district/basic/demo/city.js +++ b/examples/district/basic/demo/city.js @@ -37,15 +37,16 @@ async function initMap() { textAllowOverlap: false }, fill: { - field: 'pop', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + color: { field: 'pop', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603' + ] + } }, popup: { enable: true, diff --git a/examples/district/basic/demo/county.js b/examples/district/basic/demo/county.js index 84fda95326..d0ee582125 100644 --- a/examples/district/basic/demo/county.js +++ b/examples/district/basic/demo/county.js @@ -21,15 +21,17 @@ scene.on('loaded', () => { field: 'NAME_CHN' }, fill: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603' + ] + } }, popup: { enable: true, diff --git a/examples/district/basic/demo/meta.json b/examples/district/basic/demo/meta.json index 2e190fdffc..14adf85627 100644 --- a/examples/district/basic/demo/meta.json +++ b/examples/district/basic/demo/meta.json @@ -4,7 +4,6 @@ "en": "District" }, "demos": [ - { "filename": "china_map.js", "title": "中国地图", @@ -29,11 +28,6 @@ "filename": "county.js", "title": "中国县地图", "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*iVwLSpIf_ckAAAAAAAAAAABkARQnAQ" - }, - { - "filename": "drill_down.js", - "title": "中国地图上钻下取", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ" } ] } diff --git a/examples/district/basic/demo/province.js b/examples/district/basic/demo/province.js index 05b5542977..41804b897f 100644 --- a/examples/district/basic/demo/province.js +++ b/examples/district/basic/demo/province.js @@ -37,15 +37,17 @@ async function initMap() { textAllowOverlap: false }, fill: { - field: 'pop', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + color: { + field: 'pop', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603' + ] + } }, popup: { enable: true, diff --git a/examples/district/basic/demo/world_map.js b/examples/district/basic/demo/world_map.js index 6f16dd7855..3bf88ac21c 100644 --- a/examples/district/basic/demo/world_map.js +++ b/examples/district/basic/demo/world_map.js @@ -16,15 +16,17 @@ scene.on('loaded', () => { new WorldLayer(scene, { data: [], fill: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603' + ] + } }, stroke: '#ccc', label: { diff --git a/examples/district/basic/index.en.md b/examples/district/basic/index.en.md index 1040d80f83..c8af4d906c 100644 --- a/examples/district/basic/index.en.md +++ b/examples/district/basic/index.en.md @@ -1,4 +1,4 @@ --- title: L7 District -order: 3 +order: 0 --- diff --git a/examples/district/basic/index.zh.md b/examples/district/basic/index.zh.md index e2595f8e7f..afba1bfa88 100644 --- a/examples/district/basic/index.zh.md +++ b/examples/district/basic/index.zh.md @@ -1,4 +1,4 @@ --- -title: 基础组件 -order: 3 +title: 填充图 +order: 1 --- diff --git a/examples/district/bubble/API.en.md b/examples/district/bubble/API.en.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/examples/district/bubble/API.zh.md b/examples/district/bubble/API.zh.md new file mode 100644 index 0000000000..acf408838b --- /dev/null +++ b/examples/district/bubble/API.zh.md @@ -0,0 +1,117 @@ +--- +title: API +--- +地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。 + +## 使用 + +**using modules** + +```javascript +import { WorldLayer } from '@antv/l7-district'; +``` + +**CDN 版本引用** + +```html + + + + +``` +⚠️⚠️⚠️ 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 + +移除并销毁图层 + diff --git a/examples/district/bubble/demo/china_bubble.js b/examples/district/bubble/demo/china_bubble.js new file mode 100644 index 0000000000..f0195bc8ae --- /dev/null +++ b/examples/district/bubble/demo/china_bubble.js @@ -0,0 +1,210 @@ +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, + fill: { + color: '#ccc' + }, + bubble: { + enable: true, + size: { + field: 'value', + values: [ 3, 20 ] + } + }, + popup: { + enable: true, + Html: props => { + return `${props.NAME_CHN}:${props.value}`; + } + } + }); +}); diff --git a/examples/district/bubble/demo/city.js b/examples/district/bubble/demo/city.js new file mode 100644 index 0000000000..c76210997a --- /dev/null +++ b/examples/district/bubble/demo/city.js @@ -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 `${props.NAME_CHN}:${props.pop}`; + } + } + }); + }); + +} + +initMap(); diff --git a/examples/district/bubble/demo/county.js b/examples/district/bubble/demo/county.js new file mode 100644 index 0000000000..12a5f05f03 --- /dev/null +++ b/examples/district/bubble/demo/county.js @@ -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 `${props.NAME_CHN}`; + } + } + }); +}); diff --git a/examples/district/bubble/demo/meta.json b/examples/district/bubble/demo/meta.json new file mode 100644 index 0000000000..3182e5e9c5 --- /dev/null +++ b/examples/district/bubble/demo/meta.json @@ -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" + } + ] +} diff --git a/examples/district/bubble/demo/province.js b/examples/district/bubble/demo/province.js new file mode 100644 index 0000000000..5768e7af73 --- /dev/null +++ b/examples/district/bubble/demo/province.js @@ -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 `${props.NAME_CHN}:${props.pop}`; + } + } + }); + }); +} +initMap(); diff --git a/examples/district/bubble/demo/world_map.js b/examples/district/bubble/demo/world_map.js new file mode 100644 index 0000000000..0191718de6 --- /dev/null +++ b/examples/district/bubble/demo/world_map.js @@ -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: 'Short_Name_ZH' + }, + popup: { + enable: false, + Html: props => { + return `${props.Short_Name_ZH}`; + } + } + }); +}); diff --git a/examples/district/bubble/index.en.md b/examples/district/bubble/index.en.md new file mode 100644 index 0000000000..c8af4d906c --- /dev/null +++ b/examples/district/bubble/index.en.md @@ -0,0 +1,4 @@ +--- +title: L7 District +order: 0 +--- diff --git a/examples/district/bubble/index.zh.md b/examples/district/bubble/index.zh.md new file mode 100644 index 0000000000..094f8ed0e0 --- /dev/null +++ b/examples/district/bubble/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 气泡图 +order: 2 +--- diff --git a/examples/district/drill/API.en.md b/examples/district/drill/API.en.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/examples/district/drill/API.zh.md b/examples/district/drill/API.zh.md new file mode 100644 index 0000000000..8278d26068 --- /dev/null +++ b/examples/district/drill/API.zh.md @@ -0,0 +1,127 @@ +## 钻取地图 +钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（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; + - bubble: Partial; + - fill: Partial; + +#### 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 + 移除并销毁图层 + + diff --git a/examples/district/basic/demo/drill_down.js b/examples/district/drill/demo/drill_down.js similarity index 72% rename from examples/district/basic/demo/drill_down.js rename to examples/district/drill/demo/drill_down.js index 982e9e893c..07a54aad09 100644 --- a/examples/district/basic/demo/drill_down.js +++ b/examples/district/drill/demo/drill_down.js @@ -17,15 +17,17 @@ scene.on('loaded', () => { data: [], depth: 1, fill: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603' - ] + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603' + ] + } }, popup: { enable: true, diff --git a/examples/district/drill/demo/drill_down_bubble.js b/examples/district/drill/demo/drill_down_bubble.js new file mode 100644 index 0000000000..16d7c34157 --- /dev/null +++ b/examples/district/drill/demo/drill_down_bubble.js @@ -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 `${props.NAME_CHN}`; + } + } + }); +}); diff --git a/examples/district/drill/demo/meta.json b/examples/district/drill/demo/meta.json new file mode 100644 index 0000000000..1097c182f3 --- /dev/null +++ b/examples/district/drill/demo/meta.json @@ -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_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/district/drill/index.en.md b/examples/district/drill/index.en.md new file mode 100644 index 0000000000..89168e977b --- /dev/null +++ b/examples/district/drill/index.en.md @@ -0,0 +1,4 @@ +--- +title: Drill Down +order: 0 +--- diff --git a/examples/district/drill/index.zh.md b/examples/district/drill/index.zh.md new file mode 100644 index 0000000000..9b4649075f --- /dev/null +++ b/examples/district/drill/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 钻取地图 +order: 3 +--- diff --git a/examples/district/react/demo/city.tsx b/examples/district/react/demo/city.tsx index 81a5126c59..c9c7e98a47 100644 --- a/examples/district/react/demo/city.tsx +++ b/examples/district/react/demo/city.tsx @@ -58,15 +58,17 @@ class City extends React.Component { textAllowOverlap: false, }, fill: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, popup: { enable: true, diff --git a/examples/district/react/demo/county.tsx b/examples/district/react/demo/county.tsx index ab39043acc..03a8b3f045 100644 --- a/examples/district/react/demo/county.tsx +++ b/examples/district/react/demo/county.tsx @@ -44,15 +44,17 @@ export default class County extends React.Component { field: 'NAME_CHN', }, fill: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603' + ] + } }, popup: { enable: true, @@ -100,4 +102,4 @@ export default class County extends React.Component { }; } -ReactDOM.render(, document.getElementById('map')); \ No newline at end of file +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/district/react/demo/province.tsx b/examples/district/react/demo/province.tsx index fc79d47652..1dc55d3aba 100644 --- a/examples/district/react/demo/province.tsx +++ b/examples/district/react/demo/province.tsx @@ -1,9 +1,9 @@ import { Scene } from '@antv/l7'; import { ProvinceLayer } from '@antv/l7-district'; import { GaodeMap, Mapbox } from '@antv/l7-maps'; -import ReactDOM from 'react-dom'; import { Select } from 'antd'; import * as React from 'react'; +import ReactDOM from 'react-dom'; const { Option } = Select; const ProvinceData = [ @@ -223,15 +223,17 @@ class Province extends React.Component { textAllowOverlap: false, }, fill: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, popup: { enable: true, @@ -287,4 +289,4 @@ class Province extends React.Component { this.provinceLayer.updateDistrict([value]); }; } -ReactDOM.render(, document.getElementById('map')) \ No newline at end of file +ReactDOM.render(, document.getElementById('map')); diff --git a/examples/district/react/index.zh.md b/examples/district/react/index.zh.md index 9d6495f642..241f08b6d5 100644 --- a/examples/district/react/index.zh.md +++ b/examples/district/react/index.zh.md @@ -1,4 +1,4 @@ --- title: React 组件 -order: 3 +order: 4 --- diff --git a/examples/draw/UI/API.zh.md b/examples/draw/UI/API.zh.md index 9272b12b9c..df9e85b770 100644 --- a/examples/draw/UI/API.zh.md +++ b/examples/draw/UI/API.zh.md @@ -90,75 +90,39 @@ scene.addControl(control); scene.removeControl(control); ``` -### Draw Type +## 方法 -可以不依赖 Draw UI 组件，独立的使用每一个 Draw +### getDraw(type) -#### DrawCircle +获取 draw 实例 -绘制圆形 +参数： type 绘制实例 `point|line|polygon|rect| circle` ```javascript -import { DrawCircle } from '@antv/l7-draw'; -const drawCircle = new DrawCircle(scene); -drawCircle.enable(); +const pointDraw = drawcontrol.get('point'); ``` -#### DrawRect +### getAllData() -绘制四边形 +获取每个 Draw 实例绘制的结果数据 + +返回数据格式如下 ```javascript -import { DrawRect } from '@antv/l7-draw'; -const drawRect = new DrawRect(scene); -drawRect.enable(); +{ + point: []; // geojson数据格式 + line: []; +} ``` -#### DrawLine +### removeAllData() -绘制路径 +移除绘制的的所有数据 ```javascript -import { DrawLine } from '@antv/l7-draw'; -const drawLine = new DrawLine(scene); -drawLine.enable(); +drawcontrol.removeAllData(); ``` -#### DrawPoint - -绘制点 - -```javascript -import { DrawPoint } from '@antv/l7-draw'; -const drawPoint = new DrawPoint(scene); -drawPoint.enable(); -``` - -#### DrawPolygon - -绘制多边形 - -```javascript -import { DrawPolygon } from '@antv/l7-draw'; -const drawPoint = new DrawPolygon(scene); -drawPoint.enable(); -``` - -### 配置项 DrawOption - -- editEnable boolean 是否允许编辑 -- selectEnable boolean 是否允许选中 - -### 方法 - -#### enable - -开始编辑，绘制完成之后会自动结束。 - -#### disable - -结束编辑 - ### 事件 #### draw.create diff --git a/examples/draw/basic/API.en.md b/examples/draw/basic/API.en.md new file mode 100644 index 0000000000..9272b12b9c --- /dev/null +++ b/examples/draw/basic/API.en.md @@ -0,0 +1,272 @@ +--- +title: API +--- +地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 + +# 使用 + +**using modules** + +```javascript +import { DrawControl } from '@antv/l7-draw'; +``` + +**CDN 版本引用** + +```html + + + + +``` + +### 参数 + +```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: {}, + }, + }, +}; +``` diff --git a/examples/draw/basic/API.zh.md b/examples/draw/basic/API.zh.md new file mode 100644 index 0000000000..65727306af --- /dev/null +++ b/examples/draw/basic/API.zh.md @@ -0,0 +1,209 @@ +--- +title: API +--- +地图绘制组件，支持点、线、面， 圆、矩形、的绘制编辑。 + +# 使用 + +**using modules** + +```javascript +import { DrawControl } from '@antv/l7-draw'; +``` + +**CDN 版本引用** + +```html + + + + +``` + +### 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: {}, + }, + }, +}; +``` diff --git a/examples/draw/basic/demo/meta.json b/examples/draw/basic/demo/meta.json index 7cd9438900..bf5ff46494 100644 --- a/examples/draw/basic/demo/meta.json +++ b/examples/draw/basic/demo/meta.json @@ -8,12 +8,12 @@ { "filename": "draw_circle.js", "title": "绘制圆", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nMVTRY3xCuoAAAAAAAAAAABkARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*pawjTqbwM4gAAAAAAAAAAABkARQnAQ" }, { "filename": "draw_polygon.js", "title": "绘制多边形", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nMVTRY3xCuoAAAAAAAAAAABkARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*m1eqS4gwgz4AAAAAAAAAAABkARQnAQ" } ] } diff --git a/examples/draw/basic/design.en.md b/examples/draw/basic/design.en.md new file mode 100644 index 0000000000..7f99ea18d5 --- /dev/null +++ b/examples/draw/basic/design.en.md @@ -0,0 +1,3 @@ +--- +title: introduction +--- diff --git a/examples/draw/basic/design.zh.md b/examples/draw/basic/design.zh.md new file mode 100644 index 0000000000..08d890eb99 --- /dev/null +++ b/examples/draw/basic/design.zh.md @@ -0,0 +1,54 @@ +--- +title: 如何使用 +--- +图形绘制包括4种状态 + +- 绘制 绘制图形 +- 选中 平移图形 +- 编辑 图形顶点编辑 +- 完成态 绘制完成，点击进入选中太 + + +### 绘制圆 + + #### 绘制态 + +1. 点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ)地图生成第一个点既圆心 +2. 拖动，![l7-draw-move](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*eVVASaKz79UAAAAAAAAAAABkARQnAQ)拖动过程中根据当前点实时计算距离圆心的距离，生成当前圆 +3. 拖动结束，绘制完成，进入选中状态 + +#### 选中态 + + 鼠标点击图形进入编辑态，鼠标点击图形外部，取消选中 + +1. 鼠标 mouseenter 图形鼠标 move +2. 拖到鼠标即可实现图形的平移 +3. 鼠标点击图形进入编辑态，鼠标点击图形外部 + +#### 编辑态 + +鼠标点击图形外部，完成编辑 + +1. 鼠标滑入顶点，鼠标变成 move +1. 拖动顶点即可改变圆的半径 + +### 绘制多边形 + + #### 绘制态 + 1. 点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ) 生成第一个点 + 2. 连续点击，![l7-draw-cross](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*UnSAS6X_3AQAAAAAAAAAAABkARQnAQ) 依次生成多边形的点序列，点击过程中会始终显示第一个点和最后一个点 + 3. 结束，双击地图结束，或者点击第一个点或最后一个点结束 ![l7-draw-pointer](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*3siqTqg0oX4AAAAAAAAAAABkARQnAQ) + + #### 选中态 + + 鼠标点击图形进入选中态，选中态可对图形平移，鼠标点击图形外部，取消选中 + + #### 编辑态 + + 鼠标点击图形进入编辑态，编辑态会标注多边形顶点，和各个顶点的中心点 + 鼠标点击图形外部，取消选中 + + 1. 添加顶点，点击中心点![l7-draw-pointer](https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*3siqTqg0oX4AAAAAAAAAAABkARQnAQ)，为多边形新增一个顶点 + 2. 移动顶点，拖动顶点可对顶点移动 + + diff --git a/gatsby-config.js b/gatsby-config.js index 670c52111d..7364546dca 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -77,6 +77,14 @@ module.exports = { }, order: 1 }, + { + slug: 'api/district', + title: { + zh: '行政区划', + en: 'District' + }, + order: 2 + }, { slug: 'api/draw', title: { diff --git a/packages/district/rollup.config.js b/packages/district/rollup.config.js index 1b9a6f5967..d66ac5d726 100644 --- a/packages/district/rollup.config.js +++ b/packages/district/rollup.config.js @@ -25,7 +25,7 @@ export default { commonjs({ namedExports: { eventemitter3: [ 'EventEmitter' ], - lodash: [ 'merge', 'clone' ] + lodash: [ 'merge', 'mergeWith', 'clone', 'isObject' ] } }), buble({ diff --git a/packages/district/src/config.ts b/packages/district/src/config.ts index ab98ccfbdd..8c08fbc7ac 100644 --- a/packages/district/src/config.ts +++ b/packages/district/src/config.ts @@ -5,7 +5,7 @@ let DataConfig: { [key: string]: any } = { fill: { type: 'pbf', url: - '//gw.alipayobjects.com/os/bmw-prod/21bdf832-1dfc-4cae-92d1-aa8d156df40f.bin', + '//gw.alipayobjects.com/os/bmw-prod/56cb34eb-cf61-4512-a6f3-fe4a45a7b1a3.bin', }, line: { type: 'pbf', diff --git a/packages/district/src/layer/baseLayer.ts b/packages/district/src/layer/baseLayer.ts index 16e9dd0da6..790bba2bb9 100644 --- a/packages/district/src/layer/baseLayer.ts +++ b/packages/district/src/layer/baseLayer.ts @@ -12,10 +12,12 @@ import { EventEmitter } from 'eventemitter3'; // @ts-ignore import geobuf from 'geobuf'; // tslint:disable-next-line: no-submodule-imports -import merge from 'lodash/mergeWith'; +import isObject from 'lodash/isObject'; +// tslint:disable-next-line: no-submodule-imports +import mergeWith from 'lodash/mergeWith'; // @ts-ignore import Pbf from 'pbf'; -import { IDistrictLayerOption } from './interface'; +import { AttributeType, IDistrictLayerOption } from './interface'; function mergeCustomizer(objValue: any, srcValue: any) { if (Array.isArray(srcValue)) { @@ -26,6 +28,7 @@ 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[] = []; @@ -35,7 +38,7 @@ export default class BaseLayer extends EventEmitter { constructor(scene: Scene, option: Partial = {}) { super(); this.scene = scene; - this.options = merge(this.getDefaultOption(), option, mergeCustomizer); + this.options = mergeWith(this.getDefaultOption(), option, mergeCustomizer); } public destroy() { @@ -51,7 +54,7 @@ export default class BaseLayer extends EventEmitter { } public setOption(newOption: { [key: string]: any }) { - this.options = merge(this.options, newOption); + this.options = mergeWith(this.options, newOption); } public updateData( @@ -102,10 +105,20 @@ export default class BaseLayer extends EventEmitter { textAllowOverlap: true, opacity: 1, }, + bubble: { + enable: false, + shape: 'circle', + color: '#1AA9FF', + size: 15, + style: { + opacity: 1, + stroke: '#fff', + strokeWidth: 1, + }, + }, fill: { scale: null, - field: null, - values: '#fff', + color: '#ddd', style: { opacity: 1.0, }, @@ -128,7 +141,9 @@ export default class BaseLayer extends EventEmitter { chinaNationalWidth: 1, popup: { enable: true, - triggerEvent: 'mousemove', + openTriggerEvent: 'mouseenter', + closeTriggerEvent: 'mouseout', + option: {}, Html: (properties: any) => { return `${properties.name}`; }, @@ -155,14 +170,11 @@ export default class BaseLayer extends EventEmitter { }, ], }); - fill.field - ? fillLayer.color(fill.field, fill.values) - : fillLayer.color(fill.values as string); - - if (fill.scale) { + this.setLayerAttribute(fillLayer, 'color', fill.color as AttributeType); + if (fill.scale && isObject(fill.color)) { fillLayer.scale('color', { - type: 'quantile', - field: fill.field as string, + type: fill.scale, + field: fill.color.field as string, }); } fillLayer @@ -174,16 +186,26 @@ export default class BaseLayer extends EventEmitter { 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 } = this.options; const layer2 = new LineLayer({ - zIndex: zIndex + 1, + zIndex: zIndex + 0.1, }) .source(provinceLine) .color(stroke) @@ -203,10 +225,46 @@ export default class BaseLayer extends EventEmitter { this.labelLayer = labelLayer; } + protected addBubbleLayer(labelData: any, type: string = 'json') { + const { bubble, zIndex, data = [], joinBy } = this.options; + const bubbleLayer = new PointLayer({ + zIndex: zIndex + 0.3, + }).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); + 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 } = this.options; const labelLayer = new PointLayer({ - zIndex: zIndex + 2, + zIndex: zIndex + 0.4, }) .source(labelData, { parser: { @@ -228,13 +286,42 @@ export default class BaseLayer extends EventEmitter { protected addPopup() { const { popup } = this.options; - this.fillLayer.on('mousemove', (e) => { + 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(popup.Html ? popup.Html(e.feature.properties) : ''); + .setHTML(html); this.scene.addPopup(this.popup); }); + + popupLayer.on(popup.closeTriggerEvent as string, (e) => { + this.popup.remove(); + }); + } + + private setLayerAttribute( + layer: ILayer, + type: 'color' | 'size' | 'shape', + attr: AttributeType, + ) { + if (isObject(attr)) { + layer[type](attr.field, attr.values); + } else { + layer[type](attr); + } } } diff --git a/packages/district/src/layer/country.ts b/packages/district/src/layer/country.ts index 3c9c18fd91..8efdae186a 100644 --- a/packages/district/src/layer/country.ts +++ b/packages/district/src/layer/country.ts @@ -16,12 +16,6 @@ export default class CountryLayer extends BaseLayer { const { depth } = this.options; this.loadData().then(([fillData, fillLabel]) => { this.addFillLayer(fillData); - // const labeldata = fillData.features.map((feature: any) => { - // return { - // ...feature.properties, - // center: [feature.properties.x, feature.properties.y], - // }; - // }); if (fillLabel && this.options.label?.enable) { this.addLabelLayer( fillLabel.filter((v: any) => { @@ -111,7 +105,7 @@ export default class CountryLayer extends BaseLayer { } = this.options; // 添加国界线 const lineLayer = new LineLayer({ - zIndex: zIndex + 1, + zIndex: zIndex + 0.1, }) .source(boundaries) .size('type', (v: string) => { @@ -139,7 +133,7 @@ export default class CountryLayer extends BaseLayer { }); // 添加未定国界 const lineLayer2 = new LineLayer({ - zIndex: zIndex + 1, + zIndex: zIndex + 0.1, }) .source(boundaries2) .size(nationalWidth) @@ -210,7 +204,7 @@ export default class CountryLayer extends BaseLayer { private addText(labelData: any, option: any, offset: [number, number]) { const { label, zIndex } = this.options; const labelLayer = new PointLayer({ - zIndex: zIndex + 2, + zIndex: zIndex + 0.4, ...option, }) .source(labelData, { @@ -220,7 +214,7 @@ export default class CountryLayer extends BaseLayer { }, }) .color(label.color as StyleAttrField) - .shape(label.field as StyleAttrField, 'text') + .shape('name', 'text') .size(10) .style({ opacity: label.opacity, diff --git a/packages/district/src/layer/drillDown.ts b/packages/district/src/layer/drillDown.ts index 91283c2931..d7f246deba 100644 --- a/packages/district/src/layer/drillDown.ts +++ b/packages/district/src/layer/drillDown.ts @@ -1,35 +1,57 @@ 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, IDistrictLayerOption } from './interface'; +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 provinceLayer: ProvinceLayer; - private cityLayer: CityLayer; - private countryLayer: CountryLayer; + private options: Partial; + private cityLayer: ProvinceLayer; + private countyLayer: CityLayer; + private provinceLayer: CountryLayer; private scene: Scene; - private drillState: 'province' | 'city' | 'county' = 'province'; - constructor(scene: Scene, option: Partial) { - const cfg = this.getDefaultOption(); + private drillState: 0 | 1 | 2 = 0; + private layers: any = []; + constructor(scene: Scene, option: Partial) { + this.options = mergeWith(this.getDefaultOption(), option, mergeCustomizer); this.scene = scene; - this.countryLayer = new CountryLayer(scene, option); - this.provinceLayer = new ProvinceLayer(scene, cfg.city); - this.cityLayer = new CityLayer(scene, cfg.county); + 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 }); - this.countryLayer.on('loaded', () => { - this.addCountryEvent(); - }); - this.provinceLayer.on('loaded', () => { - this.addProvinceEvent(); - }); - this.cityLayer.on('loaded', () => { - this.addCityEvent(); - }); + 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 { - province: {}, + drillDepth: 2, + customTrigger: false, + drillDownTriggerEvent: 'click', + drillUpTriggerEvent: 'unclick', + provinceData: [], + cityData: [], + countyData: [], city: { adcode: [], }, @@ -39,43 +61,43 @@ export default class DrillDownLayer { }; } public addCountryEvent() { - this.countryLayer.fillLayer.on('click', (e: any) => { - this.countryLayer.hide(); - // 更新市级行政区划 - // this.provinceLayer.updateDistrict([e.feature.properties.adcode]); - // this.drillState = 'city'; - this.drillDown(e.feature.properties.adcode); - }); + const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options; + this.provinceLayer.fillLayer.on( + drillDownTriggerEvent as string, + (e: any) => { + this.provinceLayer.hide(); + this.drillDown(e.feature.properties.adcode); + }, + ); } public addProvinceEvent() { - this.provinceLayer.fillLayer.on('undblclick', () => { + const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options; + this.cityLayer.fillLayer.on(drillUpTriggleEvent as string, () => { this.drillUp(); }); - this.provinceLayer.fillLayer.on('click', (e: any) => { - // this.provinceLayer.hide(); - // const adcode = e.feature.properties.adcode.toFixed(0); + this.cityLayer.fillLayer.on(drillDownTriggerEvent as string, (e: any) => { this.drillDown(e.feature.properties.adcode); - // if (adcode.substr(2, 2) === '00') { - // adcode = adcode.substr(0, 2) + '0100'; - // } - // // 更新县级行政区划 - // this.cityLayer.updateDistrict([adcode]); - // this.drillState = 'county'; - // this.showCityView(adcode); }); } public addCityEvent() { - this.cityLayer.fillLayer.on('undblclick', () => { + const { drillDownTriggerEvent, drillUpTriggleEvent } = this.options; + this.countyLayer.fillLayer.on(drillUpTriggleEvent 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.countryLayer.destroy(); - this.provinceLayer.destroy(); - this.cityLayer.destroy(); + this.layers.forEach((layer: any) => layer.destroy()); } public showProvinceView( @@ -83,27 +105,27 @@ export default class DrillDownLayer { newData: Array<{ [key: string]: any }> = [], joinByField?: [string, string], ) { - this.provinceLayer.show(); - this.provinceLayer.updateDistrict(adcode, newData, joinByField); - this.provinceLayer.fillLayer.fitBounds(); - this.cityLayer.hide(); - this.drillState = 'city'; + 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.cityLayer.show(); + this.countyLayer.show(); let adcode = `${code}`; if (adcode.substr(2, 2) === '00') { adcode = adcode.substr(0, 2) + '0100'; } // 更新县级行政区划 - this.cityLayer.updateDistrict(adcode, newData, joinByField); - this.cityLayer.fillLayer.fitBounds(); - this.provinceLayer.hide(); - this.drillState = 'county'; + this.countyLayer.updateDistrict(adcode, newData, joinByField); + this.countyLayer.fillLayer.fitBounds(); + this.cityLayer.hide(); + this.drillState = 2; } /** @@ -111,17 +133,17 @@ export default class DrillDownLayer { */ public drillUp() { switch (this.drillState) { - case 'county': + 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 = 'city'; - break; - case 'city': - this.countryLayer.show(); - this.countryLayer.fillLayer.fitBounds(); - this.provinceLayer.hide(); - this.drillState = 'province'; + this.drillState = 0; break; } } @@ -130,13 +152,51 @@ export default class DrillDownLayer { newData: Array<{ [key: string]: any }> = [], joinByField?: [string, string], ) { + const { drillDepth } = this.options; + if (this.drillState === drillDepth) { + return; + } switch (this.drillState) { - case 'province': - this.showProvinceView(adcode); + case 0: + this.showProvinceView(adcode, newData, joinByField); break; - case 'city': - this.showCityView(adcode); + 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, province } = this.options; + const datatype = (type + 'Data') as + | 'provinceData' + | 'cityData' + | 'countyData'; + return { + data: this.options[datatype], + joinBy, + label, + bubble, + fill, + popup, + ...this.options[type], + }; + } } diff --git a/packages/district/src/layer/interface.ts b/packages/district/src/layer/interface.ts index e7332ad6c9..d6c758edb2 100644 --- a/packages/district/src/layer/interface.ts +++ b/packages/district/src/layer/interface.ts @@ -1,4 +1,9 @@ -import { ScaleTypeName, StyleAttributeOption } from '@antv/l7'; +import { + IPopupOption, + ScaleTypeName, + StyleAttributeField, + StyleAttributeOption, +} from '@antv/l7'; export interface ILabelOption { enable: boolean; color: string; @@ -9,6 +14,62 @@ export interface ILabelOption { textAllowOverlap: boolean; opacity: number; } + +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; + Html: (properties: any) => string; +} + +export interface IFillOptions { + scale: ScaleTypeName | null; + // field: string | null; + color: AttributeType; + values: StyleAttributeOption; + style: any; + activeColor: string; +} +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; + scale: { + field: string; + type: ScaleTypeName; + }; + style: { + opacity: number; + stroke: string; + strokeWidth: number; + }; +} export type adcodeType = string[] | string | number | number[]; export interface IDistrictLayerOption { zIndex: number; @@ -17,13 +78,8 @@ export interface IDistrictLayerOption { adcode: adcodeType; depth: 0 | 1 | 2 | 3; label: Partial; - fill: Partial<{ - scale: ScaleTypeName | null; - field: string | null; - values: StyleAttributeOption; - style: any; - activeColor: string; - }>; + bubble: Partial; + fill: Partial; autoFit: boolean; stroke: string; strokeWidth: number; @@ -33,16 +89,34 @@ export interface IDistrictLayerOption { cityStrokeWidth: number; countyStroke: string; countyStrokeWidth: number; - coastlineStroke: string; coastlineWidth: number; nationalStroke: string; nationalWidth: number; chinaNationalStroke: string; chinaNationalWidth: number; - popup: Partial<{ - enable: boolean; - triggerEvent: 'mousemove' | 'click'; - Html: (properties: any) => string; - }>; + popup: Partial; +} +interface IDrawOption { + joinBy: [string, string]; + label: Partial; + bubble: Partial; + fill: Partial; +} +export interface IDrillDownOption { + drillDepth: 0 | 1 | 2; + customTrigger: boolean; + drillDownTriggerEvent: TriggeEventType; + drillUpTriggleEvent: TriggeEventType & DrillUpTriggeEventType; + provinceData?: Array<{ [key: string]: any }>; + cityData?: Array<{ [key: string]: any }>; + countyData?: Array<{ [key: string]: any }>; + joinBy: [string, string]; + label: Partial; + bubble: Partial; + fill: Partial; + popup: Partial; + province: Partial; + city: Partial; + county: Partial; } diff --git a/packages/district/src/layer/province.ts b/packages/district/src/layer/province.ts index 098dd5f152..763c5eafb4 100644 --- a/packages/district/src/layer/province.ts +++ b/packages/district/src/layer/province.ts @@ -38,6 +38,15 @@ export default class ProvinceLayer extends BaseLayer { const fillData = this.filterData(this.fillRawData, adcode); const lineData = this.filterData(this.lineRawData, adcode); const labelData = this.filterLabelData(this.labelRawData, adcode); + if (this.options.bubble && this.options.bubble?.enable !== false) { + const bubbleData = fillData.features.map((feature: any) => { + return { + ...feature.properties, + center: [feature.properties.x, feature.properties.y], + }; + }); + this.bubbleLayer.setData(bubbleData); + } this.fillData = fillData; this.updateData(newData, joinByField); this.lineLayer.setData(lineData); @@ -54,17 +63,6 @@ export default class ProvinceLayer extends BaseLayer { field: 'NAME_CHN', textAllowOverlap: false, }, - fill: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], - }, popup: { enable: true, Html: (props: any) => { diff --git a/packages/district/src/layer/world.ts b/packages/district/src/layer/world.ts index 68b4d37997..136d38a593 100644 --- a/packages/district/src/layer/world.ts +++ b/packages/district/src/layer/world.ts @@ -71,7 +71,7 @@ export default class WorldLayer extends BaseLayer { } = this.options; // 添加国界线 const lineLayer = new LineLayer({ - zIndex: zIndex + 1, + zIndex: zIndex + 0.1, }) .source(boundaries) // .size(0.6) @@ -99,7 +99,7 @@ export default class WorldLayer extends BaseLayer { }); // 添加未定国界 const lineLayer2 = new LineLayer({ - zIndex: zIndex + 1, + zIndex: zIndex + 0.1, }) .source(boundaries2) .size('type', (v: string) => { diff --git a/packages/draw/src/draw_control.ts b/packages/draw/src/draw_control.ts index 84b0e18ebd..1372ad1848 100644 --- a/packages/draw/src/draw_control.ts +++ b/packages/draw/src/draw_control.ts @@ -2,7 +2,7 @@ * @Author: lzxue * @Date: 2020-04-03 19:24:16 * @Last Modified by: lzxue - * @Last Modified time: 2020-04-22 19:09:42 + * @Last Modified time: 2020-05-13 11:58:01 */ import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7'; import './css/draw.less'; @@ -35,6 +35,7 @@ export interface IDrawControlOption extends IControlOption { pickBuffer: number; controls: IControls; layout: 'horizontal' | 'vertical'; + style: any; } export class DrawControl extends Control { private draw: { @@ -110,9 +111,15 @@ export class DrawControl extends Control { } private addControls(controls: IControls, container: HTMLElement) { + const { style } = this.controlOption as IDrawControlOption; for (const type in controls) { if (DrawType[type] && controls[type] !== false) { - const drawOption = isObject(controls[type]) ? controls[type] : false; + const drawOption: Partial = isObject(controls[type]) + ? (controls[type] as Partial) + : {}; + if (style) { + drawOption.style = style; + } const draw = new DrawType[type](this.scene, drawOption); draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type)); this.draw[type] = draw; diff --git a/stories/District/Layer/Country.tsx b/stories/District/Layer/Country.tsx index cdeec9e0d5..06783fb12d 100644 --- a/stories/District/Layer/Country.tsx +++ b/stories/District/Layer/Country.tsx @@ -205,15 +205,17 @@ export default class Country extends React.Component { // }, depth: 1, fill: { - field: 'value', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + color: { + field: 'value', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, popup: { enable: true, diff --git a/stories/District/Layer/Country2.tsx b/stories/District/Layer/Country2.tsx index 445ad0338e..04c268a362 100644 --- a/stories/District/Layer/Country2.tsx +++ b/stories/District/Layer/Country2.tsx @@ -269,15 +269,17 @@ export default class Country extends React.Component { depth: 1, fill: { scale: 'quantile', - field: 'confirm', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + color: { + field: 'confirm', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, }); }); @@ -307,15 +309,17 @@ export default class Country extends React.Component { autoFit: false, fill: { scale: 'quantile', - field: 'confirm', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + color: { + field: 'confirm', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, }); }); diff --git a/stories/District/Layer/city.tsx b/stories/District/Layer/city.tsx index fc5840ac20..ca0b4df733 100644 --- a/stories/District/Layer/city.tsx +++ b/stories/District/Layer/city.tsx @@ -56,16 +56,19 @@ export default class Country extends React.Component { field: 'NAME_CHN', textAllowOverlap: false, }, - fill: { - field: 'pop', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + bubble: { + enable: true, + color: { + field: 'pop', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, popup: { enable: true, @@ -109,6 +112,5 @@ export default class Country extends React.Component { } private handleProvinceChange = (value: string[]) => { this.cityLayer.updateDistrict([value[1]]); - console.log(this.cityLayer.fillLayer); }; } diff --git a/stories/District/Layer/country_bubble.tsx b/stories/District/Layer/country_bubble.tsx new file mode 100644 index 0000000000..77179ad511 --- /dev/null +++ b/stories/District/Layer/country_bubble.tsx @@ -0,0 +1,235 @@ +import { Scene } from '@antv/l7'; +import { CountryLayer } from '@antv/l7-district'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class Country extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + 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 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, + }, + ]; + scene.on('loaded', () => { + const Layer = new CountryLayer(scene, { + data: ProvinceData, + joinBy: ['NAME_CHN', 'name'], + depth: 1, + bubble: { + enable: true, + size: { + field: 'value', + values: [3, 20], + }, + }, + popup: { + enable: true, + Html: (props) => { + return `${props.NAME_CHN}:${props.value}`; + }, + }, + }); + }); + this.scene = scene; + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/District/Layer/country_city.tsx b/stories/District/Layer/country_city.tsx index d58428e782..35d45d1373 100644 --- a/stories/District/Layer/country_city.tsx +++ b/stories/District/Layer/country_city.tsx @@ -31,16 +31,17 @@ export default class Country extends React.Component { coastlineWidth: 0.5, nationalWidth: 0.5, fill: { - // scale: 'quantile', - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, popup: { enable: true, diff --git a/stories/District/Layer/country_county.tsx b/stories/District/Layer/country_county.tsx index 8d9a5622a6..bb1e89044e 100644 --- a/stories/District/Layer/country_county.tsx +++ b/stories/District/Layer/country_county.tsx @@ -32,16 +32,17 @@ export default class Country extends React.Component { coastlineWidth: 0.5, nationalWidth: 0.5, fill: { - // scale: 'quantile', - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, popup: { enable: true, diff --git a/stories/District/Layer/county.tsx b/stories/District/Layer/county.tsx index 851e95c45e..26c1dc4dd2 100644 --- a/stories/District/Layer/county.tsx +++ b/stories/District/Layer/county.tsx @@ -43,15 +43,17 @@ export default class Country extends React.Component { field: 'NAME_CHN', }, fill: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, popup: { enable: true, diff --git a/stories/District/Layer/drillDown.tsx b/stories/District/Layer/drillDown.tsx index 068a11426a..660f4bac22 100644 --- a/stories/District/Layer/drillDown.tsx +++ b/stories/District/Layer/drillDown.tsx @@ -31,18 +31,19 @@ export default class Country extends React.Component { scene.on('loaded', () => { this.scene = scene; this.drillDown = new DrillDownLayer(scene, { - data: [], - depth: 1, + drillDepth: 2, fill: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, popup: { enable: true, diff --git a/stories/District/Layer/province.tsx b/stories/District/Layer/province.tsx index 88c65c692c..dd83a4f5a3 100644 --- a/stories/District/Layer/province.tsx +++ b/stories/District/Layer/province.tsx @@ -224,16 +224,19 @@ export default class Country extends React.Component { field: 'NAME_CHN', textAllowOverlap: false, }, - fill: { - field: 'pop', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + bubble: { + enable: true, + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, popup: { enable: true, diff --git a/stories/District/Layer/world.tsx b/stories/District/Layer/world.tsx index 21faabc196..b673037215 100644 --- a/stories/District/Layer/world.tsx +++ b/stories/District/Layer/world.tsx @@ -26,16 +26,19 @@ export default class Country extends React.Component { scene.on('loaded', () => { const Layer = new WorldLayer(scene, { data: [], - fill: { - field: 'NAME_CHN', - values: [ - '#feedde', - '#fdd0a2', - '#fdae6b', - '#fd8d3c', - '#e6550d', - '#a63603', - ], + bubble: { + enable: true, + color: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, }, stroke: '#ccc', label: { diff --git a/stories/District/district.stories.tsx b/stories/District/district.stories.tsx index 038f8255e2..61cdaa2acb 100644 --- a/stories/District/district.stories.tsx +++ b/stories/District/district.stories.tsx @@ -1,6 +1,7 @@ import { storiesOf } from '@storybook/react'; require('./../assets/css/antd.css'); import * as React from 'react'; +import ChinaBubble from './Layer/country_bubble'; import City from './Layer/city'; import Country from './Layer/Country'; import Country2 from './Layer/Country2'; @@ -14,6 +15,7 @@ import World from './Layer/world'; storiesOf('行政区划', module) .add('世界地图', () => ) .add('中国地图', () => ) + .add('中国地图气泡', () => ) .add('中国地图市级', () => ) .add('中国地图县级', () => ) .add('中国地图附图', () => ) diff --git a/stories/Layers/components/PointImage.tsx b/stories/Layers/components/PointImage.tsx index c0e517a94a..e6fbdbc964 100644 --- a/stories/Layers/components/PointImage.tsx +++ b/stories/Layers/components/PointImage.tsx @@ -35,28 +35,31 @@ export default class PointImage extends React.Component { '02', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png', ); - let i = 0; + const i = 0; const data = await response.json(); - while (i < 1) { - const imageLayer = new PointLayer() - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('name', ['00', '01', '02']) - // .shape('triangle') - // .color('red') - .active(true) - .size(20); - // imageLayer.on('click', (e) => { - // console.log(e); - // }); - scene.addLayer(imageLayer); - i++; - } + const newData = data.map((item: any) => { + item.type = '00'; + return item; + }); + const imageLayer = new PointLayer() + .source(newData, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + }, + }) + .shape('type', (v: any) => { + return v; + }) + // .shape('triangle') + // .color('red') + .active(true) + .size(20); + // imageLayer.on('click', (e) => { + // console.log(e); + // }); + scene.addLayer(imageLayer); } public render() {