diff --git a/src/api/index.js b/src/api/index.js
index 6dc5db91..b0040d64 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -46,3 +46,11 @@ export function getDashboardData() {
     method: 'GET',
   });
 }
+
+// 获取大盘行政区域数据
+export function getAdStatisticsData( params ) {
+  return request('/api/dashboard/getAdStatisticsData', {
+    method: 'GET',
+    params: params
+  });
+}
diff --git a/src/components/Guide/Guide.tsx b/src/components/Guide/Guide.tsx
index 26395e93..b0a8e171 100644
--- a/src/components/Guide/Guide.tsx
+++ b/src/components/Guide/Guide.tsx
@@ -1,7 +1,7 @@
 import { Layout, Row, Col, Select } from 'antd';
 import React, { useEffect, useState } from 'react';
 import styles from './Guide.less';
-import { getDashboardData } from '../../api';
+import { getDashboardData, getAdStatisticsData } from '../../api';
 
 import { GaodeMap ,Scene } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
@@ -18,78 +18,23 @@ const Guide: React.FC<Props> = (props) => {
   const [registerDays, setRegisterDays] = useState(0);
   const [createLayerCount, setCreateLayerCount] = useState(0);
   const [createPointCount, setCreatePointCount] = useState(0);
+  const [layerList, setLayerList] = useState([]);
+  const [scene, setScene] = useState();
+  const [layerId, setlayerId] = useState('');
 
-  useEffect(() => {debugger
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
         // pitch: 20,
         style: 'light',
-        center: [ 120, 20 ],
+        center: [ 110, 34 ],
         zoom: 3
       })
     });
     scene.on('loaded', () => {
-      const data = areaList
-        // .filter(({ level, parent }) => level === 'city' && parent === 330000)
-        .map((item) => ({ ...item, value: Math.random() * 5000 }));
-
-      const choropleth = new Choropleth({
-        source: {
-          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,
-        },
-        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: 'white', lineWidth: 1 },
-        },
-        tooltip: {
-          items: ['name', 'adcode', 'value'],
-        },
-        zoom: {
-          position: 'bottomright',
-        },
-        legend: {
-          position: 'bottomleft',
-        },
-        drill: {
-          steps: ['province', 'city', 'district'],
-        },
-      });
-
-      choropleth.addToScene(scene);
-    });
+      setScene(scene);
+    }) 
 
     //大盘统计数据
     getDashboardData().then((e) => {
@@ -97,12 +42,119 @@ const Guide: React.FC<Props> = (props) => {
       data.registerDays && setRegisterDays(data.registerDays);
       data.createLayerCount && setCreateLayerCount(data.createLayerCount);
       data.createPointCount && setCreatePointCount(data.createPointCount);
+      let layerList: Array<any> = [{
+        value: '001',
+            label: '999',
+      }];
+      if (data.layerList && data.layerList.length > 0) {
+        let selectList = data.layerList.map((item: any) => {
+          return {
+            value: item.id,
+            label: item.name,
+          }
+        });
+        setLayerList(selectList);
+      }
     });
 
   }, []);
-
-  let onLayerSelectChange = (e:any) => {
-    console.log(e);
+  let showAdStatisticsData = (layerId: string) => {
+    if (layerId) {
+      getAdStatisticsData({adLevel: 0, adcode: 100000, layerId: layerId}).then((e) => {
+        // const data = areaList
+        // // .filter(({ level, parent }) => level === 'city' && parent === 330000)
+        // .map((item) => ({ ...item, value: Math.random() * 5000 }));
+        const data = e.data//.map((item: any) => ({ ...item, value: item.statisticsLevel }));
+    
+        const choropleth = new Choropleth({
+          source: {
+            data,
+            joinBy: {
+              sourceField: 'adcode',
+              geoField: 'adcode',
+            },
+          },
+          viewLevel: {
+            level: 'country',
+            adcode: 100000,
+          },
+          autoFit: true,
+          color: {
+            field: 'statisticsLevel',
+            // value: ({ statisticsLevel }) => {
+            //   if (statisticsLevel == 0) return '#f7f7f7';
+            //   if (statisticsLevel == 1) return '#f8c7c7';
+            //   if (statisticsLevel == 2) return '#f8a9a9';
+            //   if (statisticsLevel == 3) return '#f67878';
+            //   if (statisticsLevel == 4) return '#f65858';
+            //   if (statisticsLevel == 5) return '#f63333';
+            //   if (statisticsLevel == 6) return '#e20a0a';
+            //   if (statisticsLevel == 7) return '#b80606';
+            //   if (statisticsLevel == 8) return '#920505';
+            //   if (statisticsLevel == 9) return '#720404';
+            //   if (statisticsLevel == 10) return '#570303';
+            // },
+            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: 'white', lineWidth: 1 },
+          },
+          tooltip: {
+            items: ['name', 'adcode', 'value'],
+          },
+          zoom: {
+            position: 'bottomright',
+          },
+          legend: {
+            position: 'bottomleft',
+          },
+          drill: {
+            steps: ['province', 'city', 'district'],
+            onDown(from, to, callback) {
+                debugger
+                const { level, adcode, granularity } = to;
+                let adLevel = 0;
+                if (level == 'province') {
+                  adLevel = 1;
+                } else if (level == 'city') {
+                  adLevel = 2;
+                } else if (level == 'district') {
+                  adLevel = 3;
+                }
+                getAdStatisticsData({'adLevel': adLevel, 'adcode': adcode, 'layerId': layerId}).then((e) => {
+                  let data = e.data;
+                  callback({ source: { data: e.data, joinBy: { sourceField: 'adcode' } } })
+                })
+            },
+          },
+        });
+        choropleth.addToScene(scene);
+      })
+    }
+  };
+  let onLayerSelectChange = (id: string) => {
+    setlayerId(id);
+    showAdStatisticsData(id);
   }
   
   return (
@@ -118,20 +170,11 @@ const Guide: React.FC<Props> = (props) => {
       <Row className={styles.filterWrap}>
         <Col span={5} className={styles.filterLabel}>全国自定义点位数目图</Col>
         <Col span={6}>
-          <Select
+          <Select allowClear
             style = {{width: 310, color: '#2F66F2'}}
             onChange = {onLayerSelectChange}
             placeholder='全部自定义图层'
-            options = {[
-              {
-                value: 'jack',
-                label: 'Jack',
-              },
-              {
-                value: 'lucy',
-                label: 'Lucy',
-              },
-            ]}
+            options = {layerList}
           ></Select>
         </Col>