diff --git a/docs/api/map.en.md b/docs/api/map.en.md
index a98eb49695..e851cd64cc 100644
--- a/docs/api/map.en.md
+++ b/docs/api/map.en.md
@@ -12,11 +12,10 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管
### 引入 Map
-```javascropt
+```javascript
+import { GaodeMap } from '@antv/l7-maps';
- import { GaodeMap } from '@antv/l7-maps';
-
- import { Mapbox } from '@antv/l7-maps';
+import { Mapbox } from '@antv/l7-maps';
```
### 实例化
diff --git a/docs/api/map.zh.md b/docs/api/map.zh.md
index 3adce0ca4b..84c557bf2d 100644
--- a/docs/api/map.zh.md
+++ b/docs/api/map.zh.md
@@ -12,11 +12,10 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管
### 引入 Map
-```javascropt
+```javascript
+import { GaodeMap } from '@antv/l7-maps';
- import { GaodeMap } from '@antv/l7-maps';
-
- import { Mapbox } from '@antv/l7-maps';
+import { Mapbox } from '@antv/l7-maps';
```
### 实例化
diff --git a/docs/tutorial/map/blankmap.en.md b/docs/tutorial/map/blankmap.en.md
index b462e81e7d..e2a31f584c 100644
--- a/docs/tutorial/map/blankmap.en.md
+++ b/docs/tutorial/map/blankmap.en.md
@@ -26,11 +26,3 @@ const scene = new Scene({
离线，无token使用
-
-
diff --git a/docs/tutorial/map/blankmap.zh.md b/docs/tutorial/map/blankmap.zh.md
index 2c645844b1..3da2d6e9f7 100644
--- a/docs/tutorial/map/blankmap.zh.md
+++ b/docs/tutorial/map/blankmap.zh.md
@@ -24,12 +24,4 @@ const scene = new Scene({
```
如果你只是需要做个中国地图，世界地图这样填充图，建议你采用这样的模式
-离线，无token使用
-
-
+离线，无token使用
\ No newline at end of file
diff --git a/examples/district/basic/API.en.md b/examples/district/basic/API.en.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/examples/district/basic/API.zh.md b/examples/district/basic/API.zh.md
new file mode 100644
index 0000000000..d1da667202
--- /dev/null
+++ b/examples/district/basic/API.zh.md
@@ -0,0 +1,8 @@
+---
+title: API
+---
+地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
+
+## 配置项
+
+## 方法
diff --git a/examples/district/basic/demo/china_map.js b/examples/district/basic/demo/china_map.js
new file mode 100644
index 0000000000..0c14e62874
--- /dev/null
+++ b/examples/district/basic/demo/china_map.js
@@ -0,0 +1,215 @@
+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' ],
+ // label: {
+ // field: 'NAME_CHN',
+ // textAllowOverlap: true,
+ // },
+ depth: 1,
+ fill: {
+ field: 'value',
+ values: [
+ '#feedde',
+ '#fdd0a2',
+ '#fdae6b',
+ '#fd8d3c',
+ '#e6550d',
+ '#a63603'
+ ]
+ },
+ popup: {
+ enable: true,
+ Html: props => {
+ return `${props.NAME_CHN}:${props.value}`;
+ }
+ }
+ });
+});
diff --git a/examples/district/basic/demo/city.js b/examples/district/basic/demo/city.js
new file mode 100644
index 0000000000..9ddffa8f9e
--- /dev/null
+++ b/examples/district/basic/demo/city.js
@@ -0,0 +1,61 @@
+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
+ },
+ fill: {
+ 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/basic/demo/county.js b/examples/district/basic/demo/county.js
new file mode 100644
index 0000000000..84fda95326
--- /dev/null
+++ b/examples/district/basic/demo/county.js
@@ -0,0 +1,41 @@
+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'
+ },
+ fill: {
+ field: 'NAME_CHN',
+ values: [
+ '#feedde',
+ '#fdd0a2',
+ '#fdae6b',
+ '#fd8d3c',
+ '#e6550d',
+ '#a63603'
+ ]
+ },
+ popup: {
+ enable: true,
+ Html: props => {
+ return `${props.NAME_CHN}`;
+ }
+ }
+ });
+});
diff --git a/examples/district/basic/demo/drill_down.js b/examples/district/basic/demo/drill_down.js
new file mode 100644
index 0000000000..982e9e893c
--- /dev/null
+++ b/examples/district/basic/demo/drill_down.js
@@ -0,0 +1,37 @@
+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,
+ fill: {
+ field: 'NAME_CHN',
+ values: [
+ '#feedde',
+ '#fdd0a2',
+ '#fdae6b',
+ '#fd8d3c',
+ '#e6550d',
+ '#a63603'
+ ]
+ },
+ popup: {
+ enable: true,
+ Html: props => {
+ return `${props.NAME_CHN}`;
+ }
+ }
+ });
+});
diff --git a/examples/district/basic/demo/meta.json b/examples/district/basic/demo/meta.json
new file mode 100644
index 0000000000..2e190fdffc
--- /dev/null
+++ b/examples/district/basic/demo/meta.json
@@ -0,0 +1,39 @@
+{
+ "title": {
+ "zh": "行政区划",
+ "en": "District"
+ },
+ "demos": [
+
+ {
+ "filename": "china_map.js",
+ "title": "中国地图",
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*tClNQoAo5isAAAAAAAAAAABkARQnAQ"
+ },
+ {
+ "filename": "world_map.js",
+ "title": "世界地图",
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*EtRFRYyGs98AAAAAAAAAAABkARQnAQ"
+ },
+ {
+ "filename": "province.js",
+ "title": "中国省级地图",
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*eVVcRaCBkdYAAAAAAAAAAABkARQnAQ"
+ },
+ {
+ "filename": "city.js",
+ "title": "中国市地图",
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*C_y8Tr0V8GIAAAAAAAAAAABkARQnAQ"
+ },
+ {
+ "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
new file mode 100644
index 0000000000..05b5542977
--- /dev/null
+++ b/examples/district/basic/demo/province.js
@@ -0,0 +1,59 @@
+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
+ },
+ fill: {
+ 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/basic/demo/world_map.js b/examples/district/basic/demo/world_map.js
new file mode 100644
index 0000000000..6f16dd7855
--- /dev/null
+++ b/examples/district/basic/demo/world_map.js
@@ -0,0 +1,42 @@
+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: [],
+ fill: {
+ 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/basic/index.en.md b/examples/district/basic/index.en.md
new file mode 100644
index 0000000000..1040d80f83
--- /dev/null
+++ b/examples/district/basic/index.en.md
@@ -0,0 +1,4 @@
+---
+title: L7 District
+order: 3
+---
diff --git a/examples/district/basic/index.zh.md b/examples/district/basic/index.zh.md
new file mode 100644
index 0000000000..e2595f8e7f
--- /dev/null
+++ b/examples/district/basic/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
new file mode 100644
index 0000000000..81a5126c59
--- /dev/null
+++ b/examples/district/react/demo/city.tsx
@@ -0,0 +1,115 @@
+import { Scene } from '@antv/l7';
+import { CityLayer } from '@antv/l7-district';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import { Cascader } from 'antd';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+class City extends React.Component {
+ public state = {
+ options: [],
+ };
+ // @ts-ignore
+ private scene: Scene;
+ private cityLayer: CityLayer;
+
+ public componentWillUnmount() {
+ this.scene.destroy();
+ }
+
+ public async componentDidMount() {
+ const res = await fetch(
+ 'https://gw.alipayobjects.com/os/bmw-prod/551e3ca6-6dad-421b-a8b4-b225e47f73ca.json',
+ );
+ const options = await res.json();
+ this.setState({
+ options,
+ });
+ 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: string) => {
+ 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', () => {
+ this.cityLayer = new CityLayer(scene, {
+ data,
+ joinBy: ['adcode', 'code'],
+ adcode: ['330000', '330100'],
+ depth: 3,
+ label: {
+ field: 'NAME_CHN',
+ textAllowOverlap: false,
+ },
+ fill: {
+ field: 'NAME_CHN',
+ values: [
+ '#feedde',
+ '#fdd0a2',
+ '#fdae6b',
+ '#fd8d3c',
+ '#e6550d',
+ '#a63603',
+ ],
+ },
+ popup: {
+ enable: true,
+ Html: (props) => {
+ return `${props.NAME_CHN}:`;
+ },
+ },
+ });
+ });
+ this.scene = scene;
+ }
+
+ public render() {
+ return (
+ <>
+
+
+
+ );
+ }
+ private handleProvinceChange = (value: string[]) => {
+ this.cityLayer.updateDistrict([value[1]]);
+ };
+}
+ReactDOM.render(, document.getElementById('map'));
diff --git a/examples/district/react/demo/county.tsx b/examples/district/react/demo/county.tsx
new file mode 100644
index 0000000000..ab39043acc
--- /dev/null
+++ b/examples/district/react/demo/county.tsx
@@ -0,0 +1,103 @@
+import { Scene } from '@antv/l7';
+import { CountyLayer } from '@antv/l7-district';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import { Cascader } from 'antd';
+import ReactDOM from 'react-dom';
+import * as React from 'react';
+export default class County extends React.Component {
+ public state = {
+ options: [],
+ };
+ // @ts-ignore
+ private scene: Scene;
+ private countyLayer: CountyLayer;
+
+ public componentWillUnmount() {
+ this.scene.destroy();
+ }
+
+ public async componentDidMount() {
+ const res = await fetch(
+ 'https://gw.alipayobjects.com/os/bmw-prod/04de56cc-5998-4f7e-9ad3-e87e9ac5fd39.json',
+ );
+ const options = await res.json();
+ this.setState({
+ options,
+ });
+ 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', () => {
+ this.countyLayer = new CountyLayer(scene, {
+ data: [],
+ adcode: ['110101'],
+ depth: 3,
+ label: {
+ field: 'NAME_CHN',
+ },
+ fill: {
+ field: 'NAME_CHN',
+ values: [
+ '#feedde',
+ '#fdd0a2',
+ '#fdae6b',
+ '#fd8d3c',
+ '#e6550d',
+ '#a63603',
+ ],
+ },
+ popup: {
+ enable: true,
+ Html: (props) => {
+ return `${props.NAME_CHN}`;
+ },
+ },
+ });
+ });
+ this.scene = scene;
+ }
+
+ public render() {
+ return (
+ <>
+
+
+
+ );
+ }
+
+ private handleProvinceChange = (value: string[]) => {
+ this.countyLayer.updateDistrict([value[2]]);
+ };
+}
+
+ReactDOM.render(, document.getElementById('map'));
\ No newline at end of file
diff --git a/examples/district/react/demo/meta.json b/examples/district/react/demo/meta.json
new file mode 100644
index 0000000000..06ad3b3e06
--- /dev/null
+++ b/examples/district/react/demo/meta.json
@@ -0,0 +1,24 @@
+{
+ "title": {
+ "zh": "行政区划",
+ "en": "District"
+ },
+ "demos": [
+
+ {
+ "filename": "province.tsx",
+ "title": "省级地图切换",
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*LZAZSYFf0-MAAAAAAAAAAABkARQnAQ"
+ },
+ {
+ "filename": "city.tsx",
+ "title": "市级地图切换",
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*Q7-tSpvgHjcAAAAAAAAAAABkARQnAQ"
+ },
+ {
+ "filename": "county.tsx",
+ "title": "县地图切换",
+ "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*pBaIQo9D50YAAAAAAAAAAABkARQnAQ"
+ }
+ ]
+}
diff --git a/examples/district/react/demo/province.tsx b/examples/district/react/demo/province.tsx
new file mode 100644
index 0000000000..fc79d47652
--- /dev/null
+++ b/examples/district/react/demo/province.tsx
@@ -0,0 +1,290 @@
+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';
+const { Option } = Select;
+
+const ProvinceData = [
+ {
+ NAME_CHN: '云南省',
+ adcode: 530000,
+ value: 17881.12,
+ },
+ {
+ NAME_CHN: '黑龙江省',
+ adcode: 230000,
+ value: 16361.62,
+ },
+ {
+ NAME_CHN: '贵州省',
+ adcode: 520000,
+ value: 14806.45,
+ },
+ {
+ NAME_CHN: '北京市',
+ adcode: 110000,
+ value: 30319.98,
+ },
+ {
+ NAME_CHN: '河北省',
+ adcode: 130000,
+ value: 36010.27,
+ },
+ {
+ NAME_CHN: '山西省',
+ adcode: 140000,
+ value: 16818.11,
+ },
+ {
+ NAME_CHN: '吉林省',
+ adcode: 220000,
+ value: 15074,
+ },
+ {
+ NAME_CHN: '宁夏回族自治区',
+ adcode: 640000,
+ value: 3705.18,
+ },
+ {
+ NAME_CHN: '辽宁省',
+ adcode: 210000,
+ value: 25315.35,
+ },
+ {
+ NAME_CHN: '海南省',
+ adcode: 460000,
+ value: 4832.05,
+ },
+ {
+ NAME_CHN: '内蒙古自治区',
+ adcode: 150000,
+ value: 17289.22,
+ },
+ {
+ NAME_CHN: '天津市',
+ adcode: 120000,
+ value: 18809.64,
+ },
+ {
+ NAME_CHN: '新疆维吾尔自治区',
+ adcode: 650000,
+ value: 12199.08,
+ },
+ {
+ NAME_CHN: '上海市',
+ adcode: 310000,
+ value: 32679.87,
+ },
+ {
+ NAME_CHN: '陕西省',
+ adcode: 610000,
+ value: 24438.32,
+ },
+ {
+ NAME_CHN: '甘肃省',
+ adcode: 620000,
+ value: 8246.07,
+ },
+ {
+ NAME_CHN: '安徽省',
+ adcode: 340000,
+ value: 30006.82,
+ },
+ {
+ NAME_CHN: '香港特别行政区',
+ adcode: 810000,
+ value: 0,
+ },
+ {
+ NAME_CHN: '广东省',
+ adcode: 440000,
+ value: 97277.77,
+ },
+ {
+ NAME_CHN: '河南省',
+ adcode: 410000,
+ value: 48055.86,
+ },
+ {
+ NAME_CHN: '湖南省',
+ adcode: 430000,
+ value: 36425.78,
+ },
+ {
+ NAME_CHN: '江西省',
+ adcode: 360000,
+ value: 21984.78,
+ },
+ {
+ NAME_CHN: '四川省',
+ adcode: 510000,
+ value: 40678.13,
+ },
+ {
+ NAME_CHN: '广西壮族自治区',
+ adcode: 450000,
+ value: 20353.51,
+ },
+ {
+ NAME_CHN: '江苏省',
+ adcode: 320000,
+ value: 92595.4,
+ },
+ {
+ NAME_CHN: '澳门特别行政区',
+ adcode: 820000,
+ value: null,
+ },
+ {
+ NAME_CHN: '浙江省',
+ adcode: 330000,
+ value: 56197.15,
+ },
+ {
+ NAME_CHN: '山东省',
+ adcode: 370000,
+ value: 76469.67,
+ },
+ {
+ NAME_CHN: '青海省',
+ adcode: 630000,
+ value: 2865.23,
+ },
+ {
+ NAME_CHN: '重庆市',
+ adcode: 500000,
+ value: 20363.19,
+ },
+ {
+ NAME_CHN: '福建省',
+ adcode: 350000,
+ value: 35804.04,
+ },
+ {
+ NAME_CHN: '湖北省',
+ adcode: 420000,
+ value: 39366.55,
+ },
+ {
+ NAME_CHN: '西藏自治区',
+ adcode: 540000,
+ value: 1477.63,
+ },
+ {
+ NAME_CHN: '台湾省',
+ adcode: 710000,
+ value: null,
+ },
+];
+class Province extends React.Component {
+ public state = {
+ province: '110000',
+ };
+ // @ts-ignore
+ private scene: Scene;
+ private provinceLayer: ProvinceLayer;
+ public componentWillUnmount() {
+ this.scene.destroy();
+ }
+
+ public async componentDidMount() {
+ 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: string) => {
+ return {
+ code: key,
+ name: provinceData[key][0],
+ pop: provinceData[key][3],
+ };
+ });
+ 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', () => {
+ const { province } = this.state;
+ this.provinceLayer = new ProvinceLayer(scene, {
+ adcode: ['230000'],
+ depth: 3,
+ label: {
+ field: 'NAME_CHN',
+ textAllowOverlap: false,
+ },
+ fill: {
+ field: 'NAME_CHN',
+ values: [
+ '#feedde',
+ '#fdd0a2',
+ '#fdae6b',
+ '#fd8d3c',
+ '#e6550d',
+ '#a63603',
+ ],
+ },
+ popup: {
+ enable: true,
+ Html: (props) => {
+ return `${props.NAME_CHN}`;
+ },
+ },
+ });
+ });
+ this.scene = scene;
+ }
+
+ public render() {
+ return (
+ <>
+
+
+
+ );
+ }
+
+ private handleProvinceChange = (value: string) => {
+ this.setState({
+ province: value,
+ });
+ this.provinceLayer.updateDistrict([value]);
+ };
+}
+ReactDOM.render(, document.getElementById('map'))
\ No newline at end of file
diff --git a/examples/district/react/index.en.md b/examples/district/react/index.en.md
new file mode 100644
index 0000000000..663dac6a78
--- /dev/null
+++ b/examples/district/react/index.en.md
@@ -0,0 +1,4 @@
+---
+title: React
+order: 3
+---
diff --git a/examples/district/react/index.zh.md b/examples/district/react/index.zh.md
new file mode 100644
index 0000000000..9d6495f642
--- /dev/null
+++ b/examples/district/react/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: React 组件
+order: 3
+---
diff --git a/examples/react/control/demo/control.tsx b/examples/react/control/demo/control.tsx
index 4844364bec..5aed83a64a 100644
--- a/examples/react/control/demo/control.tsx
+++ b/examples/react/control/demo/control.tsx
@@ -1,4 +1,4 @@
-import { AMapScene, Control, LineLayer } from '@antv/l7-react';
+import { AMapScene, Control } from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
const MapScene = React.memo(function Map() {
diff --git a/gatsby-browser.js b/gatsby-browser.js
index 55c3d4a6a1..070cb689d4 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,11 +1,14 @@
require('./site/css/demo.css');
require('./packages/component/src/css/l7.css');
+require('antd/dist/antd.css');
window.geotiff = require('geotiff');
window.g2 = require('@antv/g2');
window.l7 = require('@antv/l7');
window.l7Maps = require('@antv/l7-maps');
window.l7React = require('@antv/l7-react');
window.l7Draw = require('@antv/l7-draw');
+window.l7District = require('@antv/l7-district');
window.react = require('react');
window.reactDom = require('react-dom');
+window.antd = require('antd');
diff --git a/gatsby-config.js b/gatsby-config.js
index df706787b2..670c52111d 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -191,11 +191,19 @@ module.exports = {
en: 'React Demo'
}
},
+ {
+ slug: 'district',
+ icon: 'map',
+ title: {
+ zh: '行政区划',
+ en: 'L7 District'
+ }
+ },
{
slug: 'draw',
icon: 'map',
title: {
- zh: '绘制 组件',
+ zh: '绘制组件',
en: 'L7 Draw'
}
},
diff --git a/gatsby-node.js b/gatsby-node.js
index fe874911b1..41bdb3a039 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -20,6 +20,7 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
'@antv/l7-source': path.resolve(__dirname, 'packages/source/src'),
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
'@antv/l7-react': path.resolve(__dirname, 'packages/react/src'),
- '@antv/l7-draw': path.resolve(__dirname, 'packages/draw/src')
+ '@antv/l7-draw': path.resolve(__dirname, 'packages/draw/src'),
+ '@antv/l7-district': path.resolve(__dirname, 'packages/district/src')
};
};
diff --git a/packages/district/src/layer/drillDown.ts b/packages/district/src/layer/drillDown.ts
index d8b7a295f6..91283c2931 100644
--- a/packages/district/src/layer/drillDown.ts
+++ b/packages/district/src/layer/drillDown.ts
@@ -42,8 +42,9 @@ export default class DrillDownLayer {
this.countryLayer.fillLayer.on('click', (e: any) => {
this.countryLayer.hide();
// 更新市级行政区划
- this.provinceLayer.updateDistrict([e.feature.properties.adcode]);
- this.drillState = 'city';
+ // this.provinceLayer.updateDistrict([e.feature.properties.adcode]);
+ // this.drillState = 'city';
+ this.drillDown(e.feature.properties.adcode);
});
}
@@ -52,14 +53,16 @@ export default class DrillDownLayer {
this.drillUp();
});
this.provinceLayer.fillLayer.on('click', (e: any) => {
- this.provinceLayer.hide();
- let adcode = e.feature.properties.adcode.toFixed(0);
- if (adcode.substr(2, 2) === '00') {
- adcode = adcode.substr(0, 2) + '0100';
- }
- // 更新县级行政区划
- this.cityLayer.updateDistrict([adcode]);
- this.drillState = 'county';
+ // this.provinceLayer.hide();
+ // const adcode = e.feature.properties.adcode.toFixed(0);
+ 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);
});
}
@@ -75,15 +78,30 @@ export default class DrillDownLayer {
this.cityLayer.destroy();
}
- public showProvinceView() {
+ public showProvinceView(
+ adcode: adcodeType,
+ 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';
}
- public showCityView() {
- this.countryLayer.show();
- this.countryLayer.fillLayer.fitBounds();
+ public showCityView(
+ code: adcodeType,
+ newData: Array<{ [key: string]: any }> = [],
+ joinByField?: [string, string],
+ ) {
+ this.cityLayer.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';
}
@@ -107,13 +125,17 @@ export default class DrillDownLayer {
break;
}
}
- public DrillDown(adcode: adcodeType, data: any) {
+ public drillDown(
+ adcode: adcodeType,
+ newData: Array<{ [key: string]: any }> = [],
+ joinByField?: [string, string],
+ ) {
switch (this.drillState) {
case 'province':
- this.showProvinceView();
+ this.showProvinceView(adcode);
break;
case 'city':
- this.showCityView();
+ this.showCityView(adcode);
break;
}
}
diff --git a/packages/district/src/layer/world.ts b/packages/district/src/layer/world.ts
index 3357cb0429..68b4d37997 100644
--- a/packages/district/src/layer/world.ts
+++ b/packages/district/src/layer/world.ts
@@ -74,7 +74,18 @@ export default class WorldLayer extends BaseLayer {
zIndex: zIndex + 1,
})
.source(boundaries)
- .size(0.6)
+ // .size(0.6)
+ .size('type', (v: string) => {
+ if (v === '0') {
+ return chinaNationalWidth; // 中国国界线
+ } else if (v === '2' || v === '9') {
+ return coastlineWidth; // 中国海岸线
+ } else if (v === '7') {
+ return nationalWidth; // 国外国界
+ } else {
+ return nationalWidth;
+ }
+ })
.color('type', (v: string) => {
if (v === '0') {
return chinaNationalStroke; // 中国国界线
diff --git a/stories/District/Layer/world.tsx b/stories/District/Layer/world.tsx
index 4b00ed57a0..21faabc196 100644
--- a/stories/District/Layer/world.tsx
+++ b/stories/District/Layer/world.tsx
@@ -39,7 +39,7 @@ export default class Country extends React.Component {
},
stroke: '#ccc',
label: {
- enable: false,
+ enable: true,
textAllowOverlap: false,
field: 'Short_Name_ZH',
},