diff --git a/README.en-US.md b/README.en-US.md
index 6ca18d80e3..508d596ce4 100644
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -89,6 +89,7 @@ scene.addLayer(pointLayer);
 
 ## 🔗 Links
 
+- [L7Plot](https://github.com/antvis/L7Plot)
 - [L7 React](https://github.com/antvis/L7-React)
 - [L7 Boundary](https://github.com/antvis/L7-boundary)
 - [L7 draw](https://github.com/antvis/L7-draw)
diff --git a/README.md b/README.md
index 8e3f9a8f32..56809331bd 100644
--- a/README.md
+++ b/README.md
@@ -121,6 +121,7 @@ scene.addLayer(pointLayer);
 
 ## 🔗 Links
 
+- [L7Plot](https://github.com/antvis/L7Plot)
 - [L7 React](https://github.com/antvis/L7-React)
 - [L7 Boundary](https://github.com/antvis/L7-boundary)
 - [L7 draw](https://github.com/antvis/L7-draw)
diff --git a/docs/api/district/start.zh.md b/docs/api/district/start.zh.md
index 3836e1112d..f508d09c9f 100644
--- a/docs/api/district/start.zh.md
+++ b/docs/api/district/start.zh.md
@@ -3,8 +3,8 @@ title: 文档链接
 order: 0
 ---
 
-[旧版地图行政区划组件 L7Boundary](https://antv.vision/L7-boundary/)
+旧版地图行政区划组件 - [L7Boundary](https://antv.vision/L7-boundary/)
 
-[新版地图行政区划组件 L7Plot Choropleth](https://l7plot.antv.vision/zh/docs/api/plots/choropleth)
+新版地图行政区划组件 - [L7Plot Choropleth](https://l7plot.antv.vision/zh/docs/api/plots/choropleth)
 
-🌟 旧版本行政区划组件库不再继续维护，推荐使用 L7Plot 的行政区划图表
+🌟 旧版本行政区划组件库不再继续维护，推荐使用 L7Plot 的 [Choropleth 行政区划图表](https://l7plot.antv.vision/zh/examples/gallery#category-%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9F%9F)。
diff --git a/docs/common/district/choropleth.zh.md b/docs/common/district/choropleth.zh.md
new file mode 100644
index 0000000000..b9fd1609d2
--- /dev/null
+++ b/docs/common/district/choropleth.zh.md
@@ -0,0 +1,35 @@
+## Usage
+
+1. 按图表方式
+
+```js
+import { Choropleth } from '@antv/l7plot';
+
+const choropleth = new Choropleth('container', options);
+```
+
+2. 按场景方式
+
+```js
+import { Scene, Mapbox } from '@antv/l7';
+import { Choropleth } from '@antv/l7plot';
+
+const scene = new Scene({
+  id: 'container',
+  map: new Mapbox({
+    style: 'light',
+    center: [102.447303, 37.753574],
+    zoom: 5,
+  }),
+});
+
+const choropleth = new Choropleth(options);
+
+scene.on('loaded', () => {
+  choropleth.addToScene(scene);
+});
+```
+
+## API
+
+Choropleth 具体 API 文档移步 [L7Plot 官网](https://l7plot.antv.vision/zh/docs/api/plots/choropleth)。
diff --git a/examples/choropleth/administrative/API.en.md b/examples/choropleth/administrative/API.en.md
new file mode 100644
index 0000000000..03135ec6f6
--- /dev/null
+++ b/examples/choropleth/administrative/API.en.md
@@ -0,0 +1 @@
+`markdown:docs/common/district/choropleth.zh.md`
diff --git a/examples/choropleth/administrative/API.zh.md b/examples/choropleth/administrative/API.zh.md
new file mode 100644
index 0000000000..03135ec6f6
--- /dev/null
+++ b/examples/choropleth/administrative/API.zh.md
@@ -0,0 +1 @@
+`markdown:docs/common/district/choropleth.zh.md`
diff --git a/examples/choropleth/administrative/demo/administrative-switch.tsx b/examples/choropleth/administrative/demo/administrative-switch.tsx
new file mode 100644
index 0000000000..249d51279a
--- /dev/null
+++ b/examples/choropleth/administrative/demo/administrative-switch.tsx
@@ -0,0 +1,163 @@
+import React, { useRef, useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { Cascader } from 'antd';
+import { Choropleth } from '@antv/l7plot';
+
+function AdministrativeSwitch() {
+  const administrativeList = useRef([]);
+  const [administrativeTree, setAdministrativeTree] = useState([]);
+  const map = useRef<Choropleth>();
+
+  const getRandomNumber = (min = 10, max = 2000) => {
+    return Math.random() * (max - min) + min;
+  };
+
+  useEffect(() => {
+    fetch(
+      `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-tree.json`,
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        const china = data.filter(({ adcode }) => adcode === 100000);
+        setAdministrativeTree(china);
+      });
+  }, []);
+
+  useEffect(() => {
+    fetch(
+      `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+    )
+      .then((response) => response.json())
+      .then((list) => {
+        administrativeList.current = list;
+        const data = list
+          .filter(({ level }) => level === 'province')
+          .map((item) => Object.assign({}, item, { value: getRandomNumber() }));
+
+        const chinaMap = new Choropleth('mapContainer', {
+          map: {
+            type: 'mapbox',
+            style: 'blank',
+            center: [120.19382669582967, 30.258134],
+            zoom: 3,
+            pitch: 0,
+          },
+          source: {
+            data: data,
+            joinBy: {
+              sourceField: 'adcode',
+              geoField: 'adcode',
+            },
+          },
+          viewLevel: {
+            level: 'country',
+            adcode: '100000',
+          },
+          autoFit: true,
+          color: {
+            field: 'value',
+            value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+            scale: { type: 'quantize' },
+          },
+          style: {
+            opacity: 1,
+            stroke: '#ccc',
+            lineWidth: 0.6,
+            lineOpacity: 1,
+          },
+          chinaBorder: {
+            // 国界
+            national: { color: '#ccc', width: 1, opacity: 1 },
+            // 争议
+            dispute: {
+              color: '#ccc',
+              width: 1,
+              opacity: 0.8,
+              dashArray: [2, 2],
+            },
+            // 海洋
+            coast: { color: '#ccc', width: 0.7, opacity: 0.8 },
+            // 港澳
+            hkm: { color: 'gray', width: 0.7, opacity: 0.8 },
+          },
+          label: {
+            visible: true,
+            field: 'name',
+            style: {
+              fill: '#000',
+              opacity: 0.8,
+              fontSize: 10,
+              stroke: '#fff',
+              strokeWidth: 1.5,
+              textAllowOverlap: false,
+              padding: [5, 5],
+            },
+          },
+          state: {
+            active: { stroke: 'black', lineWidth: 1 },
+          },
+          tooltip: {
+            items: ['name', 'adcode', 'value'],
+          },
+          zoom: {
+            position: 'bottomright',
+          },
+          legend: {
+            position: 'bottomleft',
+          },
+        });
+
+        map.current = chinaMap;
+      });
+
+    return () => map.current?.destroy();
+  }, []);
+
+  const onCascaderChange = (value, selectedOptions) => {
+    const currentSelected = selectedOptions[selectedOptions.length - 1];
+    const { adcode, level, children } = currentSelected;
+    if (map.current) {
+      const data = children
+        ? children.map((item) => ({
+            adcode: item.adcode,
+            value: getRandomNumber(),
+          }))
+        : [{ adcode, value: getRandomNumber() }];
+      map.current.changeView({ adcode, level }, { source: { data } });
+    }
+  };
+
+  return (
+    <>
+      <div
+        id="mapContainer"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+      {administrativeTree.length && (
+        <Cascader
+          style={{
+            width: 300,
+            zIndex: 2,
+            position: 'absolute',
+            right: '10px',
+            top: '10px',
+          }}
+          changeOnSelect
+          allowClear={false}
+          fieldNames={{ label: 'name', value: 'adcode', children: 'children' }}
+          defaultValue={[100000]}
+          options={administrativeTree}
+          onChange={onCascaderChange}
+        />
+      )}
+    </>
+  );
+}
+
+ReactDOM.render(<AdministrativeSwitch />, document.getElementById('map'));
diff --git a/examples/choropleth/administrative/demo/china-city.ts b/examples/choropleth/administrative/demo/china-city.ts
new file mode 100644
index 0000000000..e01ebc66d0
--- /dev/null
+++ b/examples/choropleth/administrative/demo/china-city.ts
@@ -0,0 +1,70 @@
+import { Choropleth } from '@antv/l7plot';
+
+fetch(
+  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+)
+  .then((response) => response.json())
+  .then((list) => {
+    const data = list
+      .filter(({ level }) => level === 'city')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+
+    new Choropleth('map', {
+      map: {
+        type: 'mapbox',
+        style: 'blank',
+        center: [120.19382669582967, 30.258134],
+        zoom: 3,
+        pitch: 0,
+      },
+      source: {
+        data: data,
+        joinBy: {
+          sourceField: 'adcode',
+          geoField: 'adcode',
+        },
+      },
+      viewLevel: {
+        level: 'country',
+        adcode: 100000,
+        granularity: 'city',
+      },
+      autoFit: true,
+      color: {
+        field: 'value',
+        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+        scale: { type: 'quantize' },
+      },
+      style: {
+        opacity: 1,
+        stroke: '#ccc',
+        lineWidth: 0.6,
+        lineOpacity: 1,
+      },
+      label: {
+        visible: true,
+        field: 'name',
+        style: {
+          fill: '#000',
+          opacity: 0.8,
+          fontSize: 10,
+          stroke: '#fff',
+          strokeWidth: 1.5,
+          textAllowOverlap: false,
+          padding: [5, 5],
+        },
+      },
+      state: {
+        active: { stroke: 'black', lineWidth: 1 },
+      },
+      tooltip: {
+        items: ['name', 'adcode', 'value'],
+      },
+      zoom: {
+        position: 'bottomright',
+      },
+      legend: {
+        position: 'bottomleft',
+      },
+    });
+  });
diff --git a/examples/choropleth/administrative/demo/china-map.ts b/examples/choropleth/administrative/demo/china-map.ts
new file mode 100644
index 0000000000..c3aff93508
--- /dev/null
+++ b/examples/choropleth/administrative/demo/china-map.ts
@@ -0,0 +1,240 @@
+import { Scene, Mapbox } from '@antv/l7';
+import { Choropleth } from '@antv/l7plot';
+
+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({
+    style: 'blank',
+    center: [120.19382669582967, 30.258134],
+    zoom: 3,
+    pitch: 0,
+  }),
+});
+
+const choropleth = new Choropleth({
+  source: {
+    data: ProvinceData,
+    joinBy: {
+      sourceField: 'code',
+      geoField: 'adcode',
+    },
+  },
+  viewLevel: {
+    level: 'country',
+    adcode: 100000,
+  },
+  autoFit: true,
+  color: {
+    field: 'value',
+    value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+    scale: { type: 'quantile' },
+  },
+  style: {
+    opacity: 1,
+    stroke: '#ccc',
+    lineWidth: 0.6,
+    lineOpacity: 1,
+  },
+  label: {
+    visible: true,
+    field: 'name',
+    style: {
+      fill: '#000',
+      opacity: 0.8,
+      fontSize: 10,
+      stroke: '#fff',
+      strokeWidth: 1.5,
+      textAllowOverlap: false,
+      padding: [5, 5],
+    },
+  },
+  state: {
+    active: { stroke: 'black', lineWidth: 1 },
+  },
+  tooltip: {
+    items: ['name', 'adcode', 'value'],
+  },
+  zoom: {
+    position: 'bottomright',
+  },
+  legend: {
+    position: 'bottomleft',
+  },
+});
+
+scene.on('loaded', () => {
+  choropleth.addToScene(scene);
+});
diff --git a/examples/choropleth/administrative/demo/hangzhou-city.ts b/examples/choropleth/administrative/demo/hangzhou-city.ts
new file mode 100644
index 0000000000..6b61d8732d
--- /dev/null
+++ b/examples/choropleth/administrative/demo/hangzhou-city.ts
@@ -0,0 +1,69 @@
+import { Choropleth } from '@antv/l7plot';
+
+fetch(
+  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+)
+  .then((response) => response.json())
+  .then((list) => {
+    const data = list
+      .filter(({ level, parent }) => level === 'district' && parent === 330100)
+      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+
+    new Choropleth('map', {
+      map: {
+        type: 'mapbox',
+        style: 'blank',
+        center: [120.19382669582967, 30.258134],
+        zoom: 3,
+        pitch: 0,
+      },
+      source: {
+        data: data,
+        joinBy: {
+          sourceField: 'adcode',
+          geoField: 'adcode',
+        },
+      },
+      viewLevel: {
+        level: 'city',
+        adcode: 330100,
+      },
+      autoFit: true,
+      color: {
+        field: 'value',
+        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+        scale: { type: 'quantize' },
+      },
+      style: {
+        opacity: 1,
+        stroke: '#ccc',
+        lineWidth: 0.6,
+        lineOpacity: 1,
+      },
+      label: {
+        visible: true,
+        field: 'name',
+        style: {
+          fill: '#000',
+          opacity: 0.8,
+          fontSize: 10,
+          stroke: '#fff',
+          strokeWidth: 1.5,
+          textAllowOverlap: false,
+          padding: [5, 5],
+        },
+      },
+      state: {
+        active: { stroke: 'black', lineWidth: 1 },
+      },
+      tooltip: {
+        items: ['name', 'adcode', 'value'],
+      },
+      zoom: {
+        position: 'bottomright',
+      },
+      legend: {
+        position: 'bottomleft',
+      },
+    });
+  });
diff --git a/examples/choropleth/administrative/demo/meta.json b/examples/choropleth/administrative/demo/meta.json
new file mode 100644
index 0000000000..05a4d8ebf9
--- /dev/null
+++ b/examples/choropleth/administrative/demo/meta.json
@@ -0,0 +1,72 @@
+{
+  "title": {
+    "zh": "分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "world-map.ts",
+      "title": {
+        "zh": "世界地图",
+        "en": "World Map"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/2W6xl7Y3wm/e7590fc4-f49b-43c0-ba3b-8b40a9ac3b39.png"
+    },
+    {
+      "filename": "china-map.ts",
+      "title": {
+        "zh": "中国地图",
+        "en": "China Map"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/qSFaP32j8q/4428acf4-9362-4705-90c9-de950be5a177.png"
+    },
+    {
+      "filename": "china-city.ts",
+      "title": {
+        "zh": "中国市级地图",
+        "en": "China Citys Map"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/GN35RftkmZ/c53bc5ab-189f-42a2-9288-7b34f616f18d.png"
+    },
+    {
+      "filename": "zhejiang-province.ts",
+      "title": {
+        "zh": "浙江省地图",
+        "en": "Zhejiang Province Map"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/tX2zfzui76/821b3d1d-421c-4f09-a44e-53422db302f6.png"
+    },
+    {
+      "filename": "zhejiang-province-district.ts",
+      "title": {
+        "zh": "浙江省县级地图",
+        "en": "Zhejiang District Map"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/YQU0%24nl0gh/c9a9a70d-8abc-42f6-8795-856646346326.png"
+    },
+    {
+      "filename": "hangzhou-city.ts",
+      "title": {
+        "zh": "杭州市地图",
+        "en": "Hangzhou City Map"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/kagsfItG%26g/49861247-bc88-4d64-b5b1-0913c8ff55f8.png"
+    },
+    {
+      "filename": "xihu-district.ts",
+      "title": {
+        "zh": "西湖区地图",
+        "en": "Xihu District Map"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/04xm5U4yvt/828e6055-f005-4dba-8936-aaf451487db9.png"
+    },
+    {
+      "filename": "administrative-switch.tsx",
+      "title": {
+        "zh": "行政区域切换",
+        "en": "Administrative Switch"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/qSFaP32j8q/4428acf4-9362-4705-90c9-de950be5a177.png"
+    }
+  ]
+}
diff --git a/examples/choropleth/administrative/demo/world-map.ts b/examples/choropleth/administrative/demo/world-map.ts
new file mode 100644
index 0000000000..5a8e49b574
--- /dev/null
+++ b/examples/choropleth/administrative/demo/world-map.ts
@@ -0,0 +1,63 @@
+import { Choropleth } from '@antv/l7plot';
+
+new Choropleth('map', {
+  map: {
+    type: 'mapbox',
+    style: 'blank',
+    center: [120.19382669582967, 30.258134],
+    zoom: 3,
+    pitch: 0,
+  },
+  source: {
+    data: [],
+    joinBy: {
+      sourceField: 'code',
+      geoField: 'adcode',
+    },
+  },
+  viewLevel: {
+    level: 'world',
+    adcode: 'all',
+  },
+  autoFit: true,
+  color: {
+    field: 'name',
+    value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+  },
+  style: {
+    opacity: 1,
+    stroke: '#ccc',
+    lineWidth: 0.6,
+    lineOpacity: 1,
+  },
+  label: {
+    visible: true,
+    field: 'name',
+    style: {
+      fill: '#000',
+      opacity: 0.8,
+      fontSize: 10,
+      stroke: '#fff',
+      strokeWidth: 1.5,
+      textAllowOverlap: false,
+      padding: [5, 5],
+    },
+  },
+  state: {
+    active: true,
+    select: {
+      stroke: 'black',
+      lineWidth: 1.5,
+      lineOpacity: 0.8,
+    },
+  },
+  tooltip: {
+    items: ['name', 'adcode', 'value'],
+  },
+  zoom: {
+    position: 'bottomright',
+  },
+  legend: {
+    position: 'bottomleft',
+  },
+});
diff --git a/examples/choropleth/administrative/demo/xihu-district.ts b/examples/choropleth/administrative/demo/xihu-district.ts
new file mode 100644
index 0000000000..450dadb646
--- /dev/null
+++ b/examples/choropleth/administrative/demo/xihu-district.ts
@@ -0,0 +1,59 @@
+import { Choropleth } from '@antv/l7plot';
+
+new Choropleth('map', {
+  map: {
+    type: 'mapbox',
+    style: 'blank',
+    center: [120.19382669582967, 30.258134],
+    zoom: 3,
+    pitch: 0,
+  },
+  source: {
+    data: [{ adcode: 330106, value: 200 }],
+    joinBy: {
+      sourceField: 'adcode',
+      geoField: 'adcode',
+    },
+  },
+  viewLevel: {
+    level: 'district',
+    adcode: 330106,
+  },
+  autoFit: true,
+  color: {
+    field: 'value',
+    value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+    scale: { type: 'quantize' },
+  },
+  style: {
+    opacity: 1,
+    stroke: '#ccc',
+    lineWidth: 0.6,
+    lineOpacity: 1,
+  },
+  label: {
+    visible: true,
+    field: 'name',
+    style: {
+      fill: '#000',
+      opacity: 0.8,
+      fontSize: 10,
+      stroke: '#fff',
+      strokeWidth: 1.5,
+      textAllowOverlap: false,
+      padding: [5, 5],
+    },
+  },
+  state: {
+    active: { stroke: 'black', lineWidth: 1 },
+  },
+  tooltip: {
+    items: ['name', 'adcode', 'value'],
+  },
+  zoom: {
+    position: 'bottomright',
+  },
+  legend: {
+    position: 'bottomleft',
+  },
+});
diff --git a/examples/choropleth/administrative/demo/zhejiang-province-district.ts b/examples/choropleth/administrative/demo/zhejiang-province-district.ts
new file mode 100644
index 0000000000..f8530a8ed4
--- /dev/null
+++ b/examples/choropleth/administrative/demo/zhejiang-province-district.ts
@@ -0,0 +1,70 @@
+import { Choropleth } from '@antv/l7plot';
+
+fetch(
+  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+)
+  .then((response) => response.json())
+  .then((list) => {
+    const data = list
+      .filter(({ level }) => level === 'district')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+
+    new Choropleth('map', {
+      map: {
+        type: 'mapbox',
+        style: 'blank',
+        center: [120.19382669582967, 30.258134],
+        zoom: 3,
+        pitch: 0,
+      },
+      source: {
+        data: data,
+        joinBy: {
+          sourceField: 'adcode',
+          geoField: 'adcode',
+        },
+      },
+      viewLevel: {
+        level: 'province',
+        adcode: 330000,
+        granularity: 'district',
+      },
+      autoFit: true,
+      color: {
+        field: 'value',
+        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+        scale: { type: 'quantize' },
+      },
+      style: {
+        opacity: 1,
+        stroke: '#ccc',
+        lineWidth: 0.6,
+        lineOpacity: 1,
+      },
+      label: {
+        visible: true,
+        field: 'name',
+        style: {
+          fill: '#000',
+          opacity: 0.8,
+          fontSize: 10,
+          stroke: '#fff',
+          strokeWidth: 1.5,
+          textAllowOverlap: false,
+          padding: [5, 5],
+        },
+      },
+      state: {
+        active: { stroke: 'black', lineWidth: 1 },
+      },
+      tooltip: {
+        items: ['name', 'adcode', 'value'],
+      },
+      zoom: {
+        position: 'bottomright',
+      },
+      legend: {
+        position: 'bottomleft',
+      },
+    });
+  });
diff --git a/examples/choropleth/administrative/demo/zhejiang-province.ts b/examples/choropleth/administrative/demo/zhejiang-province.ts
new file mode 100644
index 0000000000..174972521f
--- /dev/null
+++ b/examples/choropleth/administrative/demo/zhejiang-province.ts
@@ -0,0 +1,69 @@
+import { Choropleth } from '@antv/l7plot';
+
+fetch(
+  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+)
+  .then((response) => response.json())
+  .then((list) => {
+    const data = list
+      .filter(({ level, parent }) => level === 'city' && parent === 330000)
+      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+
+    new Choropleth('map', {
+      map: {
+        type: 'mapbox',
+        style: 'blank',
+        center: [120.19382669582967, 30.258134],
+        zoom: 3,
+        pitch: 0,
+      },
+      source: {
+        data: data,
+        joinBy: {
+          sourceField: 'adcode',
+          geoField: 'adcode',
+        },
+      },
+      viewLevel: {
+        level: 'province',
+        adcode: 330000,
+      },
+      autoFit: true,
+      color: {
+        field: 'value',
+        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+        scale: { type: 'quantize' },
+      },
+      style: {
+        opacity: 1,
+        stroke: '#ccc',
+        lineWidth: 0.6,
+        lineOpacity: 1,
+      },
+      label: {
+        visible: true,
+        field: 'name',
+        style: {
+          fill: '#000',
+          opacity: 0.8,
+          fontSize: 10,
+          stroke: '#fff',
+          strokeWidth: 1.5,
+          textAllowOverlap: false,
+          padding: [5, 5],
+        },
+      },
+      state: {
+        active: { stroke: 'black', lineWidth: 1 },
+      },
+      tooltip: {
+        items: ['name', 'adcode', 'value'],
+      },
+      zoom: {
+        position: 'bottomright',
+      },
+      legend: {
+        position: 'bottomleft',
+      },
+    });
+  });
diff --git a/examples/choropleth/administrative/index.en.md b/examples/choropleth/administrative/index.en.md
new file mode 100644
index 0000000000..c90067d64e
--- /dev/null
+++ b/examples/choropleth/administrative/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Administrative Division
+order: 0
+---
diff --git a/examples/choropleth/administrative/index.zh.md b/examples/choropleth/administrative/index.zh.md
new file mode 100644
index 0000000000..1e51edfc2f
--- /dev/null
+++ b/examples/choropleth/administrative/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 行政区域
+order: 0
+---
diff --git a/examples/choropleth/drill/API.en.md b/examples/choropleth/drill/API.en.md
new file mode 100644
index 0000000000..03135ec6f6
--- /dev/null
+++ b/examples/choropleth/drill/API.en.md
@@ -0,0 +1 @@
+`markdown:docs/common/district/choropleth.zh.md`
diff --git a/examples/choropleth/drill/API.zh.md b/examples/choropleth/drill/API.zh.md
new file mode 100644
index 0000000000..03135ec6f6
--- /dev/null
+++ b/examples/choropleth/drill/API.zh.md
@@ -0,0 +1 @@
+`markdown:docs/common/district/choropleth.zh.md`
diff --git a/examples/choropleth/drill/demo/drill-callback.ts b/examples/choropleth/drill/demo/drill-callback.ts
new file mode 100644
index 0000000000..04c7150b1c
--- /dev/null
+++ b/examples/choropleth/drill/demo/drill-callback.ts
@@ -0,0 +1,112 @@
+import { Choropleth } from '@antv/l7plot';
+
+fetch(
+  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+)
+  .then((response) => response.json())
+  .then((list) => {
+    const data = list
+      .filter(({ level }) => level === 'province')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+
+    const cityData = list
+      .filter(({ level }) => level === 'city')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 2000 }));
+
+    const districtData = list
+      .filter(({ level }) => level === 'district')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
+
+    new Choropleth('map', {
+      map: {
+        type: 'mapbox',
+        style: 'blank',
+        center: [120.19382669582967, 30.258134],
+        zoom: 3,
+        pitch: 0,
+      },
+      source: {
+        data: data,
+        joinBy: {
+          sourceField: 'adcode',
+          geoField: 'adcode',
+        },
+      },
+      viewLevel: {
+        level: 'country',
+        adcode: 100000,
+      },
+      autoFit: true,
+      drill: {
+        steps: ['province', 'city'],
+        triggerUp: 'unclick',
+        triggerDown: 'click',
+        onDown: (from, to, callback) => {
+          const { level, granularity } = to;
+          if (granularity === 'city') {
+            callback({
+              source: { data: cityData, joinBy: { sourceField: 'adcode' } },
+            });
+          } else if (granularity === 'district') {
+            callback({
+              source: { data: districtData, joinBy: { sourceField: 'adcode' } },
+            });
+          }
+        },
+        onUp: (from, to, callback) => {
+          callback();
+        },
+      },
+      color: {
+        field: 'value',
+        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+        scale: { type: 'quantize' },
+      },
+      style: {
+        opacity: 1,
+        stroke: '#ccc',
+        lineWidth: 0.6,
+        lineOpacity: 1,
+      },
+      chinaBorder: {
+        // 国界
+        national: { color: '#ccc', width: 1, opacity: 1 },
+        // 争议
+        dispute: {
+          color: '#ccc',
+          width: 1,
+          opacity: 0.8,
+          dashArray: [2, 2],
+        },
+        // 海洋
+        coast: { color: '#ccc', width: 0.7, opacity: 0.8 },
+        // 港澳
+        hkm: { color: 'gray', width: 0.7, opacity: 0.8 },
+      },
+      label: {
+        visible: true,
+        field: 'name',
+        style: {
+          fill: '#000',
+          opacity: 0.8,
+          fontSize: 10,
+          stroke: '#fff',
+          strokeWidth: 1.5,
+          textAllowOverlap: false,
+          padding: [5, 5],
+        },
+      },
+      state: {
+        active: { stroke: 'black', lineWidth: 1 },
+      },
+      tooltip: {
+        items: ['name', 'adcode', 'value'],
+      },
+      zoom: {
+        position: 'bottomright',
+      },
+      legend: {
+        position: 'bottomleft',
+      },
+    });
+  });
diff --git a/examples/choropleth/drill/demo/drill-intercept.ts b/examples/choropleth/drill/demo/drill-intercept.ts
new file mode 100644
index 0000000000..ef326a0a52
--- /dev/null
+++ b/examples/choropleth/drill/demo/drill-intercept.ts
@@ -0,0 +1,102 @@
+import { Choropleth } from '@antv/l7plot';
+
+fetch(
+  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+)
+  .then((response) => response.json())
+  .then((list) => {
+    const data = list
+      .filter(({ level }) => level === 'province')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+
+    const cityData = list
+      .filter(({ level }) => level === 'city')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 2000 }));
+
+    const districtData = list
+      .filter(({ level }) => level === 'district')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
+
+    new Choropleth('map', {
+      map: {
+        type: 'mapbox',
+        style: 'blank',
+        center: [120.19382669582967, 30.258134],
+        zoom: 3,
+        pitch: 0,
+      },
+      source: {
+        data: data,
+        joinBy: {
+          sourceField: 'adcode',
+          geoField: 'adcode',
+        },
+      },
+      viewLevel: {
+        level: 'country',
+        adcode: 100000,
+      },
+      autoFit: true,
+      drill: {
+        steps: ['province', 'city'],
+        triggerUp: 'unclick',
+        triggerDown: 'click',
+        onDown: (from, to, callback) => {
+          const { adcode, level, granularity } = to;
+          // 如果是浙江省，禁止下钻
+          if (adcode === 330000) {
+            return;
+          }
+
+          if (granularity === 'city') {
+            callback({
+              source: { data: cityData, joinBy: { sourceField: 'adcode' } },
+            });
+          } else if (granularity === 'district') {
+            callback({
+              source: { data: districtData, joinBy: { sourceField: 'adcode' } },
+            });
+          }
+        },
+        onUp: (from, to, callback) => {
+          callback();
+        },
+      },
+      color: {
+        field: 'value',
+        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+        scale: { type: 'quantize' },
+      },
+      style: {
+        opacity: 1,
+        stroke: '#ccc',
+        lineWidth: 0.6,
+        lineOpacity: 1,
+      },
+      label: {
+        visible: true,
+        field: 'name',
+        style: {
+          fill: '#000',
+          opacity: 0.8,
+          fontSize: 10,
+          stroke: '#fff',
+          strokeWidth: 1.5,
+          textAllowOverlap: false,
+          padding: [5, 5],
+        },
+      },
+      state: {
+        active: { stroke: 'black', lineWidth: 1 },
+      },
+      tooltip: {
+        items: ['name', 'adcode', 'value'],
+      },
+      zoom: {
+        position: 'bottomright',
+      },
+      legend: {
+        position: 'bottomleft',
+      },
+    });
+  });
diff --git a/examples/choropleth/drill/demo/meta.json b/examples/choropleth/drill/demo/meta.json
new file mode 100644
index 0000000000..aa7f7b4ff9
--- /dev/null
+++ b/examples/choropleth/drill/demo/meta.json
@@ -0,0 +1,40 @@
+{
+  "title": {
+    "zh": "分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "order-drill.ts",
+      "title": {
+        "zh": "省市区下钻",
+        "en": "Order Drill"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ftd%248FdI08/zuanqu.gif"
+    },
+    {
+      "filename": "unorder-drill.ts",
+      "title": {
+        "zh": "跨粒度下钻",
+        "en": "Unorder Drill"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/w4VwQsFCgy/zuanqu.gif"
+    },
+    {
+      "filename": "drill-callback.ts",
+      "title": {
+        "zh": "下钻回调",
+        "en": "Drill Callback"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/kNXBgAN4%26Z/zuanqu2.gif"
+    },
+    {
+      "filename": "drill-intercept.ts",
+      "title": {
+        "zh": "下钻拦截",
+        "en": "Drill Intercept"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/rftSqwzjdj/zuanqu3.gif"
+    }
+  ]
+}
diff --git a/examples/choropleth/drill/demo/order-drill.ts b/examples/choropleth/drill/demo/order-drill.ts
new file mode 100644
index 0000000000..a61a8e4d74
--- /dev/null
+++ b/examples/choropleth/drill/demo/order-drill.ts
@@ -0,0 +1,97 @@
+import { Choropleth } from '@antv/l7plot';
+
+fetch(
+  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+)
+  .then((response) => response.json())
+  .then((list) => {
+    const data = list
+      .filter(({ level }) => level === 'province')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+
+    const cityData = list
+      .filter(({ level }) => level === 'city')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 2000 }));
+
+    const districtData = list
+      .filter(({ level }) => level === 'district')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
+
+    new Choropleth('map', {
+      map: {
+        type: 'mapbox',
+        style: 'blank',
+        center: [120.19382669582967, 30.258134],
+        zoom: 3,
+        pitch: 0,
+      },
+      source: {
+        data: data,
+        joinBy: {
+          sourceField: 'adcode',
+          geoField: 'adcode',
+        },
+      },
+      viewLevel: {
+        level: 'country',
+        adcode: 100000,
+      },
+      autoFit: true,
+      drill: {
+        steps: [
+          {
+            level: 'province',
+            source: { data: cityData },
+          },
+          {
+            level: 'city',
+            source: { data: districtData },
+          },
+          {
+            level: 'district',
+            source: { data: districtData },
+            // color: 'green',
+            // style: { opacity: 0.5 },
+          },
+        ],
+        triggerUp: 'unclick',
+        triggerDown: 'click',
+      },
+      color: {
+        field: 'value',
+        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+        scale: { type: 'quantize' },
+      },
+      style: {
+        opacity: 1,
+        stroke: '#ccc',
+        lineWidth: 0.6,
+        lineOpacity: 1,
+      },
+      label: {
+        visible: true,
+        field: 'name',
+        style: {
+          fill: '#000',
+          opacity: 0.8,
+          fontSize: 10,
+          stroke: '#fff',
+          strokeWidth: 1.5,
+          textAllowOverlap: false,
+          padding: [5, 5],
+        },
+      },
+      state: {
+        active: { stroke: 'black', lineWidth: 1 },
+      },
+      tooltip: {
+        items: ['name', 'adcode', 'value'],
+      },
+      zoom: {
+        position: 'bottomright',
+      },
+      legend: {
+        position: 'bottomleft',
+      },
+    });
+  });
diff --git a/examples/choropleth/drill/demo/unorder-drill.ts b/examples/choropleth/drill/demo/unorder-drill.ts
new file mode 100644
index 0000000000..4dfebded54
--- /dev/null
+++ b/examples/choropleth/drill/demo/unorder-drill.ts
@@ -0,0 +1,90 @@
+import { Choropleth } from '@antv/l7plot';
+
+fetch(
+  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+)
+  .then((response) => response.json())
+  .then((list) => {
+    const data = list
+      .filter(({ level }) => level === 'province')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+
+    const districtData = list
+      .filter(({ level }) => level === 'district')
+      .map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
+
+    new Choropleth('map', {
+      map: {
+        type: 'mapbox',
+        style: 'blank',
+        center: [120.19382669582967, 30.258134],
+        zoom: 3,
+        pitch: 0,
+      },
+      source: {
+        data: data,
+        joinBy: {
+          sourceField: 'adcode',
+          geoField: 'adcode',
+        },
+      },
+      viewLevel: {
+        level: 'country',
+        adcode: 100000,
+      },
+      autoFit: true,
+      drill: {
+        steps: [
+          {
+            level: 'province',
+            granularity: 'district',
+            source: { data: districtData },
+          },
+          {
+            level: 'district',
+            source: { data: districtData },
+            // color: 'green',
+            // style: { opacity: 0.5 },
+          },
+        ],
+        triggerUp: 'unclick',
+        triggerDown: 'click',
+      },
+      color: {
+        field: 'value',
+        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+        scale: { type: 'quantize' },
+      },
+      style: {
+        opacity: 1,
+        stroke: '#ccc',
+        lineWidth: 0.6,
+        lineOpacity: 1,
+      },
+      label: {
+        visible: true,
+        field: 'name',
+        style: {
+          fill: '#000',
+          opacity: 0.8,
+          fontSize: 10,
+          stroke: '#fff',
+          strokeWidth: 1.5,
+          textAllowOverlap: false,
+          padding: [5, 5],
+        },
+      },
+      state: {
+        active: { stroke: 'black', lineWidth: 1 },
+      },
+      tooltip: {
+        items: ['name', 'adcode', 'value'],
+      },
+      zoom: {
+        position: 'bottomright',
+      },
+      legend: {
+        position: 'bottomleft',
+      },
+    });
+  });
diff --git a/examples/choropleth/drill/index.en.md b/examples/choropleth/drill/index.en.md
new file mode 100644
index 0000000000..558ba2df53
--- /dev/null
+++ b/examples/choropleth/drill/index.en.md
@@ -0,0 +1,4 @@
+---
+title: Drill down
+order: 1
+---
diff --git a/examples/choropleth/drill/index.zh.md b/examples/choropleth/drill/index.zh.md
new file mode 100644
index 0000000000..fe88feab2d
--- /dev/null
+++ b/examples/choropleth/drill/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 区域钻取
+order: 1
+---
diff --git a/gatsby-browser.js b/gatsby-browser.js
index b44a3735ec..99b1aba888 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,4 +1,3 @@
-
 require('./site/css/demo.css');
 require('./packages/component/src/css/l7.css');
 require('antd/dist/antd.less');
@@ -8,6 +7,7 @@ window.l7 = require('@antv/l7');
 window.l7Mini = require('@antv/l7-mini');
 window.l7MiniMap = require('@antv/l7-maps/lib/map');
 window.l7Maps = require('@antv/l7-maps');
+window.l7plot = require('@antv/l7plot');
 window.l7React = require('@antv/l7-react');
 window.l7Draw = require('@antv/l7-draw');
 window.l7District = require('@antv/l7-district');
diff --git a/gatsby-config.js b/gatsby-config.js
index d49c2d8a45..cdf00b6a03 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -3,14 +3,15 @@ module.exports = {
     {
       resolve: '@antv/gatsby-theme-antv',
       options: {
-        GATrackingId: 'UA-148148901-7'
-      }
-    }
+        GATrackingId: 'UA-148148901-7',
+      },
+    },
   ],
   siteMetadata: {
     title: 'L7',
     isAntVSite: false,
-    description: 'Large-scale WebGL-powered Geospatial data visualization analysis framework',
+    description:
+      'Large-scale WebGL-powered Geospatial data visualization analysis framework',
     siteUrl: 'https://l7.antv.vision',
     githubUrl: 'https://github.com/antvis/L7',
     showChartResize: true, // 是否在demo页展示图表视图切换
@@ -20,33 +21,40 @@ module.exports = {
         slug: 'docs/api',
         title: {
           zh: '文档',
-          en: 'Document'
+          en: 'Document',
         },
-        redirect: 'api/l7'
+        redirect: 'api/l7',
       },
       {
         slug: 'docs/tutorial',
         title: {
           zh: '教程',
-          en: 'Tutorial'
-        }
+          en: 'Tutorial',
+        },
       },
       {
         slug: 'examples',
         title: {
           zh: '图表演示',
-          en: 'Examples'
-        }
-      }
+          en: 'Examples',
+        },
+      },
     ],
     ecosystems: [
       {
         name: {
-          zh: 'L7 React组件',
-          en: 'L7React L7 For React',
+          zh: 'L7 React 组件',
+          en: 'L7 For React',
         },
         url: 'http://antv.vision/L7-react/',
       },
+      {
+        name: {
+          zh: 'L7 Plot 图表',
+          en: 'L7Plot',
+        },
+        url: 'https://l7plot.antv.vision/',
+      },
       {
         name: {
           zh: 'L7 地理围栏绘制组件库',
@@ -78,26 +86,26 @@ module.exports = {
         slug: 'tutorial/map',
         title: {
           zh: '地图',
-          en: 'Map'
+          en: 'Map',
         },
-        order: 3
+        order: 3,
       },
       {
         slug: 'tutorial/interactive',
         title: {
           zh: '交互',
-          en: 'interactive'
+          en: 'interactive',
         },
-        order: 4
+        order: 4,
       },
       {
         slug: 'tutorial/demo',
         icon: 'map',
         title: {
           zh: '教程示例',
-          en: 'Tutorial demo'
+          en: 'Tutorial demo',
         },
-        order: 5
+        order: 5,
       },
 
       // ****** api
@@ -105,290 +113,298 @@ module.exports = {
         slug: 'api/map',
         title: {
           zh: '地图 Map',
-          en: 'Map'
+          en: 'Map',
         },
-        order: 1
+        order: 1,
       },
       {
         slug: 'api/map/earth',
         title: {
           zh: '地球模式',
-          en: 'Earth Mode'
+          en: 'Earth Mode',
         },
-        order: 3
+        order: 3,
       },
       {
         slug: 'api/base',
         title: {
           zh: '图层 base',
-          en: 'Layer'
+          en: 'Layer',
         },
-        order: 2
+        order: 2,
       },
       {
         slug: 'api/point_layer',
         title: {
           zh: '点图层',
-          en: 'PointLayer'
+          en: 'PointLayer',
         },
-        order: 3
+        order: 3,
       },
       {
         slug: 'api/line_layer',
         title: {
           zh: '线图层',
-          en: 'LineLayer'
+          en: 'LineLayer',
         },
-        order: 4
+        order: 4,
       },
       {
         slug: 'api/polygon_layer',
         title: {
           zh: '面图层',
-          en: 'PolygonLayer'
+          en: 'PolygonLayer',
         },
-        order: 5
+        order: 5,
       },
       {
         slug: 'api/heatmap_layer',
         title: {
           zh: '热力图层',
-          en: 'HeatMapLayer'
+          en: 'HeatMapLayer',
         },
-        order: 6
+        order: 6,
       },
       {
         slug: 'api/imagelayer',
         title: {
           zh: '图片图层',
-          en: 'ImageLayer'
+          en: 'ImageLayer',
         },
-        order: 7
+        order: 7,
       },
       {
         slug: 'api/raster',
         title: {
           zh: '栅格图层',
-          en: 'RasterLayer'
+          en: 'RasterLayer',
         },
-        order: 8
+        order: 8,
       },
       {
         slug: 'api/component',
         title: {
           zh: '组件 Component',
-          en: 'Component'
+          en: 'Component',
         },
-        order: 8
+        order: 8,
       },
       {
         slug: 'api/renderer',
         title: {
           zh: '第三方引擎接入',
-          en: 'import other gl'
+          en: 'import other gl',
         },
-        order: 8
+        order: 8,
       },
       {
         slug: 'api/cityBuilding',
         title: {
           zh: '城市图层',
-          en: 'CityBuildLayer'
+          en: 'CityBuildLayer',
         },
-        order: 9
+        order: 9,
       },
       {
         slug: 'api/wind',
         title: {
           zh: '风场图层',
-          en: 'WindLayer'
+          en: 'WindLayer',
         },
-        order: 9
+        order: 9,
       },
       {
         slug: 'api/mini',
         title: {
           zh: '小程序',
-          en: 'mini'
+          en: 'mini',
         },
-        order: 9
+        order: 9,
       },
       {
         slug: 'api/source',
         title: {
           zh: '数据 Source',
-          en: 'Source'
+          en: 'Source',
         },
-        order: 10
+        order: 10,
       },
       {
         slug: 'api/district',
         title: {
           zh: '行政区划',
-          en: 'District'
+          en: 'District',
         },
-        order: 11
+        order: 11,
       },
       {
         slug: 'api/draw',
         title: {
           zh: '绘制组件',
-          en: 'Draw Component'
+          en: 'Draw Component',
         },
-        order: 12
+        order: 12,
       },
       {
         slug: 'api/react',
         title: {
           zh: 'React 组件',
-          en: 'React Component'
+          en: 'React Component',
         },
-        order: 13
+        order: 13,
       },
       {
         slug: 'api/mini/demos',
         title: {
           zh: '案例集合',
-          en: 'demos'
+          en: 'demos',
         },
-        order: 14
-      }
+        order: 14,
+      },
     ],
     examples: [
-      
       {
         slug: 'gallery',
         icon: 'gallery',
         title: {
           zh: '官方精品库',
-          en: 'Featured'
+          en: 'Featured',
         },
-        order: 0
+        order: 0,
       },
       {
         slug: 'point',
         icon: 'point',
         title: {
           zh: '点图层',
-          en: 'Point Layer'
+          en: 'Point Layer',
         },
-        order: 1
+        order: 1,
       },
       {
         slug: 'line',
         icon: 'line',
         title: {
           zh: '线图层',
-          en: 'Line Layer'
+          en: 'Line Layer',
         },
-        order: 2
+        order: 2,
       },
       {
         slug: 'polygon',
         icon: 'polygon',
         title: {
           zh: '面图层',
-          en: 'Polygon Layer'
+          en: 'Polygon Layer',
         },
-        order: 3
+        order: 3,
       },
       {
         slug: 'earth',
         icon: 'map',
         title: {
           zh: '地球模式',
-          en: 'Earth Mode'
+          en: 'Earth Mode',
         },
-        order: 4
+        order: 4,
       },
       {
         slug: 'heatmap',
         icon: 'heatmap',
         title: {
           zh: '热力图',
-          en: 'HeatMap Layer'
+          en: 'HeatMap Layer',
         },
-        order: 6
+        order: 6,
       },
       {
         slug: 'raster',
         icon: 'raster',
         title: {
           zh: '栅格图层',
-          en: 'Raster Layer'
+          en: 'Raster Layer',
         },
-        order: 7
+        order: 7,
       },
       {
         slug: 'wind',
         icon: 'raster',
         title: {
           zh: '风场图层',
-          en: 'Wind Layer'
+          en: 'Wind Layer',
         },
-        order: 7
+        order: 7,
       },
       {
         slug: 'engine',
         icon: 'map',
         title: {
           zh: '第三方引擎',
-          en: 'other engine'
+          en: 'other engine',
         },
-        order: 8
+        order: 8,
       },
       {
         slug: 'react',
         icon: 'map',
         title: {
           zh: 'React 组件',
-          en: 'React Demo'
+          en: 'React Demo',
         },
-        order: 9
+        order: 9,
       },
       {
         slug: 'amapPlugin',
         icon: 'map',
         title: {
           zh: '高德地图插件',
-          en: 'amapPlugin'
+          en: 'amapPlugin',
         },
-        order: 10
+        order: 10,
       },
-     
       {
         slug: 'district',
         icon: 'map',
         title: {
           zh: '行政区划',
-          en: 'L7 District'
+          en: 'L7 District',
         },
-        order: 11
+        order: 11,
+      },
+      {
+        slug: 'choropleth',
+        icon: 'map',
+        title: {
+          zh: '行政区划 🌟',
+          en: 'Choropleth',
+        },
+        order: 11,
       },
       {
         slug: 'draw',
         icon: 'map',
         title: {
           zh: '绘制组件',
-          en: 'L7 Draw'
+          en: 'L7 Draw',
         },
-        order: 12
+        order: 12,
       },
       {
         slug: 'tutorial',
         icon: 'map',
         title: {
           zh: '教程示例',
-          en: 'Tutorial demo'
-        }
-      }
+          en: 'Tutorial demo',
+        },
+      },
     ],
     playground: {
-      container: '<div style="height: 100vh;justify-content: center; position: relative" id="map"/>',
+      container:
+        '<div style="height: 100vh;justify-content: center; position: relative" id="map"/>',
       dependencies: {
         '@antv/l7': 'latest',
-        '@antv/l7-maps': 'latest'
-      }
+        '@antv/l7-maps': 'latest',
+      },
     },
     mdPlayground: {
       // markdown 文档中的 playground 若干设置
@@ -396,7 +412,7 @@ module.exports = {
     },
     docsearchOptions: {
       apiKey: '97db146dbe490416af81ef3a8923bcaa',
-      indexName: 'antv_l7'
-    }
-  }
+      indexName: 'antv_l7',
+    },
+  },
 };
diff --git a/package.json b/package.json
index ae54e6983a..0006f36c84 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@antv/l7-district": "^2.3.9",
     "@antv/l7-draw": "2.4.18",
     "@antv/l7-react": "^2.3.3",
+    "@antv/l7plot": "^0.0.4",
     "@babel/cli": "^7.6.4",
     "@babel/core": "^7.6.4",
     "@babel/plugin-proposal-decorators": "^7.6.0",