AntV可视化地图组件库L7实现地图点击显示柱状图

写在前面

需求：显示中国地图，然后点击省份就近弹窗展示该省当月某指标近15天柱状图。

项目背景：

• react
• @antv/l7 行政区区块可视化 地址：antv.vision/L7-boundary…

没有使用Ant Design Charts的map是因为它目前对自定义支持不够友好； @antv/l7plot 加载比较慢，页面比较卡；所以最终选择直接使用l7来实现； 实现思路：

1. 使用地图下钻拦截获取省份信息；
2. 获取点击事件的横纵坐标；
3. 显示弹窗并展示该省近15天的数据；

正文开始

1. 下钻获取省份信息

import { Scene, Zoom } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
import { Modal } from 'antd';

// 组件...
useEffect(()=>{
     const scene = new Scene({
      id,
      map: new Mapbox({
        center: [116.2825, 39.9],
        pitch: 0,
        style: 'blank',
        zoom: 0,
        minZoom: 0,
        maxZoom: 10,
        rotateEnable: false,
      }),
      logoVisible: false,
    });
    scene.addControl(zoomControl);
    scene.on('loaded', () => {
      const layer = new CountryLayer(scene, {
        autoFit: true,
        data: sourceData,
        joinBy: ['adcode', 'code'], //['NAME_CHN', 'name'],
        depth: 1,
        chinaNationalStroke: '#eee',
        chinaNationalWidth: 0.5,
        coastlineStroke: '#e2e2e2',
        coastlineWidth: 0.5,
        provinceStroke: '#fff',
        provinceStrokeWidth: 0.5,
        stroke: '#ccc',
      });
      layer.on('click', (e: any) => {
        const mapClick = ({ target, feature, ...rst }: any) => {
        const { properties } = feature;
        const { x, y } = target;
        // 确定弹窗位置
        setColumnPosition({ left: x, top: y }); // 获取点击x轴 y轴
        setColumnTitle(properties.name); // 获取点击省份信息
        setColumnVisible(true);
        //...处理弹窗折线图数据
      });
    });
},[sourceData]);


return (
    <div>
       <Modal style={{top:columnPosition.top, left: columnPosition.left}}>
           {//...柱形图展示}
       </Modal>
    </div>
);

这样就可以实现点击弹出弹窗的效果了，核心点就是获取点击坐标点X和Y, 还有就是确定点击省份处理数据，然后弹窗展示数据就可以了。