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

  useEffect(() => {debugger
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        // pitch: 20,
        style: 'light',
        center: [ 120, 20 ],
        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);
    });

    //大盘统计数据
    getDashboardData().then((e) => {
      const data = e.data || {};
      data.registerDays && setRegisterDays(data.registerDays);
      data.createLayerCount && setCreateLayerCount(data.createLayerCount);
      data.createPointCount && setCreatePointCount(data.createPointCount);
    });

  }, []);

  let onLayerSelectChange = (e:any) => {
    console.log(e);
  }
  
  return (
    <Layout>
      {/* <Row>
        <Typography.Title level={3} className={styles.title}>
          欢迎使用 <strong>{name}</strong> ！
        </Typography.Title>
      </Row> */}

      {/* 顶部信息 */}
      <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
            style = {{width: 310, color: '#2F66F2'}}
            onChange = {onLayerSelectChange}
            placeholder='全部自定义图层'
            options = {[
              {
                value: 'jack',
                label: 'Jack',
              },
              {
                value: 'lucy',
                label: 'Lucy',
              },
            ]}
          ></Select>
        </Col>
       
      </Row>
      

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

export default Guide;