首页地图上下钻

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
+  });
+}

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,21 +18,53 @@ 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
+      setScene(scene);
-        // .filter(({ level, parent }) => level === 'city' && parent === 330000)
+    }) 
-        .map((item) => ({ ...item, value: Math.random() * 5000 }));
+
+    //大盘统计数据
+    getDashboardData().then((e) => {
+      const data = e.data || {};
+      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 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: {
@@ -48,7 +80,20 @@ const Guide: React.FC<Props> = (props) => {
           },
           autoFit: true,
           color: {
-          field: 'value',
+            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' },
           },
@@ -85,24 +130,31 @@ const Guide: React.FC<Props> = (props) => {
           },
           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);
-    });
+      })
-
+    }
-    //大盘统计数据
+  };
-    getDashboardData().then((e) => {
+  let onLayerSelectChange = (id: string) => {
-      const data = e.data || {};
+    setlayerId(id);
-      data.registerDays && setRegisterDays(data.registerDays);
+    showAdStatisticsData(id);
-      data.createLayerCount && setCreateLayerCount(data.createLayerCount);
-      data.createPointCount && setCreatePointCount(data.createPointCount);
-    });
-
-  }, []);
-
-  let onLayerSelectChange = (e:any) => {
-    console.log(e);
   }
   
   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 = {[
+            options = {layerList}
-              {
-                value: 'jack',
-                label: 'Jack',
-              },
-              {
-                value: 'lucy',
-                label: 'Lucy',
-              },
-            ]}
           ></Select>
         </Col>