map/src/components/Guide/Guide.tsx

import { Layout, Row, Col, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './Guide.less';
import { getDashboardData, getAdStatisticsData } from '../../api';

import { GaodeMap ,Scene } from '@antv/l7';
import { Choropleth } from '@antv/l7plot';
import areaList from '../../assets/localData/area-list.json'


interface Props {
  name: string;
}

// 脚手架示例组件
const Guide: React.FC<Props> = (props) => {
  const { name } = 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(() => {
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        // pitch: 20,
        doubleClickZoom: false,
        style: 'light',
        center: [ 110, 34 ],
        zoom: 3,
      })
    });
    scene.on('loaded', () => {
      setScene(scene);
    }) 

    //大盘统计数据
    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: {
            data,
            joinBy: {
              sourceField: 'adcode',
              geoField: 'adcode',
            },
          },
          viewLevel: {
            level: 'country',
            adcode: 100000,
          },
          autoFit: true,
          color: {
            field: 'value',
            // 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: [
              {field:'name',alias:'行政区域名称'},
              {field:'adcode',alias:'行政区域编码'},
              {field:'value',alias:'点位数目统计值'}
            ]
          },
          zoom: {
            position: 'bottomright',
          },
          legend: {
            position: 'bottomleft',
          },
          drill: {
            steps: ['province', 'city', 'district'],
            onDown(from, to, callback) {
                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 (
    <Layout>
      {/* 顶部信息 */}
      <div className={styles.homepageMsg}>
        <div className={styles.homepageMsgItem}>您已注册<span className={styles.homepageMsgItemSpan}>{registerDays}</span>天</div>
        <div className={styles.homepageMsgItem}>已创建图层数目<span className={styles.homepageMsgItemSpan}>{createLayerCount}</span>个</div>
        <div className={styles.homepageMsgItem}>已创建点位数目<span className={styles.homepageMsgItemSpan}>{createPointCount}</span>个</div>
      </div>

      {/* 下拉框 全国自定义点位数目图 */}
      <Row className={styles.filterWrap}>
        <Col span={5} className={styles.filterLabel}>请选择需统计数目的图层</Col>
        <Col span={6}>
          <Select allowClear
            style = {{width: 310, color: '#2F66F2'}}
            onChange = {onLayerSelectChange}
            placeholder='全部自定义图层'
            options = {layerList}
          ></Select>
        </Col>
       
      </Row>
      

      {/* 地图 */}
      <div className={styles.homepageCircleWrap}>
        <div className={styles.homepageCircleOut}>
          <div className={styles.homepageCircleIn}>
            <div id='map' className={styles.map}></div>
          </div>
        </div>
      </div>
      
    </Layout>
  );
};

export default Guide;